CSS Colors
Explore ways to specify colors: Names, RGB, HEX, HSL.
1Color Formats
You can specify colors using keywords, hex codes, or functions like rgb() and hsl().
h1 { color: Tomato; }
h2 { color: #ff6347; }
h3 { color: rgb(255, 99, 71); }2Understand it in a real interface
A color value does not describe how readable a design is by itself. The surrounding background, transparency, font size, and weight all influence the result. Keep a palette small enough to give each color a purpose, and accompany status colors with a text explanation or another visible cue.
3Try it yourself
Style a notice with a foreground and background color. Try the same foreground on a darker background, then reduce the background opacity. Read a full sentence rather than only a large heading. Check the pair with a contrast checker before using it for important text.
Finished reading?
Mark this topic as complete to track progress.