A Developer's Comprehensive Guide to Digital Color Models: HEX, RGB, HSL & OKLCH

Unlike physical paints which use subtractive color mixing (CMYK), computer displays emit photon wavelengths using the additive RGB model. Each physical pixel on an OLED or LCD monitor consists of three tiny subpixels: Red, Green, and Blue. When all three subpixels emit at zero intensity (0, 0, 0), the screen appears pitch black. When all three emit at peak intensity (255, 255, 255 in 8-bit depth), our eyes perceive pure white light. By varying the electrical excitation across 256 gradations per channel (2^8 = 256), a monitor produces 256 * 256 * 256 = 16,777,216 distinct color combinations—known as 24-bit TrueColor.

Hexadecimal color strings (#RRGGBB) are simply base-16 representations of three 8-bit integers: • Digits range from 0 to 9 followed by A (10) through F (15). • One byte (0–255 in decimal) corresponds to exactly two hex characters: 00 = 0, 7F = 127, FF = 255. • For example, #4F46E5 represents Red: 0x4F (79), Green: 0x46 (70), Blue: 0xE5 (229)—the signature indigo hue of KhmerTools. • Modern CSS also supports an optional 8-character hex format (#RRGGBBAA), where the final two digits encode opacity (alpha channel from 00 for 0% to FF for 100%).

While RGB and HEX match hardware reality, they are unintuitive for designers. If you need a darker shade of #3B82F6, which channel do you modify? HSL solves this by projecting the RGB cube into a cylindrical coordinate space: 1. Hue (0° to 360°): The pure pigment position on the color wheel (0° = Red, 120° = Green, 240° = Blue). 2. Saturation (0% to 100%): The vibrancy of the color, ranging from grayscale to vivid saturation. 3. Lightness (0% to 100%): The illumination, from pure black (0%) to pure white (100%). Adjusting brightness in HSL merely requires tweaking the Lightness percentage, making theme generation and hover states effortless in modern CSS.

Digital accessibility mandates that text must have sufficient contrast against background surfaces to remain readable for visually impaired users. Under the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG 2.2): • Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold). • Level AAA requires an enhanced contrast ratio of at least 7:1 for normal text. Always test color pairings with our Color Converter to verify compliance before deploying production design tokens.