Color Converter

RGB, HSL, and hex aren't different types of color — they're different coordinate systems for the same thing

Pick any color. You can describe it as a mix of red, green, and blue light (RGB), as a position on a color wheel with a brightness and saturation value (HSL), or as three hex bytes (which is just RGB in base 16). Same color, three notations. Converting between them is arithmetic. The one situation where you actually lose information is going from a print color space like CMYK to sRGB — because CMYK can describe some colors a monitor physically can't produce, and those get clamped to the nearest equivalent on screen.

HEX #FF5733  →  RGB(255, 87, 51)  →  HSL(11°, 100%, 60%)

Step 1 — split hex into byte pairs and convert to decimal:
  FF = 15×16 + 15 = 255   ← Red
  57 =  5×16 +  7 =  87   ← Green
  33 =  3×16 +  3 =  51   ← Blue

Step 2 — normalize to 0–1 range for HSL math:
  R = 255/255 = 1.000
  G =  87/255 = 0.341
  B =  51/255 = 0.200

Step 3 — hue:
  Max = R = 1.000, Min = B = 0.200, Δ = 0.800
  H = 60 × ((G − B) / Δ) = 60 × (0.141 / 0.800) ≈ 10.6° → rounds to 11°

Step 4 — saturation and lightness:
  L = (Max + Min) / 2 = 0.600  →  60%
  S = Δ / (1 − |2L − 1|) = 0.800 / (1 − 0.2) = 1.000  →  100%

Why that vivid cyan you designed on-screen looks dull in print

The sRGB color space that monitors use covers roughly 35% of all visible colors. A properly calibrated offset press running the FOGRA39 profile can hit colors that fall completely outside sRGB — vivid cyans and certain magentas being the worst offenders. When you convert those CMYK values to sRGB for screen display, the out-of-gamut colors get clamped to the nearest in-gamut equivalent. The result is a visible shift toward blue or red that wasn't in the original design and can't be fixed after the fact without changing the source color.

HSL vs. HSB: they look identical in a color picker until you copy values between apps

In HSL, a lightness of 50% with 100% saturation gives you the pure, fully-saturated version of a hue. Lightness 100% is always white. In HSB (called HSV in some tools, HSB in Photoshop), 100% brightness is the pure hue. You only get white by combining 0% saturation with 100% brightness. Photoshop uses HSB. CSS uses HSL. If you eyedropper a color in Photoshop, note the H/S/B values, then type them directly into a CSS hsl() rule, the color won't match. It won't be close. Always check which model the source app uses before copying numbers across.