Explore relationships
Generate tonal scales and complementary, analogous, triadic, split-complementary, or tetradic harmonies from any color.
COLOR WORKSPACE 01 / 03
Work with color.
Think more clearly.
Explore color ranges, build harmonies and gradients, check contrast, and copy exact values or export design tokens.
Precise values
Ready-to-use CSS
Fast exploration
THE TOOLKIT
Three tools. One clear workflow.
Explore, validate, and export colors in one workspace.
01
Color Explorer
Explore a color range and build a tonal scale from any base color.
Open explorer ↗02
Gradient Generator
Adjust the angle, colors, and stops, then copy the CSS behind the preview.
Build a gradient ↗03
Palette Library
Browse the color library. Select a swatch to inspect or copy its values.
Browse the library ↗BEYOND THE BASICS
Make better color decisions.
Explore color relationships, check contrast, and export ready-to-use values.
Check accessibility
Compare foreground and background colors against WCAG contrast thresholds before using them in a real interface.
Export with confidence
Copy color formats and CSS, or export color ranges and filtered palette results as reusable files.
A workspace built for real design decisions.
Explore relationships, check contrast, and turn color ideas into usable values.
COLOR TOOLS 01
Color Explorer
Find a color, inspect its values, and build a shade scale you can use.
RANGE EXPLORATION01/03
Color range
Choose a family, then select any swatch.
Exploration detailGenerate larger batches when you need finer choices.
Building color range…
COLOR RELATIONSHIPS
H1Build a harmony
Use color theory to explore combinations around the current color.
Two colors with opposite hues create a strong, high-contrast relationship.
ACCESSIBILITY CHECK
WCAGContrast checker
Test a foreground against a background before it becomes interface text.
Readable by design.The quick brown fox jumps over the lazy dog.Sample interface text
CONTRAST RATIO4.20:1
AA normal textNeeds work
AA large textPass
AAA normal textNeeds work
AAA large textNeeds work
WCAG thresholds: 4.5:1 for normal text, 3:1 for large text, 7:1 for enhanced normal text.
YOUR WORKING SET
Recent and saved colors
Keep useful colors close by. Favorites are remembered in this browser when storage is available.
Recent
0 colorsFavorites
0 colors COLOR TOOLS 02
Gradient Generator
Build a smooth or sharply stepped gradient with precise color stops and ready-to-paste CSS.
GRADIENT LAB02/03
Preview
Your preview and CSS use the same values.
Gradient type
Shape
Origin
2 color stops Live preview
Color stops
Drag a marker along the track, or edit its exact position below.
0° · Up180° · Down360° · Up
Starting points
Select to replace current gradient COLOR TOOLS 03
Palette Library
Search 736 recovered color entries across 21 collections and 35 palette groups. Inspect exact values, save colors, and export what you need.
CURATED COLOR INDEX03/03
WRONG TURN
Color tool not found.
The page may have moved, or the address may be incomplete. Return to the overview or jump directly into a tool.