Colour Converter & Contrast Checker

Q: Why does it tell me to use black text on colours that look dark to me?

Because perceived brightness and measured luminance are not the same thing, and the eye is easily misled. Tailwind's blue-500, a colour most people would instinctively put white text on, actually gives 5.7:1 with black text and only 3.7:1 with white — black is the better choice by a wide margin. This happens because the green channel contributes far more to luminance than red or blue, so a saturated blue is much darker by measurement than it looks. The figures here come from the WCAG formula rather than intuition.

Q: Will one of black or white always be readable on any colour?

Yes, for solid colours, and it is a genuinely useful thing to know. As a colour gets lighter, contrast against white falls while contrast against black rises. The two cross around a mid grey, and even at that worst point the better of the pair still reaches about 4.6:1 — just above the 4.5 needed for body text. So there is no solid colour on which both black and white fail. What does fail in the middle range is AAA at 7:1, which is why the tool reports that separately.

Q: What is the difference between HSL and HSV?

Both describe a colour by hue, then by how saturated and how bright it is, but they define the last two differently. In HSL, lightness runs from black at 0 through the pure hue at 50 to white at 100. In HSV, value runs from black at 0 to the pure hue at 100 and never reaches white — you get white by dropping saturation instead. HSL is the one CSS uses and is more intuitive for picking tints and shades; HSV is what most colour pickers use internally because it maps neatly onto a square gradient plus a hue slider.

Q: How accurate is the CMYK conversion?

It is the standard arithmetic conversion, and it is fine for a rough idea, but it is not colour-managed. Real CMYK output depends on the specific inks, paper and press profile being used, and printers apply an ICC profile to make that translation properly. The numbers here will get you in the right neighbourhood for a mock-up, but do not send them to a printer as a specification — ask them for the profile they use and convert against it.

Q: Why do the HSL numbers not convert back to exactly the same hex?

Because the displayed HSL values are rounded to whole numbers so they are readable, and that rounding loses a little precision. Converting hex to HSL and back can land you a shade or two away from where you started. The hex and RGB values are exact — they map one to one — so use those when the precise colour matters and treat the HSL and HSV figures as a readable approximation for working with rather than a lossless representation.

Q: What formats can I paste in?

Almost anything you are likely to have on your clipboard. Hex with or without the leading hash, in three, four, six or eight digits. Both the legacy comma form of rgb() and hsl() and the modern space-separated syntax with a slash before the alpha. Percentages or 0-255 for channels. And all 148 CSS colour names, so pasting rebeccapurple works. If a format is not recognised the error names what it could not read rather than silently showing black.

Convert between HEX, RGB, HSL, HSV and CMYK, and see immediately whether black or white text is readable on the result.

Colour

Preview

Black text on this White text on this

Every format

Conversion and contrast measurement both happen in your browser. Nothing you enter is uploaded.

What It Does

Paste a colour in whatever form you have it — a hex code, an rgb() string from a design tool, an hsl() value from a stylesheet, or a CSS name — and get every other representation back, along with a live preview. The part that earns the page is what comes after the conversion. Every colour is measured against black and white text using the WCAG contrast formula, so you find out immediately whether the shade you have chosen can actually carry readable text, and which of the two to use. That answer is frequently not the one intuition gives: colours that look dark often take black text better than white, because the green channel dominates measured luminance in a way the eye does not report. Everything runs in your browser, so a palette in progress stays on your machine.

When to Use It

A designer handed you hex codes and your stylesheet is written in HSL, so you need the equivalents without opening a design tool.
You are choosing a button colour and need to know whether the label should be black or white before committing to it.
An accessibility audit flagged a component and you want the actual contrast ratio rather than a pass or fail.
You are building a palette and want to see how a hue behaves across saturation and lightness in a form you can paste into CSS.
A brand guide gives CMYK values and you need something approximate to work with on screen.

Worked Examples

#3b82f6

The counter-intuitive case, and the reason the contrast panel exists. This blue reads as dark, but black text gives 5.7:1 on it against white's 3.7:1 — so the instinctive choice of white text is the worse one.

rebeccapurple

A CSS colour name, which converts to #663399. Dark enough that white text is clearly correct here, and the panel confirms it comfortably clears the AA threshold for body text.

hsl(45 100% 51%)

A saturated yellow written in the modern space-separated syntax. Very high measured luminance, so black text is the only workable choice — white on yellow fails badly despite being a common design instinct.

Features

HEX

RGB

HSL

HSV and CMYK conversion in one place

Accepts hex

rgb()

hsl()

CSS names and modern slash-alpha syntax

WCAG contrast ratios against both black and white

Clear AA and AAA verdicts for body and large text

Recommendation of which text colour to use

Live preview with sample text

Native colour picker for choosing visually

Three-digit shorthand detected where possible

Nearest CSS colour name identified

Runs entirely in your browser

How to Use

1. Paste or type a colour in any supported format, or use the picker to choose one visually. 2. Every other representation appears immediately, each with its own copy button. 3. The preview shows the colour with both black and white sample text on it. 4. Read the contrast panel for the ratio against each and the recommended choice. 5. Click any copy button to take that format.

Common Mistakes

Choosing text colour by eye. Perceived brightness and measured luminance diverge sharply for saturated colours, and blues in particular take black text far better than they look like they should.
Treating a 3:1 ratio as good enough for body text. That threshold is for large text only — 18pt and above, or 14pt bold. Ordinary paragraph text needs 4.5:1.
Converting HSL back and forth and expecting the hex to survive. The displayed HSL values are rounded for readability, so a round trip can drift by a shade.
Sending arithmetic CMYK values to a printer. Real print conversion needs the press's ICC profile; these numbers are for on-screen approximation only.
Forgetting that a translucent colour's contrast depends on what is behind it. An rgba value over a patterned or coloured background can be far less readable than the figures for a flat backdrop suggest.

Frequently Asked Questions

Why does it tell me to use black text on colours that look dark to me?

Will one of black or white always be readable on any colour?

What is the difference between HSL and HSV?

How accurate is the CMYK conversion?

Why do the HSL numbers not convert back to exactly the same hex?

What formats can I paste in?

Related Tools

Case Converter