{"id":245208,"date":"2016-09-12T06:50:54","date_gmt":"2016-09-12T13:50:54","guid":{"rendered":"http:\/\/css-tricks.com\/?p=245208"},"modified":"2024-08-12T15:03:19","modified_gmt":"2024-08-12T21:03:19","slug":"nerds-guide-color-web","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/nerds-guide-color-web\/","title":{"rendered":"Working With Colors Guide"},"content":{"rendered":"\n

There are a lot of ways to work with color on the web. I think it\u2019s helpful to understand the mechanics behind what you\u2019re using, and color is no exception. Let’s delve into some of the technical details of color on the web.<\/p>\n\n\n\n\n\n\n

Color mixing<\/h3>\n\n\n

A huge part of working with color is understanding that the way that you used color as a child doesn\u2019t work the same as how you use color on a computer because of color mixing. As a child, you\u2019re working with paint. Paint and inks from a printer have tiny particles called pigments that mix together and reflect to present color to your eye. This is subtractive color mixing<\/strong>. The more colors you add to it, the darker it becomes, until we get brown. Primaries are close to what you\u2019re used to: red, yellow, blue. But when you mix these colors with subtractive color mixing, you arrive at brown.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

On a computer (or any monitor), we\u2019re working with light<\/em>. Which means that when all of the colors mix together, they make white<\/em>. Before Isaac Newton\u2019s famous prism color experiment<\/a>, color was believed to be contained within objects rather than reflected and absorbed from the object. Isaac Newton used a prism to prove his theory that sunlight or bright white light was in fact several colors by using the prism to split apart the colors to make a rainbow, and then subsequently using a prism to attempt to further split the blue. The blue did not split, showing that the color wasn\u2019t within the prism, but rather that the prism was splitting the light. This means that in additive color mixing<\/strong>, the type of color mixing you get in a monitor, red green and blue can be used to produce all colors, or rgb. In this type of mixing, red and green create yellow.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Monitors are many combinations of small bits of light combined that resonate to create a myriad of colors. Resolution refers to the number of individual dots of color, known as pixels, contained on a display. Before we had monitors, artists were using this type of light frequency. Seurat and the Pointillists used red and green to create yellow in paintings like \u201cLa Grande Jatte\u201d<\/em> (though he preferred the term chromo-luminarism. Others called it divisionism<\/a>) This type of painting was created under the belief that optical mixing created more pure resonance in your eye that traditional subtractive pigment color mixing.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Monitors are made in a few different display modes that change the way we perceive color through them. We express this the term \u201ccolor bit depth\u201d. The number of colors that can be displayed at one time is determined by this color bit depth. If we have a bit depth of 1, we can produce two colors, or monochrome. Bit depth of two levels creates 4, and so on until we reach a bit-depth of 32, though commonly monitors that project the web have 24 bit-depth density and 16,777,216 colors which is True Color and Alpha Channel.<\/p>\n\n\n\n

We call this True Color<\/strong> because our human eyes can discern 10,000,000 unique colors, so 24-bit depth will certainly allow for this. In this 24-bit depth, 8 bits are dedicated to red, green, and blue. The rest are used for transparency or alpha channels.<\/p>\n\n\n\n

Let\u2019s use this information to unpack our available color properties on the web.<\/p>\n\n\n

Color values<\/h3>\n\n

RGB Values<\/h4>\n\n\n

The last section illustrates what rbga(x, x, x, y);<\/code> communicates, but let\u2019s break that down a bit more, and show some other properties and their uses. In terms of web color values in an RGB channel, we specify color on a range from 0-255.<\/p>\n\n\n\n

x is a number from 0-255\ny is a number from 0.0 to 1.0\nrgb(x, x, x); or rgba(x, x, x, y);\n\nExample: rbga(150, 150, 150, 0.5);<\/code><\/pre>\n\n\n
Hex Values<\/h4>\n\n\n
Hex colors are a slightly different format to represent the values in the same way. Hex values are probably the most common way developers designate color on the web.<\/p>\n\n\n\n
If you recall that a byte is 8 bits<\/strong>, each Hex color or number represents a byte. A color is specified according to the intensity of its red, green and blue components, so we call it a triplet, with each expressed in two places. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. Byte 1 is Red, byte 2 is green, and byte 3 is blue. Hexadecimal<\/strong> is named this because it uses a base 16 system<\/strong>. The values use ranges from 0-9 and A-F, 0 being the lowest value and F being the highest, or #00000<\/code> being black and #FFFFFF<\/code> being white.<\/p>\n\n\n\n
For triplets with repeated values, you can eliminate the repetition by writing in shorthand, for instance, #00FFFF<\/code> becomes #0FF<\/code>. This system is easy for computers to understand, and it pretty short to write, which makes it useful for quick copy paste and designation in programming. If you\u2019re going to work with colors in a more involved way, though, HSL is a little bit more human-readable.<\/p>\n\n\n
HSL Values<\/h4>\n\n\n
Hsl values work with similar semantics and ranges as rgb, but rather than working with values as the monitor interprets the colors, hsl values work with hue, saturation, lightness values. This looks syntactically similar to rgb values but the ranges are different. This system is based on a Munsell color system<\/a> (he was the first to separate out color into these three channels, or create a three dimensional system based on mathematical principles tied to actual human vision).<\/p>\n\n\n\n
\"\"\/
Hue, Saturation and Lightness can be represented as a three-dimensional model.<\/figcaption><\/figure>\n\n\n\n
Hue rotates in 360 degrees, a full circle, while saturation and lightness are percentages from 0 to 100.<\/p>\n\n\n\n
x is a number from 0 - 360\ny is a percentage from 0% to 100%\nz is a number from 0.0 to 1.0\nhsl(x, y, y); or hsla(x, y, y, z);\n\nExample: hsla(150, 50%, 50%, 0.5);<\/code><\/pre>\n\n\n\n
It\u2019s a relatively easy change (around 11 lines of code, to be precise) for the browsers to exchange between rgb and hsl values, but for us humans, the use of hsl can be a lot easier to interpret. Imagine a wheel, with dense and saturated content at the center. This demo<\/a> does a pretty good job of showing how it\u2019s expressed.<\/p>\n\n\n\n
\"\"\/
Chris also made a nifty tool a few years back called the hsla explorer, which you can check out here<\/a>.<\/figcaption><\/figure>\n\n\n\n
If you don’t feel particularly skilled working with color, hsla() allows for some pretty simple rules to create nice effects for developers. We cover more about this in the generative color section below.<\/p>\n\n\n
Named Colors<\/h4>\n\n\n
Named colors are also available to us as developers. Named colors, though, have a reputation for being difficult to work with due to their imprecision. The most notable and \u201cfamous\u201d examples are that dark grey is actually lighter than grey and lime and limegreen are totally different colors. There\u2019s even a game where you can try to guess named colors on the web<\/a>, made by Chris Heilmann<\/a>. Back in the old days, chucknorris<\/code> was a blood red color<\/a> (it’s only supported in HTML now as far as I can tell), but that was my favorite. Named colors can be useful for demonstrating color use quickly, but typically developers use Sass or other preprocessors to store color values by hex, rgba, or hsla and map them to color names used within the company.<\/p>\n\n\n
Color Variables<\/h4>\n\n\n
A good practice is to store color variables and never use them directly<\/strong>, mapping them instead to other variables with more semantic naming schemes. CSS has native variables, like:<\/p>\n\n\n\n
:root {\n  --brandColor: red;\n}\n\nbody {\n  background: var(--brandColor);\n}<\/code><\/pre>\n\n\n\n
But they are fairly new and haven’t made their way<\/a> into Microsoft browsers at the time of this writing.<\/p>\n\n\n\n
CSS preprocessors also support variables, so you can set up variables like $brandPrimary<\/code> to use through your code base. Or a map<\/a>:<\/p>\n\n\n\n
$colors: (\n  mainBrand: #FA6ACC,\n  secondaryBrand: #F02A52,\n  highlight: #09A6E4\n);\n\n@function color($key) {\n  @if map-has-key($colors, $key) {\n    @return map-get($colors, $key);\n  }\n\n  @warn \"Unknown `#{$key}` in $colors.\";\n  @return null;\n}\n\n\/\/ _component.scss\n.element {\n  background-color: color(highlight); \/\/ #09A6E4\n}<\/code><\/pre>\n\n\n\n
Remember that naming is important here. Abstract naming is sometimes useful so that if you change a variable that was representing a blue color to an orange color, you don\u2019t have to go through and rename all of your color values. Or worse yet, put up a sign that says “$blue is orange now.<\/em>” *sad trombone noise*<\/p>\n\n\n
currentColor<\/h4>\n\n\n
currentColor<\/code> is an incredibly useful value. It respects the cascade, and is useful for extending a color value to things like box shadows, outlines, borders, or even backgrounds.<\/p>\n\n\n\n
Let\u2019s say you have created a div and then inside it another div. This would create orange borders for the internal div:<\/p>\n\n\n\n
.div-external { color: orange; }\n.div-internal { border: 1px solid currentColor; }<\/code><\/pre>\n\n\n\n
This is incredibly useful for icon systems, either SVG icons for icon fonts. You can set currentColor<\/code> as the default for the fill, stroke, or color, and then use semantically appropriate CSS classes to style the sucker.<\/p>\n\n\n
Preprocessors<\/h4>\n\n\n
CSS preprocessors are great for tweaking colors. Here’s some links to different preprocessors documentation on color functions:<\/p>\n\n\n\n