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.
Choose a pre-drawn pixel outline and fill cells with colors. Save your masterpiece. Meditative fun.
Rotate a 3D cube on your phone using the Gyroscope API. See angular velocity around each axis. Amazing sensor demo.
A wireframe 3D projection of a rotating tesseract. Drag to rotate in 4D. Fascinating mathematical art.
Click colors on an interactive wheel and see the common emotions and meanings associated with them. A design resource.
Select bonding and lone pairs to see the predicted shape (trigonal bipyramidal, octahedral). Static diagrams.
Mix two or more colors using subtractive (CMYK‑like) blending. See what happens when you combine real paints. Brush effect canvas.
Create 1-point, 2-point, or 3-point perspective grids. Adjust vanishing points and grid spacing. Useful for artists and architects.
Move your mouse to create colorful ink swirls in a simulated fluid. Beautiful and mesmerizing. No install. Just WebGL.
Upload an image and convert it into a paint-by-numbers outline with numbered palette. Adjust complexity. Print and paint. Local processing.
Click any color to see common emotional associations and cultural meanings. Quick design reference.
Draw a raised bed and drag plant icons to arrange them. See spacing requirements. Print layout.
Arrange virtual fabric squares or triangles on a grid to preview a quilt pattern. Change colors and sizes. Export layout.
Reduce an image to large colored squares. Create bold, minimalist wall art. Adjust block size. Download PNG.
Turn any photo into a greyscale pencil sketch. Adjust detail level and darkness. Download your artwork. Local canvas filter.
Get the exact RGB inversion (negative) of any color. Useful for dark mode theming and high‑contrast accessibility checks.
Generate a beautiful fractal tree with adjustable depth, angle, and color. Watch it draw branch by branch. Relaxing and educational.
Turn your photo into a black‑and‑white charcoal or chalk drawing. Adjust texture and contrast. Artistic.
Calculate new dimensions while preserving aspect ratio, or find the ratio from width and height. For video and images.
Apply a blur effect to image background while keeping the subject sharp. Simple brush selection for area to keep sharp. CSS+Canvas implementation, local only.
Overlay a grid on any image to help you draw it freehand. Adjust grid size and line thickness. Useful for artists.
Open the same page in two tabs and draw together in real time using BroadcastChannel API. Share ideas without a server.
Create a simple tessellation by deforming a square or triangle and repeating it across the canvas. Hypnotic patterns.
Click through a visual emotion wheel to explore nuanced feelings. Build emotional vocabulary and self-awareness. Local, no data collected.
View a series of digital Ishihara‑style plates. Not a diagnostic tool, just educational. Read numbers.
Browse the built‑in styles that browsers apply to HTML elements. Understand why your page looks different. Static reference.
Upload a photo and convert it to a pixelated cross-stitch pattern with DMC floss color matching. Adjust size and color count. Local processing.
Apply a realistic oil painting texture to your photo. Adjust brush size and roughness. Brush stroke simulation.