CSS supports a wide variety of colors.
We can change the color of text with
color property and background with
I. Colors in CSS
There are four ways to represent color in CSS:
1. Named colors
There are 147 named colors. For example: blue, yellow, white, etc.
2. Hexadecimal or hex colors
A hex color begins with a hash character (#) which is followed by three or six characters. They could be numbers from 0 to 9 or letters from A to F.
The Hex codes are made up of 3 channels: red, blue and green. When we combine different digits from each channels, we have a color
For each channel, 0 represents the darkest shade while F represents the lightest shade.
For example: #BC1823.
RGB colors use the rgb() syntax with one value for red, one value for blue and one value for green.
RGB values range from 0 to 255. For example: rgb(5, 150, 20).
HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is).
Hue ranges from 0 to 360 and saturation and lightness are both represented as percentages: hsl(120, 20%, 50%).
You can add opacity to color in RGB and HSL by adding a fourth value, a, which is represented as a percentage.
II. Color theory
1. The Color Wheel
It’s comprised of three color groups: primary, secondary and tertiary.
- Primary colors are red, blue and yellow.
- Secondary colors are created by mixing two primary colors, forming green, orange and purple.
- Tertiary colors are formed when mixing a secondary and primary. For example:
- Red-orange (Vermillion)
- Yellow-orange (Amber)
- Yellow-green (Chartreuse)
- Blue-green (Teal)
- Blue-purple (Violet)
- Red-purple (Magenta)
We can use Adobe Color CC and Cloudflare to help generate color schemes.
HSLA is the most semantic system of setting colors with CSS. Being semantic provides more direct control over the color scheme, and more direct ability to manage contrast and create related color schemes.
color: hsla(34, 100%, 50%, 0.1); /* HSLA*/
Here is the meaning of each value
- First value is Hue. This is expressed as the angle in degrees around the color wheel.
- Saturation refers to the intensity or purity of that hue. Colors with full saturation (100%) are the color itself, colors with no saturation (0%) are completely grayscale.
- Lightness refers to the lightness of the color. 0% is black, 100% is white.
- A, or alpha, refers to the opacity. 0% is fully transparent, 100% is fully opaque.
3. Warm colors
Warm colors range between red and yellow. They presents a feeling of aggression and are considered bold.
background-color: hsla(25, 100%, 50%, 1);
4. Cool colors
Cool colors range between blue, purple and green. They also include gray. They bring a feeling of calming, soothing nature.
background-color: hsla(220, 100%, 50%, 1);
5. Tints and Shades
Tints occur when white is applied to a color, adding or increasing the lightness of a hue.
Shades are created when black is added to a color, which decreases the lightness of a hue.
6. Color contrast
When applying color to your designs, you should ensure contrast levels to provide clarity for the elements on your page.
7. Color Schemes
Harmonizing colors will enable you to create elegant and usable designs.
Color schemes (or color palettes) are the result of pairing two or more colors together.
- Monochromatic: Each color in the scheme is from the base color. It’s important to select a much lighter and much darker shade of the main color.
- Complementary: It utilizes colors opposite from each other on the color wheel.
- Analogous: The schemes apply three or more colors that are adjacent to each other on the color wheel.
- Triadic: The schemes consist of three colors that are equidistant from each other on the color wheel.
8. Color meaning
- Red: Passionate, energetic, angry
- Orange: Optimistic, playful, fun
- Yellow: Welcoming, intellectual, impatient
- Green: Prosperous, balanced, growing
- Blue: Peaceful, loyal, cold
- Purple: Imaginative, royal, spiritual
- Gray: Unemotional, compromising
- White: Innocent, pure
- Black: Luxurious, powerful
III. Best practices for using Color
- Use neon colors sparingly
- Avoid vibrating colors
- Use backdrops to separate vibrating colors
- Avoid color combinations with insufficient contrast
- It’s essential to Select a dominant brand color and supporting accent colors.
- Use semantic colors for error and success messages
- Use contrast to define sections and differentiate actions
Having a neutral background (any color with low lightness or saturation) is a good base, because it allows you to add high contrast to the parts of the site where you want to direct a user’s attention.
Alternatively, a dark background with light colored text is reasonable as well.
- Keep users in mind when selecting color as many users can experience different types of color blindness:
- red-green, where users have a difficult time differentiating between the red and green colors.
- blue-yellow, where the blues tend to appear greener
- monochromatic, when users can’t see color at all.