Color Formats: HEX, RGB, HSL Explained

Digital screens create colors by combining light from red, green, and blue (RGB) subpixels. Key concepts: • Additive color: Adding light creates brighter colors • RGB combines to make white (opposite of paint mixing) • Each channel typically has 256 levels (0-255) • 256 × 256 × 256 = 16.7 million possible colors Color depth: • 8-bit: 256 colors total (very limited) • 16-bit: 65,536 colors • 24-bit: 16.7 million colors (standard "true color") • 32-bit: 24-bit + 8-bit alpha channel for transparency Color spaces: • sRGB: Standard for web and most displays • Adobe RGB: Wider gamut for professional photography • Display P3: Modern wide-gamut for newer devices • Most web work uses sRGB exclusively

HEX (hexadecimal) is the most common format for specifying colors in CSS and web design. Format: #RRGGBB • Each pair is a hex value from 00 to FF • Represents the intensity of red, green, and blue • Values range from 0 (00) to 255 (FF) Examples: • #FF0000 = Pure red (R:255, G:0, B:0) • #00FF00 = Pure green (R:0, G:255, B:0) • #0000FF = Pure blue (R:0, G:0, B:255) • #FFFFFF = White (all channels maximum) • #000000 = Black (all channels zero) • #808080 = Gray (all channels equal) Shorthand notation: • #RGB expands to #RRGGBB • #F00 = #FF0000 (red) • #0F0 = #00FF00 (green) • Only works when pairs are identical With alpha (transparency): • #RRGGBBAA (8 digits) • #FF000080 = 50% transparent red • Supported in modern browsers

RGB functional notation is more readable than HEX and allows easy manipulation. Format: rgb(red, green, blue) • Values from 0 to 255, or 0% to 100% • rgb(255, 0, 0) = Red • rgb(100%, 0%, 0%) = Also red RGBA (with alpha): • rgba(red, green, blue, alpha) • Alpha from 0 (transparent) to 1 (opaque) • rgba(255, 0, 0, 0.5) = 50% transparent red Modern CSS: • rgb() now accepts alpha as fourth value • rgb(255 0 0 / 50%) = Same as rgba • Space-separated values allowed: rgb(255 0 0) Advantages: • More readable than HEX • Easy to calculate color variations programmatically • Alpha is intuitive (0-1 or percentage) Disadvantages: • More verbose than HEX • Not as compact in stylesheets • Some design tools prefer HEX

HSL represents colors by hue, saturation, and lightness - more intuitive for humans. Format: hsl(hue, saturation, lightness) • Hue: 0-360 (color wheel position) • Saturation: 0%-100% (color intensity) • Lightness: 0%-100% (brightness) Hue values: • 0° / 360° = Red • 60° = Yellow • 120° = Green • 180° = Cyan • 240° = Blue • 300° = Magenta Working with HSL: • Keep hue constant, vary saturation/lightness for variations • Complementary colors: add 180° to hue • Triadic colors: add 120° and 240° to hue HSLA (with alpha): • hsla(180, 100%, 50%, 0.5) = 50% transparent cyan Advantages: • Intuitive color relationships • Easy to create color schemes • Simple to lighten/darken colors • Great for programmatic color generation Disadvantages: • Less common in design tools • Requires understanding color theory

CMYK is used for print, not web - but understanding it helps when preparing print materials. Format: Cyan, Magenta, Yellow, Key (black) • Subtractive color model (ink absorbs light) • Values typically 0-100% • Combining all = black (opposite of RGB) Key differences from RGB: • Smaller color gamut than RGB • Some bright screen colors can't be printed • Always convert and proof before printing Why K for black: • Historical: "Key" plate in printing • Prevents confusion with Blue • Pure CMY rarely produces true black Web developers note: • CSS doesn't support CMYK • Convert to RGB for web display • Provide CMYK values separately for print assets • Use color profiles for accurate conversion Common conversions: • RGB to CMYK loses some colors • Always work in CMYK if final output is print • Check proof prints for color accuracy

Use HEX when: • Writing CSS (most compact) • Sharing colors with other developers • Brand guidelines specify it • Copying from design tools Use RGB/RGBA when: • Working with JavaScript/programming • Calculating color variations • Animating between colors • Needing transparency Use HSL/HSLA when: • Creating color schemes programmatically • Generating variations of a base color • Working with color theory concepts • Making accessible color choices (checking lightness) Use CMYK when: • Preparing files for print • Working with professional printers • Creating print-ready PDFs • Designing packaging or physical materials Conversion tips: • All formats (except CMYK) represent the same colors • Convert freely between HEX, RGB, and HSL • Be careful with CMYK conversions (gamut limitations) • Use our color converter tool for accurate conversions