Color Lab: Color palette generator and contrast checker
NewBuild a palette from one color, test contrast against WCAG, and export ready-to-use design tokens.
- RGB
- rgb(13 148 136)
- HSL
- hsl(175 84% 32%)
Harmony
#0d9444#0d9488#0d5d94Tint and shade scale
#dafcf9#c2faf5#92f5ed#55f0e2#14e3d0#0d9488#0b7a70#085e56#06443e#042a27Contrast checker
WCAG 2.1 asks for a ratio of at least 4.5 for body text and 3 for large text. AAA raises those to 7 and 4.5.
Large heading sample
Body copy sample — the size most of your users will actually read, so it carries the stricter requirement.
Export
Take the palette straight into your codebase as custom properties, a Tailwind config, plain JSON, or an SVG sheet.
:root {
--brand-1: #0d9444;
--brand-2: #0d9488;
--brand-3: #0d5d94;
}From one color to a usable system
Palette building and accessibility checking in one place, so a color that looks good also passes the contrast requirement before it reaches production.
Six harmony rules
Complementary, analogous, triadic, split complementary, tetradic, and monochrome sets built from your base hue.
10-step scale
A 50–900 tint and shade ramp that keeps your base color at 500 and stays monotonic for light and dark inputs.
WCAG AA and AAA
Live contrast ratio with separate verdicts for body text and large text, using the WCAG 2.1 luminance formula.
Live sample
See a heading and a paragraph in your chosen colors instead of judging a number in isolation.
Copy any swatch
Every swatch copies its own hex value, and each swatch label shows the scale step it belongs to.
Four export formats
CSS custom properties, a Tailwind color config, JSON tokens, or an SVG sheet for a handoff document.
Questions about color and contrast
What contrast ratio do I need?
WCAG 2.1 level AA requires 4.5:1 for body text and 3:1 for text at 18pt, or 14pt bold. Level AAA raises the bar to 7:1 and 4.5:1. This checker reports both verdicts at once.
Is Color Lab free, and does it work offline?
Yes. Color Lab is free, with no account, no sign-up, and no usage limit. It runs entirely in your browser, so once you have opened the page while online, it keeps working without a connection.
Does a passing ratio mean my design is accessible?
It means the text contrast requirement is met. Accessibility also depends on font size, focus states, motion, and not using color as the only way to convey meaning.
How is the tint and shade scale built?
Your base color keeps its hue and saturation while lightness is interpolated toward 96% for the light steps and toward 4% for the dark steps. The base sits at step 500, and the ends widen automatically for a near-white or near-black base so the ramp never reverses.
Can I use the exported palette in a commercial project?
Yes. Color values are not copyrightable and the export is yours to use. Only your brand's specific logo and marks carry their own restrictions.
Why does my brand color fail on white?
Mid-lightness saturated colors — most teals, greens, and oranges — usually land between 3:1 and 4.5:1 on white. Use a darker step from the scale for text and keep the brighter step for large shapes and fills.
Where to go next
The Labs people most often reach for straight after this one.