Posts Tagged ‘ColorTheory’
[DotCSS2018] DotCSS 2018: David DeSandro – Decoding Color Hex Codes
David DeSandro, a colorblind designer and developer, shared a unique perspective at DotCSS 2018, unveiling his method for interpreting color hex codes. His talk transcends mere technical instruction, weaving together insights into human vision, computer history, and digital color theory. By breaking down the process of reading hex codes, David empowers developers to understand colors in a way that is both accessible and profound, particularly for those who cannot rely on visual perception alone.
The Mechanics of Hex Codes
David begins by demystifying the structure of hex codes, which are six-digit alphanumeric sequences representing RGB (Red, Green, Blue) values. Each pair of digits corresponds to one color channel, expressed in hexadecimal, a base-16 system using digits 0-9 and letters A-F. This system, rooted in computer history for its concise representation of binary data, is optimized for machines but less intuitive for humans. David’s approach simplifies this by focusing on the relative values of each digit—0 being the lowest, F the highest.
To make hex codes more digestible, David advocates for the three-digit shorthand (e.g., #D92 instead of #DD9922). This shorthand, achieved by duplicating each digit, approximates the original color while being easier to parse. For example, #D92 translates to high red, medium green, and low blue, providing a quick snapshot of the color’s composition. This simplification is particularly useful for memorizing brand colors or making rapid design decisions.
Translating Hex to Human Perception
The core of David’s method lies in converting RGB values into the HSL (Hue, Saturation, Lightness) model, which is more aligned with human perception. By analyzing the line graph of a hex code’s RGB values, developers can identify the hue (e.g., orange for high red, medium green, low blue), lightness (based on the average value of the channels), and saturation (determined by the range between the highest and lowest values). For instance, #D92 is described as a “middle washed orange,” a human-readable descriptor that bridges technical code and visual understanding.
David’s approach is not just practical but also philosophical, encouraging developers to think beyond tools and frameworks. By scrutinizing hex codes at a granular level, developers gain insights into color theory and workflow efficiency, ultimately enhancing their craft.