Color Tools
Convert between formats, check WCAG contrast, build ramps and gradients — with exact formulas and copy-ready CSS. Everything computes in your browser, instantly.
- Color Converter Paste a color in any format
- HEX to RGB Converter A HEX code is RGB in base-16: #1d87f1 converts to rgb(29, 135, 241)
- RGB to HEX Converter rgb(29, 135, 241) converts to #1d87f1
- Color Contrast Checker WCAG requires 4.5:1 contrast for normal text (AA)
- Shades & Tints Generator One base color becomes a full palette: 9 tints toward white and 9 shades toward black, each with its HEX code.
- CSS Gradient Generator Pick two colors and an angle, watch the live preview, copy the CSS
- Color Mixer Mix two colors at any ratio
- Brand Color Finder Need Netflix red or Spotify green? Search 1,100+ brand palettes by name
- OKLCH Color Picker & Converter Pick or paste a color and read it in OKLCH, OKLAB, LAB, LCH, HWB, HEX and RGB at once
- HEX to OKLCH Converter Turn a HEX code into an oklch() value
- OKLCH to HEX Converter Convert an oklch() value to a safe HEX and RGB fallback
- RGB to OKLCH Converter Convert rgb() values into oklch()
- Accessible Color Generator (WCAG Fixer) Give a foreground and background color and a WCAG target, and get the nearest passing color
- APCA Contrast Checker (WCAG 3) Measure text/background contrast the WCAG 3 way: APCA reports a signed Lc value (0–±106) that accounts for polarity and maps to a minimum readable font size.
- Contrast Grid Generator Paste a palette and get an N×N grid of WCAG 2 contrast ratios
- Color Blindness Simulator See how an uploaded image or a pasted palette appears to people with color-vision deficiency
- Deuteranopia Simulator See how an image or palette looks with deuteranopia, the most common red-green color-vision deficiency
- Protanopia Simulator See how an image or palette looks with protanopia, a red-weak color-vision deficiency
- Tritanopia Simulator See how an image or palette looks with tritanopia, a rare blue-yellow color-vision deficiency
- Color Harmony Generator Enter a base color and get every classic harmony
- Complementary Color Finder Enter a color and get its exact complementary
- Triadic Color Scheme Generator Enter a base color and get its triadic scheme
- Analogous Color Scheme Generator Enter a base color and get its analogous scheme
- Image Color Picker & Palette Extractor Upload an image, click any pixel to read its exact HEX/RGB/HSL, and get the dominant 6-color palette
- Color Name Finder Enter a color and get its nearest CSS color name
- Tailwind Color Scale Generator (OKLCH) Turn one base color into a full 50–950 shade scale with an even, perceptual OKLCH lightness ramp
- HSV / HSB Color Converter Enter a HEX, RGB or named color to get its HSV (HSB) values, alongside HEX and RGB.
- Delta-E Color Difference Calculator Enter two colors to get their Delta-E
- Color Temperature (Kelvin) to RGB Drag the Kelvin slider (or pick a preset) to see the approximate on-screen colour of that light, in HEX and RGB.
Colour, done accessibly
Working with colour means juggling several models — HEX and RGB for the web, HSL for intuitive tweaks, and the newer OKLCH for perceptually even lightness. These tools convert between them precisely and build harmonious palettes, but they also take accessibility seriously: check any pair against the WCAG contrast thresholds (and the newer APCA), simulate the main types of colour-blindness, and pull a palette straight from an image.
Good contrast isn't optional — text that fails WCAG AA is genuinely hard for many people to read. Everything is computed locally, so you can drop in a screenshot of unreleased work to sample its colours without the image ever leaving your device.
Frequently asked questions
Which color format should I use in CSS?
HEX for tokens and copy-paste portability, HSL when you need to derive variants (darker hover states by lowering L), RGB when you need alpha as rgba(). All three describe the same sRGB colors — the converter moves between them losslessly.
What contrast do accessibility rules require?
WCAG AA — the level referenced by the EU Accessibility Act and most regulations — requires 4.5:1 for normal text and 3:1 for large text and UI components. The contrast checker computes the official formula and shows pass/fail per level.
Do these tools upload anything?
No — parsing, conversion and contrast math all run in your browser and work offline.