About the Color Picker
A color picker helps you choose, compare, and convert colors across the formats web and design tools use most: hexadecimal (#d97706), RGB (rgb(217, 119, 6)), and HSL (hsl(33, 95%, 44%)). Use it while building a brand palette, fine-tuning UI components, or matching a color between Figma, CSS, and Tailwind.
Beyond color conversion, the built-in contrast checker reports the WCAG 2.1 luminance ratio between any two colors so you can confirm your foreground and background pass accessibility requirements before shipping.
How it works
Pick a base color and the tool computes its HEX, RGB, and HSL representations instantly. The palette generator derives complementary, analogous, and shade variations by rotating the hue and adjusting lightness in HSL space — a perceptually friendlier model than raw RGB.
The contrast checker uses the WCAG relative-luminance formula. A ratio of 4.5:1 or higher passes the AA standard for normal body text; 3:1 passes AA for large text (18pt+ or 14pt+ bold); 7:1 is required for AAA on normal text.
Frequently asked questions
- What WCAG contrast ratio do I need?
- AA-level body text needs 4.5:1. Large text (18pt+, or 14pt+ bold) needs 3:1. Aim for AAA (7:1) where you can — small touchpoints like helper text and form labels benefit the most.
- Why does the same color look different on my phone and laptop?
- Devices have different gamut, brightness, and color-temperature calibration. The HEX/RGB value is identical, but rendering varies. Test critical colors on the device class your audience actually uses.
- What's the difference between HSL and HSB?
- Both describe colors via hue, but HSL uses lightness and HSB uses brightness. They diverge at high saturation: HSL 100% lightness is always white, while HSB 100% brightness is the pure color. CSS supports HSL; design tools like Figma and Photoshop often use HSB.
- Can I generate a full brand palette here?
- Yes. Pick a base color and the palette generator produces tints, shades, and harmony variations. Export the HEX values directly into Tailwind config, CSS custom properties, or your design tokens file.
- Does the tool support OKLCH or P3?
- Currently it focuses on sRGB-space formats (HEX, RGB, HSL). OKLCH and Display P3 support is on the roadmap as browser adoption matures.