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
How to Use the Color Lab
1. Title
The "Color Lab" title in the top left cycles its letter colors through your saved palette every 1.5 seconds โ a live preview of your palette in action.
2. Color Wheel
Click anywhere on the wheel to pick a base hue. The closer to the edge, the higher the saturation. The wheel dynamically reflects your current saturation and lightness settings โ as you adjust those sliders, the wheel itself shifts to show you the full hue spectrum at your chosen intensity and brightness.
3. Harmony / Palette Wheel Toggle
The toggle below the wheel switches between two modes. Harmony mode shows geometric shapes (lines, triangles, rectangles) for the selected harmony type. Palette mode redraws the wheel with a lightness gradient (white center, black edges) and plots your saved palette colors as numbered dots โ positioned by hue (angle) and lightness (distance from center) โ so you can see their relationships at a glance.
4. Harmony Explorer
Select a harmony type to see how related colors are distributed on the wheel. Unselected modes show as compact two-letter abbreviations; the active mode expands to show its full name with a smooth transition. Click any swatch in the harmony palette row to make it the new base color.
5. Primary Color, Copy & Random
The large color box shows your current primary color with its hex code. Click the hex value to type or paste any hex code directly. The โ button copies the current hex to your clipboard. The โณ button randomizes the color.
6. Hue, Saturation & Lightness Sliders
Hue rotates through the color spectrum (0ยฐโ360ยฐ). Saturation controls vividness โ 0% is gray, 100% is fully vivid. Lightness controls brightness โ 0% is black, 100% is white, 50% is the pure color.
7. Tint, Shade & Tone
Tint = hue + white. Shade = hue + black. Tone = hue + gray. Click any of these color boxes to apply that variation as your new primary color โ a quick way to step lighter, darker, or more muted.
8. Your Palette (max 5 colors)
Build your working palette one color at a time. The icon buttons:
- + โ Adds the current primary color. The button fills with the color so you can see what you're adding.
- โ Import โ Reads a hex array from your clipboard (e.g.
["#780000","#c1121f","#fdf0d5"]) - โ Export โ Copies your palette to clipboard in the same array format
- ๐พ Save โ Saves the palette to your Palettes collection for long-term storage
- ๐ Clear โ Removes all colors from the working palette
Click a saved swatch to set it as the primary color in the Harmony Explorer. Hover and click ร to remove it. Drag swatches to reorder them. The palette persists across browser sessions.
9. 70/30 Preview
The color block next to your palette shows a 70/30 proportion split. The top 70% is your first saved color (your dominant). The bottom 30% is whatever primary color you're currently exploring โ a quick way to preview how a candidate accent pairs with your main color.
10. Value Check
Shows your saved palette in full color or desaturated grayscale. Toggle the switch to strip away hue and see the raw lightness values. If your colors all collapse into the same gray band, your palette lacks tonal contrast.
11. Color Proportion
Uses your saved palette and lets you adjust the ratio of each color with sliders. Percentages update live and always total 100%. When you expand a color, only the colors to its right shrink โ and they maintain their ratio relative to each other. Colors to the left stay untouched. Text color on each bar adapts for readability.
12. Palettes Tab
Your long-term palette collection. Each saved palette can be renamed (click the name), reordered (โฒโผ), loaded back into your working slots (โ), exported to clipboard (โ), or deleted (โ). Use the โ button in the header to import a hex array directly as a new saved palette. Everything persists in your browser.
13. Simultaneous Contrast
Two inner squares with the exact same hex value look different because their backgrounds shift your perception. Adjust the sliders to see the effect with different hue combinations.
14. Contrast Checker
Tests the WCAG accessibility contrast ratio between any two colors. Pick a text color and a background color to see if the combination passes AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1) standards.
15. Warm & Cool / Color Psychology
Warm colors (red, orange, yellow) advance toward the viewer and feel energetic. Cool colors (blue, green, purple) recede and feel calm. The psychology section shows common emotional associations โ use them as starting points, not rules.