Hexadecimal Color Space

Ensuring Precise and Consistent Colors Across Mediums

Color is a cornerstone of the Ninjas project. Not only did we leverage the state of the art in Color Theory when picking the Ninja colors, but we also thought through the tech in order to ensure consistent colors across devices and mediums.

The hexadecimal color space is represented by six characters following a hash symbol (#), like #RRGGBB, this is the most widely used format for colors across the entire landscape of digital design, and is the default in HTML websites and applications such as Photoshop.

Examples of different colors using the hexadecimal color space.

Let's break it down: The first two characters represent the red component, the next two represent green, and the last pair represent blue. By combining these red, green, and blue components, a spectrum of colors comes to life, each pair ranging from 00 to FF. This range provides 256 shades for each color component, culminating in 16,777,216 possible colors.

It's important to note that other color systems exist outside of RGB. Take CMYK, for instance, which includes 16,000 colors predominantly used in printing where shades of ink are limited. Pantone is an even more limited system with 2,390 colors, intended to guarantee maximum consistency across various mediums.

Now, back to the RGB/HEX. Modern High Dynamic Range (HDR) monitors boast over a billion colors. Naturally, you'd assume they cover all 16.7 million RGB/HEX colors. Surprisingly, that's not the case. Look at the below image to see what I mean.

This image contains 9 different hexadecimal colors. For how many can you see where one color ends and the other begins?

Even on high-end displays like Apple's Retina, numerous hexadecimal colors remain indistinctive, with the device approximating the nearest visible shade. This arises because hexadecimal (or sRGB), Apple P3, and HDR represent distinct color spaces. Each has its unique spectrum, with some colors in the hexadecimal space falling outside what HDR and Apple P3 can display.

When purchasing a new monitor, you might encounter specifications like "Viewsonic VP2785 (4k 99% Adobe RGB, 96% DCI-P3, 100% Rec. 709)." These labels are crucial for understanding the color spaces the monitor supports – Adobe RGB for photography, DCI-P3 for cinema (with Apple P3 based on this), and Rec. 709 for standard TV.

The complexity of color spaces is often illustrated through charts showing the visible color spectrum, with standards like HDR, sRGB, and Adobe RGB being subsets of this spectrum, represented by intersecting triangles. Indeed, the world of color is a deep and intricate rabbit hole.

How colors across different color spectrums overlap and intersect in the visible color spectrum.

So, what does this all mean for designers, especially as displays continue to evolve in accuracy? Rather than relying on the more traditional methods of guesswork and trial-and-error using the color picker tool, we took an approach combining hexadecimal codes, mathematics, and coding.

Our process began with a Pantone yellow (our brand color) to ensure exactness in printing. Then, using color algorithms, we generated analogous colors, evenly spaced out along the color space. We chose the HCL color model (Hue, Chroma, Luminance) over HSL (Hue, Saturation, Lightness) for its alignment with human color perception.

After crafting a mathematically precise palette, we hardcoded these hexadecimal codes into the SVG. Why? This method is more dependable compared to directly working with PNGs. This is because when PNGs are saved, uploaded, or sent, especially on social media websites, they often undergo automatic compression. These varying compression models can unpredictably alter or affect the colors in the images, leading to inconsistencies and deviations from the intended hues. Our approach, therefore, circumvents these potential alterations with a more controlled method.

In conclusion, as displays become more sophisticated, a careful blend of science, mathematics, and artistic insight is key to future-proofing colors. By delving deep into the world of color spaces and embracing the versatility of formats like SVG and HTML Canvas, designers can ensure their creations remain vibrant and true, no matter the medium or technology.