CSS Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK — live, with copy-ready CSS.
How to Use
- Use the color picker to choose any color visually, or type into any of the format fields directly.
- Every field updates live whenever any other field changes.
- Accepted HEX formats: #fff, #ffffff, #ffffffff (with alpha).
- Accepted RGB: rgb(0, 0, 0), rgb(0 0 0), rgba(0, 0, 0, 1), or just three numbers.
- HSL accepts hsl(360, 100%, 50%) or three numbers.
- Click any field to select the value, then copy with Ctrl/Cmd+C.
Color Spaces
A Brief History of Color on Screens
RGB color on computer screens dates back to the first color CRT displays of the 1950s. Each pixel was lit by three electron beams hitting red, green, and blue phosphors arranged in a triad pattern; varying the intensity of each beam produced any color the phosphors could mix. The 24-bit "true color" RGB values we use today (8 bits per channel, 16,777,216 colors) became standard in the mid-1990s as graphics cards and displays caught up.
HEX notation came from early HTML/CSS — a compact way to specify RGB triples. CSS Level 1 (1996) supported hex and named colors only; CSS Level 2 added rgb() functional notation; CSS Level 3 added HSL, HSLA, and a wider set of named colors. CSS Level 4 (still rolling out) adds color() for wide-gamut spaces, oklch() for perceptually-uniform color, and other modern color models.
HSV/HSB was popularized by Adobe Photoshop and Illustrator in the late 1980s as a more intuitive color model for designers. CMYK came from offset printing, where four ink plates (cyan, magenta, yellow, black) physically combine on paper. The conversion between RGB (light-emissive) and CMYK (light-absorptive) is fundamentally lossy because the gamuts don't match — the most saturated screen colors can't be printed, and vice versa.
About This Converter
This converter does live two-way conversion between HEX, RGB, HSL, HSV, and CMYK. Type a value in any field; every other field updates instantly to the equivalent. The math is exact for the lossless conversions (HEX ↔ RGB ↔ HSL ↔ HSV); CMYK is the standard naive conversion (K = 1 − max(R,G,B); C/M/Y from 1 − each channel after removing K) and is intended for sanity-checking, not press-ready output.
Everything runs entirely in your browser; no colors are transmitted or stored. The picker uses the browser's native color input, which works on every modern desktop and mobile browser. For WCAG accessibility checks, pair this with the Contrast Checker tool.
Frequently Asked Questions
Which color space does this use?
sRGB — the standard color space for the web. All conversions assume your display is sRGB-calibrated, which essentially every consumer monitor and phone is by default. For wide-gamut displays (Apple P3, Rec. 2020), the colors will look slightly more saturated than the numbers indicate.
What's the difference between HSL and HSV?
Both use Hue (0–360°) and Saturation (0–100%) but treat brightness differently. HSV uses <strong>Value</strong> (the maximum of R, G, B) — V=100% means the brightest possible color of that hue and saturation. HSL uses <strong>Lightness</strong> (midpoint) — L=50% is the most saturated; L=100% is white; L=0% is black. CSS uses HSL; Photoshop, Figma, and most design tools use HSV (often called HSB).
Is the CMYK conversion accurate for print?
No — this uses the naive 1-(R,G,B) mapping with K=min. Real print CMYK conversion requires an ICC color profile that accounts for the specific paper and inks (e.g., SWOP, FOGRA39 for offset; ISO Coated v2 for digital). Use this for rough sanity-checks; for production print files, convert in Photoshop, Illustrator, or a color-managed RIP.
What does the alpha channel mean?
Opacity. 0 = fully transparent, 1 (or 100%) = fully opaque. Modern CSS supports rgba(), hsla(), and 8-digit hex like #ff0000cc (the last two digits are the alpha as 00–FF). All major browsers handle alpha correctly.
How do you convert HEX to RGB?
Split the 6-digit hex into three 2-digit pairs and convert each from base 16 to base 10. #3b82f6 → 3b=59, 82=130, f6=246 → rgb(59, 130, 246). For 3-digit shorthand (#abc), each digit is doubled: #abc = #aabbcc.
What's relative luminance and where do I see it?
A perceptual measure of how bright a color appears, weighted by human eye sensitivity (green > red > blue). The formula 0.2126·R + 0.7152·G + 0.0722·B gives relative luminance on a 0–1 scale. WCAG accessibility contrast ratios are based on this, which is why our Contrast Checker tool is the right choice when you're designing for readability rather than just style.
Common Use Cases
CSS development
Pick a color in any format and immediately get the rgb(), hsl(), or hex string ready to paste into your stylesheet.
Design tool round-trip
Convert between Figma's HSB display and the HSL format CSS uses, or grab a hex from a screenshot color picker for use in code.
Brand color management
Look up exact hex values for brand colors and verify they match printed reference cards via approximate CMYK.
Theme building
Use HSL to derive consistent lightness steps from a single hue (e.g., a 9-step gray scale from L=98% to L=10%).
Email and embedded HTML
Email-safe colors should be specified as hex (some clients reject rgb()/hsl()) — use this to convert.
Accessibility prep
Convert design colors to hex, then run them through the Contrast Checker to verify WCAG compliance.
Last updated: