Color tools
Color Converter
Convert between HEX, RGB, and HSL.
Image Color Picker
Click a pixel in a photo to get its hex/RGB value.
Contrast Checker
Check WCAG text contrast ratios.
Gradient Generator
Build a CSS gradient visually.
Common uses
- Converting a HEX color from a design tool into RGB or HSL for code
- Checking whether a text color passes WCAG AA or AAA contrast requirements
- Building a linear or radial CSS gradient visually before copying the code
How to choose
Reach for the Color Converter when you have a color in one format and need it in another — a designer hands you a HEX swatch and your CSS variable file uses HSL, for instance. Use the Contrast Checker before shipping any text/background combination, not after; it's much cheaper to swap a color early than to discover an accessibility complaint post-launch. The Gradient Generator is for the opposite direction — starting from two or more colors and working out the CSS rather than starting from existing code. If you're doing a full design system audit, run every text/background pairing through the Contrast Checker rather than eyeballing it — colors that look "obviously readable" on a bright monitor sometimes fail the 4.5:1 threshold by a surprising margin.
Frequently asked questions
Using the WCAG relative luminance formula on both colors, producing a ratio between 1:1 and 21:1 — the same method browsers and accessibility auditing tools use.
At least 4.5:1 for normal text, or 3:1 for large text (18pt+, or 14pt+ bold).
Yes — the Gradient Generator outputs ready-to-paste CSS background syntax.