Convert colors between every format, build palettes, and check contrast against the WCAG thresholds — with the measured ratio shown for every pairing.
Browse Design & Color
- Color ToolsEvery color tool in one place: converters for every format from hex to OKLCH, palette generators, contrast and color-blindness checkers, and modern CSS color utilities.73 tools
- Color ConvertersConvert colors between every common format — HEX, RGB, RGBA, HSL, HSV, HWB, CMYK, CIELAB, LCH, OKLab, OKLCH and XYZ — with the exact conversion pipeline CSS Color Level 4 defines.26 tools
- Color Palette ToolsGenerate, extract and refine color palettes: harmony schemes, brand and website systems, accessible and color-blind-safe sets, pastels, Material-style tonal ramps and palettes pulled from images — all computed in perceptual OKLCH and exported as CSS, SCSS, JSON or design tokens.18 tools
- Accessibility Color ToolsCheck and fix color contrast against WCAG 2.10 tools
- Design Token ToolsBuild design tokens and modern OKLCH color systems — exported as CSS variables, SCSS, Tailwind themes, JSON and DTCG formats.15 tools
Good places to start
- HEX to RGB ConverterConvert a hex color code to RGB instantly.
- WCAG Contrast CheckerCheck any text/background color pair against WCAG 2.1 — exact contrast ratio, AA and AAA verdicts for normal and large text, plus a same-hue fix suggestion when it fails.
- Color Palette GeneratorGenerate complete color palettes in one click — random, warm, cool, earthy, vibrant or pastel.
- Online Color PickerPick any color visually and get its value in every format at once — HEX, RGB, HSL, HWB, HSV, CMYK, LAB, LCH, OKLab, OKLCH and XYZ.
Frequently asked questions
Which colour formats are supported?
HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLAB and OKLCH, plus named CSS colours, in both directions. Conversions follow the CSS Color 4 specification rather than the approximate formulas that circulate online, which is why round trips come back where they started.
How is the contrast ratio calculated?
By the WCAG 2.1 formula: relative luminance of each colour, then (lighter + 0.05) / (darker + 0.05). The result runs from 1:1 for identical colours to 21:1 for black on white. The implementation is checked against independently computed reference values.
What do AA and AAA actually require?
For normal text, AA needs 4.5:1 and AAA needs 7:1. Large text — 18.66px bold or 24px regular and above — needs 3:1 for AA and 4.5:1 for AAA. User interface components and graphical objects need 3:1. The tools report each threshold separately rather than a single pass or fail.
What is OKLCH and why would I use it instead of HSL?
OKLCH is a perceptually uniform colour space, so equal changes in its lightness value look equally different to the eye. In HSL they do not: yellow at 50% lightness looks far brighter than blue at 50%. That is why HSL palettes tend to come out uneven and OKLCH ones do not.
Are the conversions lossless?
Between formats describing the same space they are exact within rounding. Between different gamuts they cannot be: CMYK and sRGB cannot represent all the same colours, and neither can sRGB and P3. Where a colour falls outside the target gamut it is clamped, and the tools say so.
Are the Tailwind colour values the real ones?
Yes. They are extracted from the official Tailwind CSS packages rather than sampled from screenshots or retyped, and both the v3 hex palette and the v4 OKLCH rebuild are kept, because the two genuinely differ rather than being the same colours written differently.
Can I check contrast for a whole palette at once?
Yes. The accessibility tools take a palette and report every foreground and background pairing against the WCAG thresholds, which is the point at which most palettes turn out to have two or three combinations that no one should ship.
