Color Converter

// hex · rgb · hsl · cmyk · live preview · shades · css snippets

#7c6aff

Pick a color or type in any format below

HEX

RGB

HSL

CMYK

shades — click to select

css snippets — click to copy

popular colors

Color format guide

HEX — #RRGGBB, used in CSS and design tools
RGB — red, green, blue (0–255 each)
HSL — hue (0–360°), saturation, lightness — most intuitive for humans
CMYK — cyan, magenta, yellow, black — used in print design

When to use each format

Use HEX in CSS for exact color matching. Use RGB when you need to apply opacity with rgba(). Use HSL when programmatically generating color scales. Use CMYK for print design in tools like Illustrator.

Color formats in web development

Web developers work with colors in multiple formats depending on the context. HEX (hexadecimal) is the most compact and widely used in CSS — #7c6aff represents a purple color with red=124, green=106, blue=255. The three pairs of hex digits each represent one color channel from 0 (00) to 255 (ff).

RGB expresses the same information in decimal: rgb(124, 106, 255). It's more readable than HEX but longer. RGBA adds an alpha channel for transparency: rgba(124, 106, 255, 0.5) is 50% transparent. HSL (hue, saturation, lightness) is the most intuitive for programmatic color manipulation — want a lighter version? Increase the L value. Want a less saturated version? Decrease S.

CMYK (cyan, magenta, yellow, black) is used in print design. Unlike RGB which is additive (mixing light), CMYK is subtractive (mixing ink). A color that looks perfect on screen may look different when printed because monitors and printers have different color gamuts. Always convert to CMYK when preparing designs for print.

When to use each color format

Use HEX when writing CSS for static colors. It is compact, universally supported, and easy to copy-paste from design tools like Figma or Sketch.

Use RGB/RGBA when you need transparency (rgba) or when generating colors programmatically in JavaScript where you need to manipulate individual channel values.

Use HSL when creating color themes, generating shades of a brand color, or building any system where you need to programmatically lighten, darken, or desaturate colors. It is far more intuitive than adjusting RGB values manually.

Frequently Asked Questions

What's the difference between RGB and HEX?+

They represent the same color model — red, green, and blue components. HEX is just a base-16 representation of the same RGB values. #FF0000 and rgb(255, 0, 0) are identical red. HEX is more compact; RGB is more readable.

Why does HEX have a short 3-digit form?+

When both digits of each channel are identical (e.g. #RRGGBB → #RGB), CSS allows shorthand. #ff0000 = #f00. This only works when each pair of hex digits is doubled — #7c6aff cannot be shortened.

What is HSL and why is it useful?+

HSL (Hue, Saturation, Lightness) describes color in a way humans find intuitive. To make a color lighter, increase Lightness. To make it less saturated, decrease Saturation. To pick a different hue of the same color family, adjust just the Hue. This makes it ideal for generating color themes programmatically.