[RivieraDev2025] Julien Sulpis – What is Color? The Science Behind the Pixels
Julien Sulpis took the Riviera DEV 2025 stage to unravel the science of color, blending biology, physics, and technology to explain the quirks of digital color representation. His presentation demystified why colors behave unexpectedly across platforms and introduced modern color spaces like OKLAB and OKLCH, offering developers tools to create visually coherent interfaces. Julien’s approachable yet rigorous exploration provided actionable insights for enhancing user experience through better color management.
Understanding Color: From Light to Perception
Julien began by defining color as light, an electromagnetic wave with wavelengths between 400 and 700 nanometers, visible to the human eye. He explained how retinal cells—rods for low-light vision and cones for color perception—process these wavelengths. Three types of cones, sensitive to short (blue), medium (green), and long (yellow-orange) wavelengths, combine signals to create the colors we perceive. This biological foundation sets the stage for understanding why digital color representations can differ from human perception.
He highlighted common issues, such as why yellow appears brighter than blue at equal luminosity or why identical RGB values (e.g., green at 0, 255, 0) look different in Figma versus CSS. These discrepancies stem from the limitations of color spaces and their interaction with display technologies, prompting a deeper dive into digital color systems.
Color Spaces and Their Limitations
Julien explored color spaces like sRGB and P3, which define the range of colors a device can display within the CIE 1931 chromaticity diagram. sRGB, the standard for most screens, covers a limited portion of visible colors, while P3, used in modern devices like Macs, offers a broader gamut. He demonstrated how the same RGB code can yield different results across these spaces, as seen in his Figma-CSS example, due to calibration differences and gamut mismatches.
The talk addressed how traditional notations like RGB and HSL fail to account for human perception, leading to issues like inconsistent contrast in UI design. For instance, colors on a chromatic wheel may appear mismatched in brightness, complicating efforts to ensure accessibility-compliant contrast ratios. Julien emphasized that understanding these limitations is crucial for developers aiming to create consistent and inclusive interfaces.
Modern Color Spaces: OKLAB and OKLCH
To address these challenges, Julien introduced OKLAB and OKLCH, perception-based color spaces designed to align with how humans see color. Unlike RGB, which interpolates colors linearly, OKLAB and OKLCH ensure smoother transitions in gradients and palettes by accounting for perceptual uniformity. Julien demonstrated how CSS now supports these spaces, allowing developers to define gradients that maintain consistent brightness and contrast, enhancing visual harmony.
He showcased practical applications, such as using OKLCH to create accessible color palettes or interpolating colors in JavaScript libraries. These tools simplify tasks like ensuring sufficient contrast for text readability, a critical factor in accessible design. Julien also addressed how browsers handle unsupported color spaces, using tone mapping to approximate colors within a device’s gamut, though results vary by implementation.
Practical Applications for Developers
Julien concluded with actionable advice for developers, urging them to leverage OKLAB and OKLCH for more accurate color calculations. He recommended configuring design tools like Figma to match target color spaces (e.g., sRGB for web) and using media queries to adapt colors for displays supporting wider gamuts like P3. By understanding the science behind color, developers can avoid pitfalls like inconsistent rendering and create interfaces that are both aesthetically pleasing and accessible.
He also encouraged experimentation with provided code samples and libraries, available via a QR code, to explore color transformations. Julien’s emphasis on practical, perception-driven solutions empowers developers to enhance user experiences while meeting accessibility standards.