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, #1d87f1, rgb(29,135,241) or hsl(210,88%,53%), and read it in every format at once.
- HEX to RGB Converter A HEX code is RGB in base-16: #1d87f1 converts to rgb(29, 135, 241), paste any code and read the channels.
- RGB to HEX Converter rgb(29, 135, 241) converts to #1d87f1, each 0-255 channel written as a two-digit base-16 pair.
- Color Contrast Checker WCAG requires 4.5:1 contrast for normal text (AA), pick your text and background colors and get the exact ratio with pass/fail per level.
- 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, linear-gradient() or radial-gradient() ready to paste.
- Color Mixer Mix two colors at any ratio, 50/50 or anywhere between, and read the resulting HEX instantly.
- Brand Color Finder Need Netflix red or Spotify green? Search 1,100+ brand palettes by name, or reverse-search by hex to see which brands use a color, and click any swatch to copy it.
- OKLCH Color Picker & Converter Pick or paste a color and read it in OKLCH, OKLAB, LAB, LCH, HWB, HEX and RGB at once, with a safe HEX fallback and a warning when a color falls outside the sRGB gamut.
- HEX to OKLCH Converter Turn a HEX code into an oklch() value, the perceptually uniform CSS Color 4 format, with OKLAB and LAB shown too.
- OKLCH to HEX Converter Convert an oklch() value to a safe HEX and RGB fallback, with a clear flag when the color is too vivid for the sRGB screen.
- RGB to OKLCH Converter Convert rgb() values into oklch(), the perceptually uniform format, with OKLAB, LAB and HEX shown alongside.
- Accessible Color Generator (WCAG Fixer) Give a foreground and background color and a WCAG target, and get the nearest passing color, same hue, adjusted lightness, that meets the contrast ratio.
- 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, every color against every other, with AA and AAA pass badges.
- Color Blindness Simulator See how an uploaded image or a pasted palette appears to people with color-vision deficiency, the four main types, with an adjustable severity, all processed on your device.
- Deuteranopia Simulator See how an image or palette looks with deuteranopia, the most common red-green color-vision deficiency, processed entirely on your device.
- Protanopia Simulator See how an image or palette looks with protanopia, a red-weak color-vision deficiency, all processed on your device.
- Tritanopia Simulator See how an image or palette looks with tritanopia, a rare blue-yellow color-vision deficiency, processed entirely on your device.
- Color Harmony Generator Enter a base color and get every classic harmony, complementary, triadic, analogous, split-complementary, tetradic and monochromatic, as exact swatches with copyable HEX, HSL and OKLCH codes.
- Complementary Color Finder Enter a color and get its exact complementary, the hue directly opposite on the wheel, plus nearby split-complementary options.
- Triadic Color Scheme Generator Enter a base color and get its triadic scheme, three vibrant, evenly balanced hues 120° apart, with copyable codes.
- Analogous Color Scheme Generator Enter a base color and get its analogous scheme, neighbouring hues about 30° apart, for a calm, cohesive palette.
- 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, all processed on your device.
- Color Name Finder Enter a color and get its nearest CSS color name, measured by CIEDE2000 perceptual distance, plus the next closest matches.
- Tailwind Color Scale Generator (OKLCH) Turn one base color into a full 50-950 shade scale with an even, perceptual OKLCH lightness ramp, copy it straight into Tailwind 4 @theme or a JS config.
- 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, how different they look, with the CIEDE2000 and CIE76 values and a plain-English verdict.
- 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.