The HSL color model is one of the least used, but gaining traction because can be more intuitive to use when working with shades and color adjustments.
The first and easiest way to specify a color is using one of the 140 predefined color specified in CSS.
The original 17 are listed below. An unsightly bunch.
| Color | Keyword | Hex Value |
|---|---|---|
| black | #000000 | |
| gray | #808080 | |
| silver | #c0c0c0 | |
| white | #ffffff | |
| maroon | #800000 | |
| red | #ff0000 | |
| purple | #800080 | |
| fuchsia | #ff00ff | |
| green | #008000 |
| Color | Keyword | Hex Value |
|---|---|---|
| lime | #00ff00 | |
| olive | #808000 | |
| yellow | #ffff00 | |
| navy | #000080 | |
| blue | #0000ff | |
| teal | #008080 | |
| aqua | #0000ff | |
| orange | #ffa500 |
Clearly most of these colors are unsuitable for normal web design. Color keywords are most useful for testing and demonstration purposes (like in these pages).
All 140 color keywords are listed here in alphabetical order. You can also find more helpful listings at these sites:
- 147 Colors
- HTML Color Codes: Color Names
You can also view a printout of all the swatches on pages 304-305 in Learning Web Design.
RGB Color Values
Most of you have probably heard about CMYK values for print design. RGB, which stands for red, green, and blue is the color model that monitors use. Since in web design we’re primarily concerned with what web pages look like on screens, RGB is the color model we use.
- RGB colors have three values that represent: red, green, and blue
- Each value can be a number between 0 and 255 or a percentage from 0 to 100%
- A value of 0 means none of that color is being used
- A value of 255 or 100% means all of that color is being used
- A 0 for all three color values will be black
- A 255 or 100% for all three color values will be white
The CSS syntax for using RGB colors is a little different than we’ve seen before. In the example below, we are styling:
- A black paragraph
- A white h1
- A purple unordered list
p < color: rgb(0, 0, 0); >/* black */ h1 < color: rgb(255, 255, 255); >/* white */ ul < color: rgb(128, 80, 200); >/* purple */ /* Percentages work too */ h1 < color: rgb(100%, 100%, 100%); >/* white */
RGBA Color Values
RGBA is all the rage.
Seriously though, it’s just like RGB, except with the addition of a fourth value: the .
The alpha value represents the level of transparency that the rgb color should have. It can be a value from 0 to 1 or a percentage from 0 to 100% . Note that you must specify RGBA instead of RGB .
10 color meanings: the psychology of using different colors
Color is one of the most powerful tools in your design toolkit. Learn how to harness the power of color symbolism by exploring different color meanings.
No items found.
Biologist Timothy H. Goldsmith explained that, “color is not actually a property of light or of objects that reflect light. It is a sensation that arises within the brain.”
And those sensations can be incredibly powerful. Colors can change our mood, impact our memory, and even increase or decrease our heart rate.
Wearing red can tip the scales in your favor if you’re an athlete facing a well-matched competitor. Blue light therapy is frequently used to reduce the effects of Seasonal Affective Disorder. And one study even found that suicide rates decreased by an astounding 74% at train stations in Japan when blue lights were installed.
We don’t just see colors, we feel them — which makes them one of the most powerful tools in a designer’s toolkit. When you familiarize yourself with colors and their meanings, you can lean into color psychology to create designs that elicit the reactions and feelings you want.
Whether you’re choosing colors for a logo design or simply color-coding a spreadsheet, it’s important to choose colors that are aligned with your message and not ones that could work against you.
Color in history
Dating back to early civilizations, color symbolism is a powerful force that’s been reinforced over millennia. Red has served as a symbol of evil since at least 4,000 B.C. Red was commonly used as an accent color in ancient Egyptian hieroglyphs to denote danger or evil — and it remains a primary team color of the New Jersey Devils — an NHL hockey team — today.
There’s evidence to suggest that color meanings are deeply connected to survival instincts, and not just in humans. Research led by neuroscientist Jerald D. Kralik found that some monkeys share our caution around the color red. And a separate study found that elephants can identify potential predators using a combination of color cues and scent.
Given the mighty powers colors possess, it’s no surprise that all sorts of industries leverage color to influence potential customers. Food purveyors, for example, have been using color to make their products look more appealing to shoppers since at least the time of the Romans. According to an article published in Food Safety Magazine, “wine was artificially colored beginning in at least 300 BC.”
The varied meanings of color
For designers, marketers, and other professionals looking to harness the power of color, it’s important to first consider what each color means to different people depending on past experiences that have impacted their life.
Here are some important factors that influence color interpretations:
- Geography: Colors carry different significance in different countries or regions. In America, the color predominantly associated with mourning or grief is black. But in China white is more commonly associated with mourning and often worn at funerals by family of the deceased.
- Current events: Pop culture and current events can have a strong impact on the way we relate to different colors.The 2000 presidential election in America, for instance, cemented political associations for Democrats as “blue” and Republicans as “red.”
- Religious affiliation: Depending on which religion you practice, you may interpret purple as a symbol of suffering, royalty, or intuition, among other things.
- Societal groups: Rainbow colors, for example, are often used as a symbol of inclusion and support for the LGBTQ community.
- Team affiliation: Many people feel an affinity to the color combinations associated with their alma mater or their favorite sports team. And they can have a distaste for the colors of their team’s greatest rival.
- Generation: Members of the same generation tend to feel nostalgia for similar color palettes.
So, before you commit to brand colors, do your own market research. If your ideal customer persona is mostly Gen Xers who live in Asia, you’ll likely want to prioritize different colors than if your primary audience are seniors in the US.
The modern web design process
Discover the processes and tools behind high-performing websites in this free ebook.
