Click to pick

Color value HEX

Supports: #HEX, rgb(), rgba(), hsl(), hsla(), hsv(), cmyk(), hwb(), CSS color names (e.g. coral)

Unrecognized color format. Try #FF5733 or rgb(255, 87, 51).

Presets:

HEX (6-digit)

#3B5BFD

Standard CSS & HTML hex code

HEX (3-digit)

Not reducible

Shorthand (only when each channel is divisible by 17)

HEX + Alpha (8-digit)

#3B5BFDFF

CSS Color Level 4 — last two digits are alpha (FF = 100%)

RGB

rgb(59, 91, 253)

Red · Green · Blue — each channel 0–255

RGBA

rgba(59, 91, 253, 1)

RGB + alpha transparency (0–1)

HSL

hsl(232, 97%, 61%)

Hue (0–360°) · Saturation · Lightness

HSLA

hsla(232, 97%, 61%, 1)

HSL + alpha transparency (0–1)

HSV / HSB

hsv(232°, 77%, 99%)

Hue · Saturation · Value (Brightness) — used in Photoshop & Figma

CMYK

cmyk(77%, 64%, 0%, 1%)

Cyan · Magenta · Yellow · Key (Black) — print standard

HWB

hwb(232 23% 1%)

Hue · Whiteness · Blackness — CSS Color Level 4

CSS Color Name

— (no exact match)

Exact CSS named color if it matches (e.g. coral)

Decimal (integer)

3889149

24-bit RGB integer — used in some APIs and game engines

Color Format Reference

Every major design tool, browser, and programming language has a preferred color format. Here's when to use each one.

HEX

#FF5733

Universal standard for HTML and CSS. 6 hex digits — 2 per channel (Red, Green, Blue). The shorthand #F57 works when both digits in each pair are identical.

RGB / RGBA

rgb(255, 87, 51)

CSS and JavaScript standard. Channels 0–255. RGBA adds an alpha channel (0 = transparent, 1 = opaque). Easiest to reason about in code.

HSL / HSLA

hsl(11, 100%, 60%)

Human-friendly. Adjust hue (color wheel), saturation (vividness), and lightness independently. Great for generating color palettes programmatically.

HSV / HSB

hsv(11°, 80%, 100%)

Used in Photoshop, Figma, and most design apps. Value (V) represents brightness — 0% is black regardless of hue. Not a native CSS format.

CMYK

cmyk(0%, 66%, 80%, 0%)

Print standard — Cyan, Magenta, Yellow, Key (Black). Subtractive color model. CMYK values here are approximate screen-to-print conversions (exact values depend on the printer ICC profile).

HWB

hwb(11 0% 0%)

CSS Color Level 4. Hue, Whiteness, Blackness. Intuitive: mix a pure hue with white or black paint. Supported in modern browsers.

HEX 8-digit

#FF5733CC

CSS Color Level 4. The last two digits are the alpha channel in hex (00 = transparent, FF = opaque). Useful in CSS variables and modern design tokens.

CSS Named Color

coral

148 predefined CSS named colors from black to rebeccapurple. Only works for exact matches — most custom colors won't have a name.

How to Convert Between Color Formats

HEX to RGB

Split the 6-digit hex into three 2-character pairs and convert each from base-16 to base-10. For example, #FF5733: FF → 255, 57 → 87, 33 → 51, giving rgb(255, 87, 51).

RGB to HSL

Normalize each channel to 0–1, find the max and min values, then compute hue from which channel is dominant, saturation from the range relative to lightness, and lightness as the average of max and min.

RGB to CMYK

Normalize channels to 0–1. Key (K) = 1 − max(R, G, B). Then C = (1−R−K)/(1−K), M = (1−G−K)/(1−K), Y = (1−B−K)/(1−K). Note: screen-to-print CMYK is approximate — actual print values depend on paper and ink profiles.

HSV vs HSL

Both use hue (0–360°) and saturation, but they differ in how they represent brightness. In HSL, 50% lightness is the pure color — you add white (above 50%) or black (below 50%). In HSV, 100% value with 100% saturation is the pure color, and reducing value darkens it. HSV is what Photoshop and Figma use; HSL is what CSS uses.

Supported Input Formats

This converter auto-detects any of the following input formats as you type:

#RGB — 3-digit hex
#RRGGBB — 6-digit hex
#RRGGBBAA — 8-digit hex
rgb(r, g, b)
rgba(r, g, b, a)
hsl(h, s%, l%)
hsla(h, s%, l%, a)
hsv(h, s%, v%)
cmyk(c%, m%, y%, k%)
hwb(h w% b%)
CSS color names (e.g. coral)
Decimal integer (e.g. 16744448)

Color Converter