Color Tools
Convert, name, mix and test colors — with modern OKLCH and APCA support built in.
HEX to RGBA ConverterPaste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( /…CSS Variables to TailwindTurn your :root colour variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4…OKLCH Color ConverterExplore the perceptually uniform OKLCH colour space with live sliders, see whether a colour fits in sRGB,…Color Name FinderPaste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS,…Color MixerPick two colours and a number of steps to get evenly blended transition colours — perfect for gradients,…Tailwind Color GeneratorPaste one brand colour and get a balanced 11-step shade scale (50 to 950) built in OKLCH — with contrast…APCA Contrast CheckerCalculate the APCA lightness contrast (Lc) between text and background, see which uses it’s suitable for,…Color Blindness SimulatorUpload a screenshot or design and see it through eight types of colour vision deficiency side by side — or…Color ConverterPaste any CSS colour — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other…Contrast CheckerEnter a text and background colour to get the exact WCAG contrast ratio, pass/fail for every level, an…