The 12-bit rainbow palette
a year ago
- #color theory
- #design
- #web development
- The 12-bit rainbow palette was designed for National Grid: Live, using 12 colors optimized for human perception of luminance, chroma, and hue.
- Each color in the 12-bit palette is represented by a 4-character hexadecimal code, making it efficient for CSS or SVG use.
- Traditional RGB color spaces treat red, green, and blue equally, but human perception varies in luminance, leading to uneven brightness in simple RGB rainbows.
- The LCH color space (Luminance, Chroma, Hue) offers perceptual uniformity, meaning numerical changes correspond to consistent visual differences.
- A fixed LCH luminance and chroma rainbow palette looks unnatural, with colors like yellow darkening to brown and blue appearing too pale.
- A better method involves varying luminance in a controlled way, prioritizing high luminance for yellow and adjusting other hues accordingly.
- The 12-bit color depth requires minor adjustments to luminance, chroma, and hue, but these changes are subtle enough to remain visually consistent.
- The final palette features evenly spaced hues, minimal chroma variation, and smooth luminance transitions for a balanced rainbow effect.