Colors
Bring your webpages to life with CSS colors using names, HEX, RGB, and HSL.
background: rgb(7,26,53);
border: hsl(204,100%,50%);
paint the web
>_ Adding Color With CSS
CSS lets you control the colors of text, backgrounds, borders, buttons, links, cards, and almost every visual part of a webpage.
There are several ways to describe a color in CSS. Four common methods are color names, HEX, RGB, and HSL.
Color Names
Human-readable names such as blue, red, white, or green.
HEX
A hexadecimal color value beginning with the # symbol.
RGB
Builds a color from red, green, and blue values.
HSL
Describes hue, saturation, and lightness.
>_ Text and Background Colors
The color property controls text color, while background-color controls an element’s background.
color: #20a464;
}
body {
background-color: #f5f9fc;
}
>_ Color Names
CSS recognizes many built-in color names. They are easy to read and useful while learning.
color: green;
}
p {
color: navy;
}
>_ HEX Colors
HEX colors begin with a # symbol followed by hexadecimal characters.
You’ve already seen several of them throughout mC0de.
#071a35
Dark navy — used throughout the mC0de design.
#009cff
Bright cyan-blue used for accents.
#20e778
mC0de’s bright terminal-style green.
#ffffff
White — all red, green, and blue channels at maximum.
>_ RGB Colors
RGB represents the amount of red, green, and blue used to create a color.
Traditional RGB channel values range from 0 to 255.
background-color: rgb(7, 26, 53);
color: rgb(255, 255, 255);
}
>_ HSL Colors
HSL describes color using Hue, Saturation, and Lightness.
Hue
The base color, represented around a color wheel.
Saturation
How vivid or muted the color appears.
Lightness
How light or dark the color appears.
hsl(204, 100%, 50%)
An example of a vivid blue color.
There isn’t one “correct” color format.
#009cff,
rgb(...), and
hsl(...) can all describe colors.
Use the format that makes sense for your project.
Create a Color Theme
Use several CSS color formats to design a simple profile card.
- ✓ Give the page a background color.
- ✓ Use a HEX color for the main heading.
- ✓ Use RGB for the card background.
- ✓ Use HSL for another color on the page.
- ✓ Make sure the text has enough contrast to remain readable.
- ✓ Experiment with at least one color value after your design works.
Colors Challenge
What You’ve Learned
color controls text color.
background-color
controls an element’s background.
# symbol.
Nice work!
Finished this lesson? Mark it complete to track your progress.