logo logo-dark

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK and color names - pick, paste or type any color and copy every format.

HEX#6576ff
RGB
HSL
HSV
CMYK
Name
Contrast

What is this color converter?

A color converter translates one color between every notation used in design and on the web - HEX, RGB, HSL, HSV/HSB, CMYK and CSS color names. This one parses whatever you paste: a hex triplet, an rgb()/hsl() string, or a named color like "tomato" - it hands CSS colors to the browser's own getComputedStyle and computes CMYK and HSV with the standard formulas. Everything runs in your browser; no color or image is uploaded.

HEX and RGB are the same thing written two ways - #6576ff is just rgb(101, 118, 255) in base 16. HSL and HSV reorganise that into hue, saturation and a third axis (lightness vs brightness) that is friendlier for building tints and shades. CMYK is the subtractive model printers use. Edit any one field and the rest stay in sync.

How to use the color converter

  • 1. Use the picker, paste any value into the "Any color" box, or edit the RGB / HSL fields directly.
  • 2. Every format updates on the right - click a value to copy it exactly as you would write it in CSS.
  • 3. Open tints & shades to build a palette; the contrast badge flags whether white or black text stays readable (WCAG).

Features

  • Two-way conversion across HEX, RGB, HSL, HSV/HSB, CMYK and CSS color names.
  • Accepts messy input - hex with or without #, rgb()/hsl() strings, or plain color names.
  • Editable RGB and HSL fields alongside a native color picker.
  • Tints and shades palette plus a WCAG contrast check for readable text.
  • Runs entirely in your browser; nothing is uploaded.

When to use it

Grab a hex for CSS, convert a brand RGB into CMYK before sending artwork to print, read the HSL so you can nudge lightness for a hover state, or check that a background passes contrast for accessible text. It is the quick step between a color picker and the value you actually paste into your code.

FAQ

How do I convert HEX to RGB?

Paste the hex value, for example #6576ff, into the Any color box. The RGB line updates instantly to rgb(101, 118, 255), and every output is one click to copy.

What is the difference between HSL and HSV?

Both start from the same hue. HSL's third value is lightness, where 0% is black, 100% is white and 50% is the pure color. HSV's third value is brightness, where 0% is black and 100% is the most vivid form of the color.

What does the contrast badge mean?

It compares the color against black and white text using the WCAG luminance formula and tells you which one stays readable on it. That helps you keep buttons and labels accessible.

Will the CMYK values match my printer?

The CMYK here is a direct math conversion from RGB. Real print output also depends on paper and the color profile, so treat it as a starting point rather than an exact proof.

Related tools