3D RGB Color Cube - Online Interactive Space
Explore the RGB color space as a rotatable 3D cube. Pick a color directly from the volume. Drag to rotate. Canvas 3D.
UD5 Toolkit
The RGB color cube is a 3D representation of the RGB color space, where the X-axis represents Red (0–255), the Y-axis represents Green (0–255), and the Z-axis represents Blue (0–255). Every possible RGB color corresponds to a point inside this cube. The 8 corners represent pure black, white, red, green, blue, cyan, magenta, and yellow.
Rotate: drag with the left mouse button. Zoom: scroll wheel or pinch gesture. Pan: right-click and drag. Pick a color: click on any colored point inside the cube to see its RGB, HEX, and HSL values. Use the Slice Explorer to isolate a specific Red, Green, or Blue plane and study how colors distribute within that slice.
The diagonal line running from the black corner (0,0,0) to the white corner (255,255,255) contains all neutral gray colors — where R = G = B. Click the "Grayscale Axis" button to align the camera with this diagonal and explore the full grayscale spectrum.
HEX is simply a base-16 (hexadecimal) representation of RGB values. For example, RGB(255, 0, 128) becomes #FF0080. Each pair of hex digits represents one color channel: FF = 255 (red), 00 = 0 (green), 80 = 128 (blue). Use the copy buttons to grab values in either format.
This viewer helps designers and developers understand color relationships, explore color gradients in 3D, find harmonious color combinations, visualize how RGB mixing works, and learn about color theory interactively. It's also useful for debugging color values and understanding how digital colors are structured in three-dimensional space.
Colors with low values in all three channels (near the black corner) naturally appear darker, while colors near the white corner (high R, G, and B) appear bright. The internal points of the cube show smooth transitions between all 16.7 million possible RGB colors, creating a rich gradient from dark to light across the volume.
Explore the RGB color space as a rotatable 3D cube. Pick a color directly from the volume. Drag to rotate. Canvas 3D.
A paint worklet that draws a moving 3D cube. See Houdini in action and copy the JS file. Modern CSS magic.
Simulate paint colors on a pre-loaded room photo by adjusting hue, saturation. Find your perfect shade before buying. Local canvas.
Connect an audio source to an Analyzer Node and display frequency and time‑domain data. Learn Web Audio visualization.
Upload an image and see its 2D FFT magnitude and phase. Learn how image filtering works. Educatinal tool. Canvas.
View the individual red, green, and blue channels of an image as grayscale. Photographer and developer tool.
Enter L*a*b* values and see the corresponding RGB and hex color. Useful for advanced color manipulation.
Convert RGB and hex colors to CIELAB L*a*b* values. Understand perceptual lightness and chromaticity. All local math.
Load an audio file and see its spectrogram with frequency over time. Adjust resolution and color map. Discover hidden sounds.
Set perspective and rotate children in 3D space. See the effect of perspective‑origin. Copy the CSS. Learn 3D transforms.
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
Rotate and view the 3D shapes of s, p, d, and f orbitals. Great for teaching quantum mechanics. WebGL‑based.
Roll virtual dice with animated 3D spins. Choose any number and type. See total and individual results. Fun for games.
Move the vanishing point of a 3D scene. Drag to set perspective‑origin and see the scene shift. Copy CSS.
Nest elements in 3D space with preserve‑3d vs flat. Rotate the parent and see children behave differently.
Turn your phone into a 3D compass using the AbsoluteOrientationSensor API. See quaternion and Euler angles in real time.
Build a multi‑layer text‑shadow to simulate 3D extruded text. Control depth, color, and direction. Copy long shadow CSS.
Apply an emboss filter to your photo. Choose direction and depth. Gives a 3D carved stone look. Pure canvas.
Build a 3D rotating cube using pure CSS. Set dimensions, colors, and animation speed. Copy the HTML and CSS.
Enter a Kelvin value (1000‑40000) and see the approximate white‑balance color. Photography and lighting reference.
Create a 3D extruded text effect using multiple text‑shadows. Adjust depth, color, and perspective. Ready‑to‑use CSS.
Interlace two images into a striped pattern for lenticular lens printing. Preview with simulated tilt. DIY fun.
Shift color channels to create a 3D anaglyph image. Grab your red‑cyan glasses! Can use different offset.
Draw a 3D box or room interior by dragging vanishing points. Great for learning perspective drawing. Export as image.
Given an RGB value, pick the matching color square. Multiple difficulty levels. Improve your color perception. Fun for designers.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Browse a beautifully designed periodic table with electron shell visualization and key facts. Click any element to learn more. Offline ready.
Manipulate RGB and brightness curves with interactive splines. Apply professional color grading to your images. Fully in-browser.
Convert screen RGB colors to print-ready CMYK values. Understand color shifts before printing. Ideal for graphic designers preparing artwork for press.
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.