Mastering Color Formats: HEX, Jetpack Compose, RGB, HSL, CMYK, OKLCH & Tailwind CSS
In modern web engineering, mobile development, and digital product design, color is more than an aesthetic choice—it is a functional system that affects brand consistency, user perception, and accessibility standards. Developers and designers often navigate between completely different color representations depending on whether they are building Android apps with Jetpack Compose, designing for high-refresh-rate OLED displays, writing modern CSS with OKLCH, configuring Tailwind CSS utility classes, or preparing digital artwork for physical 4-color process (CMYK) printing.
sRGB & HEX Representation
The hexadecimal representation (#RRGGBB) and integer RGB (rgb(255, 255, 255)) define red, green, and blue light components on an 8-bit scale (0–255). While universally supported, sRGB suffers from non-uniform perceived brightness across different hues.
OKLCH: The CSS Color 4 Revolution
Introduced in CSS Color Module 4 and adopted natively by Tailwind CSS v4, OKLCH is a perceptually uniform color space. In OKLCH, Lightness (L), Chroma (C), and Hue (H) are decoupled, ensuring that two colors with identical Lightness values look equally bright to the human eye.
Android & Jetpack Compose: The 0xFF Hex Structure
In Android Jetpack Compose and Kotlin Multiplatform (KMP), colors are represented by the androidx.compose.ui.graphics.Color class, initialized with a 32-bit ARGB (Alpha, Red, Green, Blue) integer literal. Unlike standard web hexadecimal notation where the alpha channel is either omitted or appended to the end (#RRGGBBAA), Kotlin Compose expects the alpha byte at the very beginning prefixed by 0x (0xAARRGGBB).
For an opaque color like Tailwind blue (#3B82F6), the alpha channel is 255 (FF in hex), resulting in Color(0xFF3B82F6). For 50% transparency, the alpha byte is 128 (80 in hex), producing Color(0x803B82F6). ChromaFit automatically computes this exact 32-bit ARGB representation so you can copy and paste directly into your Compose UI themes.
Why OKLCH Solves HSL's Major Flaw
For decades, web developers relied on HSL (Hue, Saturation, Lightness) because it seemed more intuitive than raw RGB. However, HSL has a fatal flaw: human perception is non-linear. In HSL, a pure yellow (hsl(60, 100%, 50%)) and a pure blue (hsl(240, 100%, 50%)) have the exact same lightness value (50%), but to the human eye, yellow appears blindingly bright while blue appears deep and dark.
OKLCH fixes this fundamental problem. When you define a color in OKLCH, a lightness of 0.6 represents true perceptual brightness regardless of whether the hue is yellow, blue, red, or green. This makes generating accessible button states, hover variations, and automated 50–950 tonal scales predictable and visually balanced.
Understanding WCAG 2.1 Contrast Standards
Web Content Accessibility Guidelines (WCAG) 2.1 establish mathematical criteria to ensure text remains legible for people with visual impairments or color blindness:
- WCAG AA (Minimum Contrast): Requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
- WCAG AAA (Enhanced Contrast): Requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.
ChromaFit calculates the exact relative luminance based on the IEC 61966-2-1 standard formula, letting you verify AA and AAA compliance with zero guesswork.
Converting for Print: CMYK Subtractive Color
Unlike computer screens which emit light (additive RGB model), printed paper absorbs and reflects light (subtractive CMYK model using Cyan, Magenta, Yellow, and Key/Black ink). When designing printed collateral, digital assets must be translated into CMYK percentages to ensure the physical ink mixture closely replicates the intended digital design.