HEX, RGB and HSL Color Conversion, and Checking Contrast: Is Your Text Actually Readable?

A designer hands you a file with the blue in HEX, the UI library asks you for RGB, and in the stylesheet you need a slightly lighter shade of it. Three formats for one colour, and each time you move between them by hand or with a rough calculation. That wastes time and invites mistakes, and a converter does it in a moment and accurately.

Three formats for the same colour

• HEX: a # followed by six hexadecimal digits, like #00609b, each pair representing the amount of red, green and blue. The shorthand of three digits, like #fff, is accepted too.
• RGB: the same amounts as decimal numbers from 0 to 255, like rgb(0, 96, 155). It is closest to how a screen actually works.
• HSL: describes a colour the way we think of it: its hue on a wheel, then how pure it is, then how light. Like hsl(205, 100%, 30%).

Why HSL is useful to designers

In RGB, lightening a colour means adjusting all three numbers together in balanced proportion, otherwise it drifts to another hue. In HSL, lightening is one number: raise the lightness. That makes it easy to build shades of one colour — dark for text, mid for buttons, pale for backgrounds, all from the same hue. Sahel's colour converter shows all three formats together so you can copy whichever you need.

Contrast: what designers most often miss

Choosing a colour does not stop at how it looks. Text colour has to contrast enough with its background, or it becomes unreadable for someone with low vision, or on a phone in sunlight. To measure that there is the contrast ratio: a comparison of the brightness of the two colours, from 1:1 for identical colours up to 21:1 for black on white.

The WCAG accessibility standard sets two minimums for the commonly adopted AA level:

• 4.5 to 1 for normal text.
• 3 to 1 for large text.

The stricter AAA level has two higher thresholds: 7 to 1 for normal text and 4.5 to 1 for large. The tool computes the ratio and tells you plainly which levels pass.

Mid grey on white is the classic example: it looks acceptable to good eyesight in good light, yet fails the test, because the tool's verdict is based on a calculation, not an impression.

Why rough calculations are not enough

The simplest way to estimate a colour's brightness is to average its three amounts, but that gives wrong answers. Screens do not display numbers linearly, so each amount must be corrected with a gamma function before brightness is calculated, and the eye is also more sensitive to green than to blue. The tool applies this correction as the standard requires, so its result matches what the recognised testing tools compute.

How to use it

1. Paste the colour in any format: HEX, rgb or hsl.
2. Copy whichever of the three formats you need.
3. For contrast, add the background colour.
4. Read the ratio and its verdict for normal and large text, then adjust the colour until it passes.

A realistic scenario

A designer is preparing a company page and picks a dark blue for links on a white background. Entering the blue #00609b and white, the tool shows a ratio of about 6.7 to 1, which passes AA for normal text but falls short of the AAA threshold for normal text. They decide that is enough for body text, then try a pale grey for side notes and find it fails, so they darken it with the lightness value in HSL until it passes, without the hue changing. And if the colour is going into a QR code, the QR code generator lets you choose a colour with the same contrast in mind.

Frequently asked questions

What is the difference between #fff and #ffffff?

None. The shorthand repeats each digit twice, so #fff is exactly equal to #ffffff.

Does passing the contrast ratio mean the design is readable?

It is a floor, not a guarantee. Font size, weight and spacing all matter too. But contrast is the first thing tested and the easiest to fix.

Is the colour sent to a server?

No. Conversion and contrast calculation happen in your browser.

Does the colour change when converting between formats?

The value is the same, but small rounding differences can appear: converting to HSL and back may produce a number that differs by one. So pick one format as your original source and do not convert back and forth between them.

What counts as large text?

In WCAG it is text that is larger or heavier, which is why it needs a lower contrast ratio. Do not treat medium-sized text as large to get an easier verdict; if in doubt, test it as normal text.