Color is an important part of online identity and web development, as you can see from Paul Hebert Designs’ graphic, The Colors Used by the Ten Most Popular Sites.
What's the most popular color on the internet? @boingboing & Paul Hebert explain: https://t.co/JNwPi2erRu
— Citizen, Inc. (@pluscitizen) September 19, 2016
Get the TechPortfolio briefing
The month’s fintech and funding news, plus new tools for founders, in one short email.
Brand colors do a lot of quiet work. A site’s palette is often the first thing people recognize, long before they read a word. But for developers, color isn’t just a design choice handed down in a style guide. It’s a set of numbers that has to be written, stored, changed and checked, and knowing how those numbers work makes all of that easier.
Why Screen Color Is Additive
It’s important to remember that when displayed on a monitor, color is additive. This means that mixing multiple colors together will create white, explains Sarah Drasner in A Nerd’s Guide to Color on the Web.
That’s the opposite of what most of us learned with paint. Paint and printer ink are subtractive: each pigment absorbs some light, so mixing more of them pushes you toward a muddy dark brown or black. A screen works the other way round. Each pixel is made of tiny red, green and blue lights, and turning them all up to full brightness gives you white. Turning them all off gives you black.
This is also why a design can look different on screen and in print. A bright, saturated color made from light may have no exact match in ink, so designers preparing work for both often have to adjust their palette.
Two Ways to Write a Color
Two different ways of expressing additive color are:
- RGB (Red, Green and Blue): Mixing the three can be used to create all colors. This is expressed in hexadecimal with one byte for each color: RRGGBB. For example, the hexadecimal for TechPortfolio red is #FF5145.
- HSL (Hue, Saturation and Lightness): Hue is on a 360° scale, saturation is the strength of a color, and lightness is proximity to white.
https://www.instagram.com/p/BIoAWK9A6D4/
Each byte in a hex code runs from 00 to FF, which is 0 to 255 in everyday numbers. So #FF5145 means red is at full strength (255), green is at 81 and blue is at 69. That’s why the result reads as a warm, slightly orange red. The same color can be written in CSS as rgb(255, 81, 69).
HSL describes color the way people tend to think about it. Hue is the position on the color wheel, so 0° is red, 120° is green and 240° is blue. Saturation and lightness are percentages. The big advantage for developers is that it’s easy to adjust: to make a darker version of a button color for its hover state, you can keep the hue and saturation and just lower the lightness. Doing the same thing by editing a hex code means juggling three numbers at once.
Contrast Is What Makes Color Readable
“A color is only a color in reference to another color,” says Drasner. Yellow text is easy to see against a black background, but not against a white one.
Contrast isn’t only a question of taste. The Web Content Accessibility Guidelines (WCAG), the international standard for accessible websites, set minimum contrast ratios between text and its background. To meet the commonly required AA level, normal text needs a ratio of at least 4.5:1, and large text at least 3:1. The stricter AAA level asks for 7:1 for normal text.
Getting this right helps everyone, not just people with low vision or color blindness. Text with poor contrast is hard to read on a phone in bright sunlight, too. It’s also worth not relying on color alone to carry meaning. A form error shown only in red can be missed, so pairing color with an icon or a short message is safer.
Some tools you can use to measure visibility include Colorable and Contrast-A.
How CSS Color Has Changed Since 2016
RGB and HSL are still everywhere, but CSS has gained more options since this article first ran. The CSS Color Module Level 4 added new color spaces, including lab(), lch() and oklch(). By 2023, Chrome, Edge, Firefox and Safari all supported them.
The appeal of a space like OKLCH is that it’s designed around how people actually perceive color. In HSL, two colors with the same lightness value can look very different in brightness, since a pure yellow appears far lighter than a pure blue. Perceptual spaces aim to fix that, which makes it easier to build consistent palettes and predictable contrast. Newer screens can also show a wider range of colors than the old sRGB standard, and these spaces let developers use them.
For most projects, hex and HSL still do the job. But if you’re building a design system with many shades, the newer formats are worth a look.
For more tips on color and how to manipulate it, check out the guide from CSS-Tricks.
Frequently Asked Questions
What does it mean that color on a monitor is additive?
On a monitor, mixing colors together creates white, as Sarah Drasner explains in A Nerd's Guide to Color on the Web. Each pixel is made of red, green and blue lights, so turning them all to full brightness gives white.
How does a hex color code like #FF5145 work?
A hex code uses one byte for each of red, green and blue, in the form RRGGBB, with each byte running from 00 to FF (0 to 255). TechPortfolio red, #FF5145, has red at 255, green at 81 and blue at 69.
Why is HSL useful for developers?
HSL describes a color by hue, saturation and lightness, which makes it easy to adjust. A developer can create a darker hover color by keeping the hue and saturation and lowering only the lightness.
What contrast ratios do the accessibility guidelines require?
To meet WCAG level AA, normal text needs a contrast ratio of at least 4.5:1 with its background and large text needs at least 3:1. The stricter AAA level asks for 7:1 for normal text.
What new color formats has CSS added since 2016?
The CSS Color Module Level 4 added color spaces including lab(), lch() and oklch(), and by 2023 Chrome, Edge, Firefox and Safari all supported them. Perceptual spaces like OKLCH make it easier to build consistent palettes.