Skip to content
DayUtils

Color Converter – HEX, RGB, HSL, HSV and CMYK with Contrast Check

Type a colour in any common format — HEX, RGB, HSL or a CSS name such as coral — and see it in every other format, previewed with white and black text. The WCAG contrast ratio against white and black tells you whether text on that colour is readable.

Loading tool…

How to use the colour converter

Type a colour into the box. Any of these work:

  • HEX: #1e90ff, #1e90ff80 or the short form #09f
  • RGB: rgb(30, 144, 255) or rgb(30 144 255 / 0.5)
  • HSL: hsl(210, 100%, 56%)
  • CSS names: coral, navy, teal, gold and other common names

You’ll see the colour as HEX, RGB, HSL, HSV and CMYK, previewed with white and black text, and its contrast ratio against each with a WCAG rating.

Colour formats explained

  • HEX — three pairs of hexadecimal digits for red, green and blue, used everywhere in web design.
  • RGB — the same three channels as numbers from 0 to 255.
  • HSL — hue (degrees), saturation (%) and lightness (%), handy for building colour palettes.
  • HSV / HSB — hue, saturation and value (brightness), the model used by most colour pickers in design apps.
  • CMYK — cyan, magenta, yellow and black percentages for print.

Worked example: dodger blue

#1E90FF = rgb(30, 144, 255) = hsl(210, 100%, 56%) = HSV 210°, 88%, 100% = CMYK 88%, 44%, 0%, 0%.

Its contrast with white is about 3.24 : 1 — fine for large headings but too low for body text — and with black about 6.49 : 1, which passes AA for normal text.

How contrast is calculated

WCAG compares the relative luminance (perceived brightness) of two colours:

Contrast = (L1 + 0.05) ÷ (L2 + 0.05)

where L1 is the lighter colour. Black on white is 21 : 1, the maximum; identical colours are 1 : 1.

Tips for designers and developers

  • Check text colours against their actual background, not just white and black.
  • Use HSL to make tints and shades: keep the hue, change the lightness.
  • Avoid using colour alone to convey meaning — add icons or text for colour-blind users.
  • Prefer CSS custom properties to repeat colours consistently.
  • For print, ask your printer for their CMYK values and colour profile.

Choosing accessible colour pairs

About one in twelve men and one in two hundred women have some form of colour vision deficiency, most often difficulty telling red from green. Good contrast helps everyone, including people reading on a phone in bright sunlight. As a rule of thumb, mid-tone colours such as bright blue, orange and green rarely pass AA for small text against either white or black, so use them for large headings, icons and buttons with bold labels, and pick a darker shade for body text.

Web colours and names

CSS defines about 140 named colours, from aliceblue to yellowgreen. They’re convenient for quick tests, but most brand palettes are defined in HEX so they can be matched exactly in design tools, code and documents. To pick a colour from a photo, use the image colour picker. For number systems, see the number base converter.

Frequently asked questions

How do I convert HEX to RGB?

Split the six hex digits into three pairs and convert each from base 16 to base 10. #1E90FF → 1E = 30, 90 = 144, FF = 255, so rgb(30, 144, 255).

How do I convert RGB to HEX?

Convert each value from 0 to 255 into two hex digits and join them: rgb(255, 127, 80) → FF, 7F, 50 → #FF7F50.

What is HSL?

Hue, saturation and lightness. Hue is the position on the colour wheel (0–360°), saturation how vivid the colour is, and lightness how close it is to black or white. It is easier than RGB for making lighter or darker shades of one colour.

What is a good contrast ratio?

The Web Content Accessibility Guidelines (WCAG) ask for at least 4.5 : 1 for normal text and 3 : 1 for large text (AA), and 7 : 1 for normal text at the stricter AAA level.

Why does CMYK look different when printed?

Screens mix light (RGB), printers mix ink (CMYK). The conversion here is a simple mathematical one; professional printing uses colour profiles that account for paper and ink, so printed colours can differ.

Can I use transparency?

Yes. Eight-digit HEX (#RRGGBBAA), rgba() and hsla() values are understood, and the alpha value is kept in the RGB and HSL results.

Related tools

Last updated: