Each day, we interact with numerous interfaces, and each experience provides substantial feedback. While each of us may process color differently, that doesn’t change the fact that color is deeply embedded into the interfaces we create the world around us.
In the interface course, we discussed how we leverage color to guide action and carry meaning in our design solutions. What we didn’t discuss is how to apply color online.
While all the solutions we’ll discuss here are CSS-based, there isn’t a single ‘best’ way to apply color. Instead, we tend to adopt the team’s preferences we’re working with or the project we’re working on. That means knowing more than one way to work with color in CSS is a basic necessity.
Creating and applying colors
There are two primary methods for creating the colors that appear, additive and subtractive. Printed items are created via a subtractive process that reduces the amount of light reflected from the surface of the document. As more color is added, less light is reflected. The primary color mode used for printing is CMYK.
Colors created on electronic devices work oppositely. A dark surface represents the absence of color. As colors are illuminated, the amount of light reflected increases — hence, an electronic screen’s colors are always created by an additive process.
Applying color can often be a challenge for those new to CSS because the color property doesn’t behave as you might initially expect.
In the example above, notice that the color property applies color to the typography present while filling an element with color utilizes the background or border properties. Also, the shape you are attempting to fill must have a size declared or have content within the shape’s boundaries that provide size.
The RGB Show
The words you are reading are likely being delivered on an electronic screen that contains thousands of pixels. Each pixel generates three colors — red, green, and blue. The pixels producing those colors are quite small, but they collectively produce all the colors and images you see onscreen.
The syntax that governs the RGB color mode reflects the structure of the pixels that produce the colors. Three numbers, each reflecting the presence of a specific color (red, green, blue) on a scale from zero (absence of color) to 255 (total saturation of color). If you find the zero-to-255 scale confusing, you can also replace it entirely with a trio of percentages tied to the colors described.
Source: newpragmatic.com
Historically, RGBA was utilized to control the transparency of the color displayed. The’ A’ stood for Alpha channel and the syntax closely resembled RGB, only adding an argument to the original trio. While RGBA is supported as a legacy format, RGB now supports an optional Alpha channel argument for most browsers by appending an additional comma-separated value.
Alpha channels operate on a scale from 0-to-1 or 0-to-100%. The examples below demonstrate the different ways you can append arguments to RGB and RGB(a) color modes.
Hex alternative
A bit more compact than the preceding RGB syntax, Hex is short for hexadecimal. This combination of numbers (0-9) and letters (A-F) produces a scale that runs from 0-F with zero representing the lowest possible value and F the highest. Each color is represented by a pair of characters, which can be shortened to a single character if they are the same character.
Source: newpragmatic.com
Hex codes are still an additive color method, so higher characters represent the presence of more color. The examples below display a range of colors and their shorthand equivalents.
Like RGB, Hex codes now support an optional fourth value that represents the alpha channel. As shown in the example above, this extra value controls the transparency of the color that has been applied. This works on most major browsers, with Edge being the notable exception.
Presets and custom variables
The ability to use common color names for color values has always been part of CSS. While the number of named options has expanded significantly over the years, these selections’ consistency is questionable. The W3C documentation calls direct attention to this problem, pointing out that darkgray is lighter than gray and lightpink is darker than pink.
For me, the issue of named colors is less about consistency and more about choice. Simply using red in a design will provide me with access to the color red, but it likely won’t be the red I am looking for — and there is no way to adjust it.
However, that doesn’t mean that I don’t like using name values, but I prefer to create my own. Creating custom properties using CSS variables is straightforward and widely supported.
As illustrated in the example above, custom CSS variables require two steps. This is best done at the :root of the document to allow for maximum access for the document author. First is the declaration of the variable, which is done by appending -- to the name of the variable itself. Next, the variable must be applied as a value elsewhere in the document using the var(--color-name) syntax.
Gradients
So long as there are design trends, gradients will rise and fall in popularity. Luckily, CSS makes it easy to create great-looking, refined gradients. We’ll focus on using the linear-gradient and radial-gradient properties in the examples that follow. As the names imply, these produce different types of gradients. Linear moves in a straight line, while radial produces a circular display. In each instance, you can include optional placement instructions in addition to any colors you want to use. The examples below provide a brief glimpse into how each property works.
In each instance, a gradient can be created by adding two colors as values. You can add more colors, just insert a comma between each value added. Those colors can be in any format, including the custom variables we just covered in the preceding section.
To control the gradient’s direction, optional parameters can be added. For a radial-gradient, you can also determine the gradient’s position and the general shape that it takes (circle or ellipse).
If that wasn’t enough, we can also stack these gradients on top of one another to create truly custom creations. Remember to use somewhat transparent color values. The examples above utilize the RGB syntax we covered earlier in this section.
Resources for review
Please use the following items to guide your exercise attempt:
Exercise
Length: About one hour to complete.
The application of color can have a direct impact on the structure of solutions you create. This series of exercises will challenge your ability to create color utilizing specific color modes while working with transparency and gradients.
As with prior exercises in this series, you will not need to modify the HTML structure to recreate the solution.
-
Exercise 1: Making Rainbows - CodePen | Finished image
-
Exercise 2: RGB to Hex conversion - CodePen | Finished image
///
Once complete, update your Program Journal with a link to this exercise’s final output. Post your Journal in the #Feedback-Loop channel for review.
///
Up next CSS Grid