Color Tools
Converters, palettes, contrast, gradients.
6 tools · all run in your browser
Convert between HEX, RGB, HSL, HSB/HSV, OKLCH, and CSS named colors; check contrast ratios for WCAG accessibility compliance; generate harmonious palettes (complementary, triadic, analogous, split-complementary) from any base color; build CSS gradient code with a visual editor. Every tool gives you a one-click copy of the value in whichever format your codebase uses.
The most practically important tool here is the Contrast Checker. WCAG 2.1 requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold) to meet AA compliance — and 7:1 / 4.5:1 for AAA. Fail that ratio and your text is genuinely difficult to read for the roughly 8% of users with color vision deficiency. The checker shows pass/fail for both thresholds at once.
OKLCH is worth learning if you work with modern CSS. Unlike HSL, OKLCH is perceptually uniform — equal steps in lightness actually look equal to the eye, which makes it much more predictable for building design token scales and accessible color ramps.
All color tools
- Color Blindness SimulatorSimulate how your colors look to people with color vision deficiency (CVD). Covers all 8 common types — deuteranomaly, protanopia, tritanopia, achromatopsia, and more.
- Color ConverterPaste any color in hex, rgb(), rgba(), or hsl() and get it in every other format instantly. Includes a live swatch and a native color picker.
- Color Harmony GeneratorGenerate a palette from any base color using 7 classic color-theory schemes: complementary, analogous, triadic, tetradic, split-complementary, square, and monochromatic.
- Contrast CheckerTest any foreground/background color pair against WCAG 2.2 contrast rules. Shows the ratio, live preview, and pass/fail for normal text, large text, and UI components.
- CSS Color NamesBrowse all 147 CSS3 named colors. Look up a color name from a hex code, or find the closest named color to your custom hex.
- CSS Gradient GeneratorDesign linear, radial, and conic CSS gradients with unlimited color stops. Live preview and copy the CSS. Share via URL.
Frequently asked
They represent the same thing in different notations. RGB(255, 99, 71) and #FF6347 (tomato red) are identical — HEX is just base-16 RGB packed into a six-character string. CSS accepts both.
HSL (Hue, Saturation, Lightness) is what CSS uses. HSB/HSV (Hue, Saturation, Brightness/Value) is what Photoshop, Figma, and most design tools use. A Saturation=100% Lightness=50% HSL color is the same as Saturation=100% Brightness=100% HSB. Our converter handles both.
WCAG 2.1 AA (the legal baseline in most countries): 4.5:1 for body text, 3:1 for large text (18pt+ or bold 14pt+). AAA (stricter): 7:1 for body, 4.5:1 for large text. Our Contrast Checker shows the ratio and pass/fail for both levels simultaneously.
Colors directly opposite on the color wheel — e.g., blue and orange, red and green. They create strong contrast and vibrate against each other at full saturation. Our Palette Generator shows complementary, analogous (neighbors), triadic (120° apart), and split-complementary schemes.
OKLCH is a perceptually uniform color space — equal numerical steps produce equal perceived brightness changes. Unlike HSL, you can build a 10-step lightness scale in OKLCH and each step looks the same size. Modern CSS supports it natively and it produces better accessible color ramps than HSL.