Color Space Transformations

This tool converts between three common digital color representations used across web development, design, and graphics programming.

HEX (Hexadecimal)

A 6-digit base-16 code. Each pair of digits represents Red (00–FF), Green (00–FF), and Blue (00–FF). #FF5733 = R:255, G:87, B:51. The universal standard for colors in CSS, HTML, and most design tools.

RGB (Red, Green, Blue)

An additive color model where light combines to form colors. Each channel ranges 0–255. rgb(255,87,51) = white + red + green at reduced blue. CSS syntax: rgb(R, G, B). All channels at 255 = white; all at 0 = black.

HSL (Hue, Saturation, Lightness)

A cylindrical representation designed for human readability. Hue is the angle on the color wheel (0°=red, 120°=green, 240°=blue). Saturation is how vivid the color is (0%=gray, 100%=full color). Lightness is how bright (0%=black, 50%=normal, 100%=white).

When to Use Each Format

  • HEX: Best for CSS, inline styles, and when you need the shortest notation.
  • RGB: Useful when you need to programmatically manipulate individual channels.
  • HSL: Most intuitive for creating color scales and palettes—you can vary lightness while keeping hue constant.