What is the difference between WCAG contrast and APCA?

WCAG 2.1 gives a ratio from 1:1 to 21:1 with fixed thresholds (4.5:1 for AA text). APCA is the newer perceptual model used by WCAG 3 drafts; it reports Lc from about −108 to 106 where |Lc| ≥ 60 is readable body text and the sign shows polarity.

How is the Tailwind scale generated?

The seed colour is converted to OKLCH, snapped into the closest of the 11 steps, and the other steps keep its hue with lightness targets that mirror Tailwind v4 palettes and chroma eased toward the ends. Every step is gamut-mapped to sRGB.

Does it support alpha?

Yes. Alpha is preserved in every output; contrast checks composite the foreground over the background first, as browsers do.

Color Converter

Paste any colour — hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …) or one of the 148 CSS names — and get every other format with one-click copy, plus Tailwind, CSS-variable, Swift and Android snippets. Check WCAG 2.1 and APCA contrast against any background with nearest-passing suggestions, build tints, shades, tones and Tailwind 50→950 scales (exported as config, CSS vars or oklch()), and convert whole lists in batch with CSV export. Includes RGB/alpha sliders, the native picker, an EyeDropper on supported browsers, recent-colour history and shareable links.

Runs locally in your browser

Color

Preview

#6366f1≈ mediumslateblue

on white

4.47:1 · AA Large

on black

4.70:1 · AA

Snippets

Luminance

0.1851

OKLCH lightness

58.5%

Hue

239°

Alpha

Named

≈ mediumslateblue

Perceived

light

HEX to RGB

Convert HEX colour codes to RGB and back with sliders, a picker and Tailwind snippets.

Color Palette Generator

Build accessible palettes from a seed colour or an image, with Tailwind and token exports.

CSS Gradient Generator

Design linear, radial and conic gradients with draggable stops, layers and Tailwind, CSS or SVG output.

Box Shadow Generator

Design box-shadow, text-shadow and drop-shadow() with layers, presets and a light/dark preview.

How to use Color Converter

1Type or paste a colour in any CSS syntax, pick one, or use the eyedropper.
2Copy the format you need from the list, or open the sliders to tweak channels and alpha.
3Switch to Contrast to test it against a background and pick a passing suggestion.
4Use Ramps for tints, shades and a Tailwind 50→950 scale, or Batch to convert a whole list.

About Color Converter

Color Converter is part of FizzKit — a collection of focused developer and ad-tech tools. Because everything runs locally, it works offline once loaded and never exposes your data to a remote server.

Frequently asked questions

Input and output cover hex (3/4/6/8 digits), rgb()/rgba() in legacy and modern syntax, hsl(), hwb(), hsv, cmyk, lab(), lch(), oklab(), oklch(), color(display-p3 …) and all 148 CSS named colours. Out-of-gamut colours are clipped to sRGB and flagged.

Related tools