What the color space explorer does
Pick a color and see it instantly in HEX, RGB, and HSL, check the WCAG contrast ratio against a background, and generate CSS gradients. It's a one-stop tool for choosing colors that are both on-brand and accessible.
How color models work
The same color can be described several ways. RGB mixes red, green, and
blue light (additive) and is how screens work. HEX is just RGB written in
base-16 (#4f46e5). HSL — hue, saturation, lightness — is the
most human-friendly: spin the hue to change the color, drop the lightness to darken it,
which makes building consistent palettes far easier than nudging RGB channels.
Why it matters
Color choices are an accessibility decision, not just an aesthetic one. Text that fails WCAG contrast is unreadable for many users (and flagged by audits). Checking the ratio as you pick — aiming for at least 4.5:1 for body text — bakes accessibility in from the start.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1. The tool flags which level a pairing passes.
RGB vs HSL — when do I use each?
RGB/HEX for specifying exact colors (design tokens, brand values); HSL for manipulating them — generating tints, shades, and hover states by adjusting one channel.
What does the hex color code mean?
#RRGGBB — two hex digits each for red, green, and blue, from 00 to ff (0–255). #000000 is black, #ffffff is white.