Color Converter

Color conversion is the math of expressing the same point in colour space using different coordinate systems. HEX, RGB, HSL, and HSV all describe colours that ultimately map to the same sRGB-gamut pixels your monitor produces; the difference is which axes you reason about while picking and tweaking the value.

This converter implements the conversion math directly in TypeScript - no external colour library. The functions you can read in the source above (rgbToHsl, hslToRgb, rgbToHsv, hsvToRgb) are textbook implementations of the algorithms specified in the W3C CSS Color Module Level 4 reference. Every keystroke updates all four representations synchronously by routing through RGB as the canonical pivot, so round-trips never accumulate drift beyond integer rounding.

HEX is just RGB written in base-16. #FF0000 is exactly rgb(255, 0, 0) - one byte per channel, two hex digits per byte, six digits total. The 3-digit shorthand (#F00) doubles each digit, which is why only colours like #FFCC00 (= #FC0) compress losslessly. The picker control here uses the native HTML5 <input type=&quot;color&quot;> element, which always emits 6-digit HEX regardless of how the OS's colour picker is rendered.

RGB sits closest to the hardware: every monitor pixel is a triple of red, green, and blue subpixels, each driven by an 8-bit value. RGB is great for compositing and direct pixel work but unintuitive for design work because moving towards a darker shade of the same hue requires changing all three channels in proportion.

HSL is the format of choice for most design systems because the three axes match how humans describe colour: hue (which colour, on a 0-360 colour wheel), saturation (how vivid, 0-100%), and lightness (how bright, 0-100% where 50% is the pure colour and 100% is white). Tweaking lightness alone gives you light/dark variants; tweaking saturation alone gives you muted variants. The CSS custom-property pattern --primary-h, --primary-s, --primary-l owes its existence to this property.

HSV (sometimes called HSB) is HSL's cousin, used heavily in colour pickers like the one in Photoshop and Figma. The difference is the third axis: HSL's lightness puts pure white at 100% and pure black at 0%, with the most saturated version of the hue at 50%. HSV's value puts the most saturated hue at 100% and black at 0%, with white as a desaturation of any hue at value 100%. HSV maps more naturally to a square colour-picker swatch; HSL maps better to design tokens.

Two practical limits worth knowing. First, all four formats here are confined to the sRGB gamut - they cannot describe wider-gamut colours like Display P3 or Rec. 2020. For those, CSS Color Level 4 introduces oklch() and color() syntax, which this tool does not yet support. Second, integer rounding means a HEX -> HSL -> HEX round-trip can land one digit off in extreme corners of the gamut; the canonical pivot through RGB keeps drift bounded but not zero.