QuikTool

Color Converter

Convert colors between HEX, RGB, HSL, HWB, HSV, CMYK and OKLCH, with a WCAG contrast checker.

Accepts HEX (3, 4, 6 or 8 digits), RGB, HSL, HWB, HSV, CMYK, OKLCH and CSS color names.

  • HEX#ff6347
  • RGBrgb(255, 99, 71)
  • HSLhsl(9, 100%, 64%)
  • HWBhwb(9 28% 0%)
  • HSVhsv(9, 72%, 100%)not a CSS function
  • CMYKcmyk(0%, 61%, 72%, 0%)simple conversion, not a print profile
  • OKLCHoklch(69.6% 0.196 32.32)
  • CSS nametomato

Shades and tints

Four lighter and four darker versions of your color. Choose one to convert it.

Contrast checker

Checks your color as text on a background against the WCAG 2 accessibility guidelines.

Large sample text

Regular sample text. The quick brown fox jumps over the lazy dog.

Contrast ratio 2.94:1

  • AA, normal text (4.5:1)Fail
  • AA, large text (3:1)Fail
  • AAA, normal text (7:1)Fail
  • AAA, large text (4.5:1)Fail

Runs in your browser. Nothing is uploaded.

What is Color Converter?

A color converter turns one way of writing a color into another. Designers hand over HEX codes, CSS uses rgb() and hsl(), design tools show HSV and CMYK, and modern stylesheets are moving to OKLCH. They all describe the same colors, but you often need a different notation than the one you were given. This free color converter reads any of them and shows all the others at once.

Paste or type a color in any common format, such as #ff6347, rgb(255, 99, 71), hsl(9, 100%, 64%), oklch(69.6% 0.196 32.3) or just the name tomato, and every other notation appears below it with its own copy button. You can also use the color picker, and transparency is kept: an 8-digit HEX or an rgba() value converts to the alpha form of every format that has one. The CMYK result is a plain mathematical conversion, so it is a good starting point but not a replacement for a print profile.

Two extras are built in. Shades and tints gives you four lighter and four darker versions of your color, mixed in the perceptual OKLab space so the steps look even. The contrast checker measures your color as text on any background and tells you whether it passes the WCAG 2 accessibility levels AA and AAA for normal and large text. Everything is calculated in your browser, so the colors you try never leave your device.

How to use

  1. Type or paste a color in any format, or choose one with the color picker.
  2. Read the same color in HEX, RGB, HSL, HWB, HSV, CMYK, OKLCH and as the nearest CSS name, and press Copy beside the one you need.
  3. Switch between classic (commas) and modern (spaces) CSS syntax, or turn on uppercase HEX, to match your code style.
  4. Pick a swatch under Shades and tints to continue with a lighter or darker version.
  5. Enter a background color in the contrast checker to see the ratio and the AA and AAA results for your text color.

Example

Input

#ff6347

Output

rgb(255, 99, 71)  hsl(9, 100%, 64%)  hwb(9 28% 0%)  cmyk(0%, 61%, 72%, 0%)  oklch(69.6% 0.196 32.32)  tomato

Color formats at a glance

The same color, tomato, written in each format this converter understands.

SyntaxMeaning
#ff6347HEX: red, green and blue as two hexadecimal digits each
rgb(255, 99, 71)RGB: red, green and blue from 0 to 255
hsl(9, 100%, 64%)HSL: hue angle, saturation and lightness
hwb(9 28% 0%)HWB: hue, then how much white and black is mixed in
hsv(9, 72%, 100%)HSV: hue, saturation and value (brightness)
cmyk(0%, 61%, 72%, 0%)CMYK: cyan, magenta, yellow and black ink
oklch(69.6% 0.196 32.32)OKLCH: perceptual lightness, chroma and hue
#ff6347808-digit HEX: the last two digits are the alpha (opacity)

Frequently asked questions

Which color formats can I paste in?
HEX with 3, 4, 6 or 8 digits (with or without the #), rgb() and rgba(), hsl() and hsla(), hwb(), hsv(), cmyk(), oklch(), and all 148 CSS color names. Both the comma style, rgb(255, 99, 71), and the space style, rgb(255 99 71 / 50%), work, as do percentages and angle units such as 0.5turn.
Why does a converted color differ slightly when I convert it back?
HSL, HSV, CMYK and OKLCH values are rounded to a few digits when they are shown, and two different decimal values can land on the same 0 to 255 red, green and blue numbers. HEX and RGB convert exactly; the others can be off by one step in a channel after a round trip.
What does the contrast ratio mean?
It compares the brightness of two colors on a scale from 1:1 (identical) to 21:1 (black on white). WCAG 2 asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at the stricter level AAA. Large text means 24 CSS pixels or 18.66 pixels in bold.
Is the CMYK value usable for printing?
Only as a rough guide. It is the standard formula from RGB, which ignores the ink, the paper and the printer profile. For print work, convert in a design tool with the profile your printer asks for.
What happens to colors outside the sRGB range?
An OKLCH color can be more vivid than a normal screen can show. The tool moves it to the nearest color that fits sRGB and tells you it did so. Values such as rgb(300, 0, 0) are limited to the valid range in the same way.

Related tools