Color Wheel
Click the wheel to pick a color. The wheel reflects your current saturation and lightness.
Your Palette (max 5)
Harmony Explorer
Select a harmony type to see the geometric relationship on the wheel.
Hue · Saturation · Lightness
The three dials of every color.
Hue + white. Lighter, softer, more pastel.
Hue + black. Darker, deeper, more dramatic.
Hue + gray. Muted, subdued, more natural.
Value Check
"Value does the work, color gets the credit." Toggle grayscale to see if your palette has real tonal contrast.
Value Scale
Color Proportion
Same colors, completely different feel based on how much of each you use.
Saved Palettes
Simultaneous Contrast
Both inner squares are the exact same color. Context changes everything.
Contrast Checker
WCAG requires 4.5:1 for normal text and 3:1 for large text.
Warm & Cool
Color temperature shapes emotion and spatial perception.
Color Psychology
Common emotional associations.
Quick Reference
Red, Yellow, Blue
Secondary
Orange, Green, Violet
Tertiary
Red-Orange, Yellow-Green, etc.
Saturation - vivid vs. muted
Lightness - bright vs. dark
Value - perceived brightness
Shade - hue + black
Tone - hue + gray
Chroma - color purity
Guide
Click any section to expand.
Explore
Color Wheel
Click the wheel to pick a color. Edge = more vivid, center = more muted. The wheel updates as you change saturation and lightness.
Harmony / Palette Toggle
Harmony shows the shape for your selected harmony type on the wheel. Palette maps your saved colors onto a lightness wheel so you can see how they relate by hue and brightness.
Harmony Explorer
Pick a harmony type to see which colors pair well together. Click any color in the row to make it the new base.
Primary Color Box
Shows your active color. Click the hex to type or paste one. ⎘ copies it. ⟳ randomizes.
Hue, Saturation & Lightness
Hue picks the color. Saturation controls how vivid or gray. Lightness controls how bright or dark.
Tint, Shade & Tone
Three variations: lighter (+white), darker (+black), muted (+gray). Click any box to use it as your new color.
Your Palette
Build up to 5 colors. + adds, ↑ imports, ↓ exports, 💾 saves to collection, 🗑 clears. Click a swatch to select it. Drag to reorder.
70/30 Preview
Previews how a new color (30%) pairs with your first saved color (70%). Useful for testing accents.
Value Check
Toggle grayscale to see if your palette has real light/dark contrast. Same gray = flat palette.
Color Proportion
Adjust how much of each color you use. Sliders total 100%. Same palette, completely different feel.
Palettes
Saved Palettes
Long-term storage. Rename, reorder (▲▼), load (↙), export (↓), delete (✕), or import (↑) palettes. Everything saves in your browser.
More
Simultaneous Contrast
Two identical colors look different depending on their background. Slide the controls to see it in action.
Contrast Checker
Pick two colors and check if they're readable together. Shows pass/fail for WCAG AA and AAA.
Warm & Cool / Psychology
Warm colors feel close and energetic. Cool colors feel distant and calm. The chips show common associations - starting points, not rules.
General
Theme Toggle
The switch next to the title flips between dark and light mode.
Title Animation
The "Color Lab" letters cycle through your saved palette colors.