Guide to understanding html color codes in your designs
Summary/Overview
When designing digitally, color is an aspect that is considered both by designers, but also by their tools. As the expressions that tell a system what color is being referred to, html color codes are the building blocks of electronic color display. In other words, they link what is visual with what appears on your screen. While electronic displays cannot measure up to the acuity of the human eye, understanding them gives you greater access to the breadth of available colors, as well as enables you to leverage them for stronger design choices.
What are the primary types of html color codes?
Html color codes include but are not limited to the forms of hex code, RGB, HSL, LAB, HSB, HWB, and CMYK. The type of color code generally corresponds with how it’s being used. For our purposes, we will focus primarily on the popularly used hex codes and RGB due to its relevance as a color model.
RGB color codes
The RGB color model uses the primary colors of light — red, green, and blue — to produce a range of colors. RGB is an additive model, meaning the three kinds of light are added together to provide a certain result. Beyond its application in html coding, the RGB color model predates electronic systems, with its origins in color theory and photography. As an html color code, RGB is formatted in html as “rgb(x, x, x)” and uses values ranging from 0 to 255. As such, the lowest point on this scale — rgb(0,0,0) — will give you black, and the highest point — rgb(255,255,255) — will give you white.
What’s a hex code?
A hexadecimal code or hex code is the concise six-character expression of computer-generated color based on the RGB color model. The six characters use three sections of two-
character alphanumeric code that correspond to red, green, and blue light. As such, there is no informational difference between a hex code and an RGB color code, they are simply different expressions. Conversion between hex code and RGB is possible but requires a formula not relevant to everyday use. Each hex code begins with a hash symbol (“#”) followed by values that can include numbers 0-9 and letters A-F. These codes shift incrementally from lowest intensity #000000 to highest intensity #FFFFFF, or from black to white. With over 16 million combinations possible, there is a wide range of options to display.
Examples of hex code colors
Here are some examples of hex code colors and their corresponding RGB values in Adobe Color:
To create a basic red hex code, we use the highest intensity of red light for the red section of the code, or #FF0000.
To create a basic green hex code, we use the highest intensity of green light for the green section of the code, or #00FF00.
To create a basic blue hex code, we use the highest intensity of blue light for the blue section of the code, or #0000FF.
You’ll notice in these examples that the RGB values reflect only the color of light applied.
Generating a basic purple hex code is a little different because it requires equal intensities of red and blue light, as represented by the hex code #800080. The RGB values are equal in the red and blue fields and at the halfway point of full intensity.
Are there other html color codes?
Yes, these include HSL, LAB, HSB, HWB, CMYK.
- HSL stands for hue, saturation, lightness.
- HSV stands for hue, saturation, value.
- LAB stands for lightness, channel a, channel b (a refers to red and green value and b refers to blue and yellow value).
- HWB stands for hue, whiteness, blackness.
- CMYK stands for cyan, magenta, yellow, and black, based upon the four base colors that are used in printing.
These color models are less commonly used and will not have the same relevance for most users.
How to use HTML color codes? Adobe Color tools and resources you can use:
Managing color codes in Adobe Express
Adobe Express offers automatically generated color palettes that can be customized and easily applied to designs, as well as shuffled between design elements. Hex codes can be both pulled from and entered into the custom color picker represented by the dropper tool.
This enables you to create custom palettes either using image references or by pasting in known hex codes. The app will also automatically provide suggested color themes for text and other elements based on images and colors used in your design. While Adobe Express does not require any html knowledge, if you are using html color tools, such as Adobe Color, you can have more precision in your color selections.
Color code finder
If you want to expand your knowledge of color codes, Adobe Color is a resource you can use to copy and paste hex codes from the color wheel into Adobe Express, as well as generate palettes from an initial color selection. Adobe Color uses hex codes RGB, HSB, and LAB to categorize color. Should the HSB or LAB models be relevant to your needs, this tool easily converts from hex code and RGB.
Color palette selection
Using Adobe Color, you can also generate color schemes that are analogous (composed of colors next to each other on the color wheel), and complementary (colors that are across from each other on the color wheel), among others.
Additional features of Adobe Color
In addition to using the color wheel, you can also upload images to extract color themes, as well as gradients.
In the Accessibility Tools tab of Adobe Color, you can test the contrast ratio between colors for readability depending on font size and boldness, as well as for graphic components, like shapes
This tool also generates suggested contrast ratios that are proximal to chosen colors for easier reading. This section has a feature to test if selected colors are color-blind safe.
So that’s the basics of html color codes and their application in Express and Adobe Color. Now that you have a better understanding, grab that color picker and start designing.
