CSS & Tailwind Colour Converter
Convert any colour between hex, RGB, HSL, and OKLCH formats. Find the nearest Tailwind CSS class and check WCAG contrast ratios for accessibility compliance.
What is a Colour / Color Converter?
A colour converter translates a colour value between the different formats used in web development: Hex (used in HTML and CSS), RGB (red, green, blue - CSS and canvas), HSL (hue, saturation, lightness - easier for humans to reason about), and OKLCH (the modern perceptually uniform colour space used in Tailwind CSS v4 and CSS Color Level 4). Enter any format and all others are calculated instantly. The tool also finds the nearest Tailwind CSS v4 colour class and calculates the WCAG accessibility contrast ratio against black and white text.
Why colour spaces matter for design
Different colour spaces have different strengths. Hex is compact and universal but opaque - it's hard to tell at a glance whether #3B82F6 is light or dark. HSL separates hue (the colour wheel position, 0–360°), saturation (intensity), and lightness (0%=black, 100%=white) - making it easy to create colour variations by adjusting a single axis. OKLCH goes further: it's perceptually uniform, meaning equal changes in L (lightness) or C (chroma) produce equal-feeling visual changes across all hues, avoiding the muddy transitions that HSL produces for some colour ranges. Tailwind CSS v4 switched its entire palette to OKLCH.
Frequently Asked Questions
What is OKLCH and why is Tailwind CSS using it?
OKLCH is a perceptually uniform polar colour space (Lightness, Chroma, Hue) based on the OKLAB model by Björn Ottosson. "Perceptually uniform" means that a 10-unit change in lightness looks the same to the human eye regardless of the hue - unlike HSL, where yellow and blue at the same saturation level look very different in perceived brightness. Tailwind CSS v4 adopted OKLCH to enable better colour palette generation and smoother gradients. Modern browsers support OKLCH natively via color: oklch(0.6 0.15 230).
What do WCAG AA and AAA contrast ratios mean?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for people with low vision. AA (the legal minimum in many jurisdictions) requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. Failing AA means your text is inaccessible to an estimated 8% of users with colour vision deficiencies or low contrast sensitivity.
How do I find the Tailwind class for a hex colour from a Figma design?
Paste the hex value from Figma into this tool. It searches the full Tailwind v4 palette and returns the closest matching class(es) with a colour swatch. Tailwind colours use a 50–950 scale per hue (e.g., blue-100 through blue-950). If the match distance is large, the design uses a custom colour - add it to your tailwind.config.js under theme.extend.colors.
What is the difference between RGB and HEX?
They represent exactly the same colour space - three channels (red, green, blue) each 0–255. Hex is just base-16 encoding of those three bytes: rgb(59, 130, 246) = #3B82F6 (59=0x3B, 130=0x82, 246=0xF6). CSS accepts both formats interchangeably. Hex is more compact in stylesheets; rgb() is easier to manipulate programmatically and supports an optional alpha channel via rgba() or the modern rgb(59 130 246 / 50%) syntax.