graf1x

Color Converter

Enter a hex code, RGB, or HSL value to see live conversions across HSV, CMYK, and LAB. Pick a color with the color picker. Copy any format with one click.

Check contrast

Output formats

Hex
#4F46E5
RGB
rgb(79, 70, 229)
RGBA
rgba(79, 70, 229, 1)
HSL
hsl(244, 76%, 60%)
HSLA
hsla(244, 76%, 60%, 1)
HSV
hsv(244, 69%, 90%)
CMYK
cmyk(66%, 69%, 0%, 10%)
CIE LAB
lab(51.1, 36.2, -62.3)

How to Use the Color Converter

This tool converts colors between six common color spaces: hex, RGB, HSL, HSV, CMYK, and CIE LAB. Here is how to use it:

  1. Pick a color — use the color picker, type a hex code, or enter RGB or HSL values directly. All fields update live as you type.
  2. View all formats — the output cards below show your color in hex, RGB, RGBA, HSL, HSLA, HSV, CMYK, and LAB simultaneously.
  3. Copy any format — click the Copy button next to any output card to copy that format to your clipboard.
  4. Edit any field — change the hex, RGB, or HSL inputs and every other format updates instantly. The converter is fully bidirectional.

About Color Spaces

Different color spaces serve different purposes. Here is a brief overview of each:

Hex

Hexadecimal color notation is the most common format for web design. It encodes RGB values as a 6-digit hexadecimal number prefixed with #. For example, #FF0000 is pure red (R=255, G=0, B=0). Shorthand 3-digit notation (#F00) is equivalent to duplicating each digit (#FF0000).

RGB

RGB (Red, Green, Blue) is the additive color model used by screens. Each channel ranges from 0 to 255. The CSS syntax is rgb(r, g, b). RGBA adds an alpha channel for opacity: rgba(r, g, b, a) where a is 0 to 1.

HSL

HSL (Hue, Saturation, Lightness) is a cylindrical representation of RGB that is more intuitive for humans. Hue is 0-360 degrees (0=red, 120=green, 240=blue). Saturation and Lightness are percentages. The CSS syntax is hsl(h, s%, l%).

HSV

HSV (Hue, Saturation, Value) is similar to HSL but uses Value instead of Lightness. Value represents the brightest component, while Lightness represents the average of the brightest and darkest components. HSV is commonly used in image editing software like Photoshop.

CMYK

CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive color model used in printing. Each value is a percentage from 0 to 100. Unlike RGB, mixing all colors at 100% produces black (not white). The K (black) channel is added because CMY alone cannot produce a true black.

CIE LAB

CIE LAB is a perceptual color space designed to be device-independent. L represents lightness (0-100), a represents green-red, and b represents blue-yellow. LAB approximates human vision more closely than RGB or HSL, making it useful for color difference calculations (Delta E). It is widely used in color science and quality control.

Frequently Asked Questions

How do I convert hex to RGB?

A hex color code like #4F46E5 encodes three values in hexadecimal: 4F for red, 46 for green, E5 for blue. Convert each pair from hex to decimal: 4F = 79, 46 = 70, E5 = 229. So #4F46E5 = rgb(79, 70, 229). This tool does the conversion automatically as you type.

How do I convert RGB to hex?

Convert each RGB value to a 2-digit hexadecimal number and concatenate with a # prefix. For example, rgb(79, 70, 229): 79 in hex is 4F, 70 is 46, 229 is E5, giving #4F46E5. Values below 16 are padded with a leading zero (e.g., 5 becomes 05).

What is the difference between HSL and HSV?

Both are cylindrical color models based on hue, but they differ in how they represent lightness. HSL uses Lightness (the average of the brightest and darkest components), while HSV uses Value (the brightest component). At 100% lightness, HSL is always white. At 100% value, HSV is the pure color (not white unless saturation is 0).

What is CMYK used for?

CMYK is the subtractive color model used in printing. Unlike RGB (which adds light), CMYK subtracts light using ink. Cyan, magenta, and yellow inks absorb red, green, and blue light respectively. Black (Key) is added because CMY inks alone cannot produce a true black, and using all three uses more ink. Use CMYK values when preparing designs for print.

Copyright Notice

Please consider purchasing my work, thank you.