Why I built this
I keep a HEX-to-RGB converter open in a tab while doing CSS work. Most converter sites are fine but cluttered with a hundred unrelated tools, ads, and a slow color picker. This is just a color picker, four input boxes, and copyable values.
Quick reference
#FF0000= rgb(255, 0, 0) = hsl(0, 100%, 50%) = pure red#00FF00= rgb(0, 255, 0) = pure green#0000FF= rgb(0, 0, 255) = pure blue#000000= rgb(0, 0, 0) = black#FFFFFF= rgb(255, 255, 255) = white- HSL hue: 0=red, 120=green, 240=blue (going around the color wheel)
FAQ
What is the difference between HSL and HSV? HSL (Hue, Saturation, Lightness) is intuitive for designers — lightness 0% is always black, 100% is always white, regardless of hue. HSV (Hue, Saturation, Value) is closer to the color picker model — value 100% is the most saturated version of the hue, never white. CSS uses HSL; Photoshop uses both.
Why does my CMYK look different in print? CMYK in this tool uses the basic mathematical conversion, which assumes ideal inks on perfect white paper. Real print workflows apply an ICC color profile (typically GRACoL, FOGRA, or SWOP) that adjusts for paper, ink density, and dot gain. For a quick design-time estimate this is fine; for actual print, ask your printer for a soft-proof preview.
Why is my HEX 3-character (e.g. #f0c) accepted? CSS shorthand. #f0c expands to #ff00cc — each digit is doubled. You'll see the same color either way; the long form just allows finer control (#ff01cc would not be expressible in shorthand).
Are the conversions reversible? HEX ↔ RGB is exact (both store 0–255 per channel). RGB ↔ HSL/HSV may lose 1–2 units of precision due to rounding. RGB ↔ CMYK is approximate by design (3-channel to 4-channel). For lossless work, store HEX or RGB and convert on display.
How do I get a Tailwind class from a HEX? For exact colors, use the arbitrary value syntax shown in the table: bg-[#3b82f6]. For named Tailwind palette colors (blue-500 etc.), look up the closest match in the Tailwind docs — our HEX may not match a named color exactly.
Why is everything in sRGB? sRGB is the colorspace your monitor and the web assume by default. P3 (wide-gamut, used on modern Apple displays) and AdobeRGB exist but require explicit handling. For web design, sRGB is correct 99% of the time.