W3.CSS ColorsLesson 60Free preview
W3.CSS Color Generator
This lesson is part of W3.CSS · All levels
Summary
Color generators help create palette in seconds based on rules of harmony such as complementary and analogue. The result is ready-to-use hex, RGB, or HSL code that can be directly pasted into CSS. Once the palette is ready, keep checking the contrast ratio to make sure the color combination is appropriate.
Key points
- The hex code is written #RRGGBB with six hexadecimal digits
- The complementary color is right in front of the color wheel
- HSL is Hue, Saturation, Lightness
- Always test the contrast of text and background after producing a palette
- Save the output of the generator as a CSS variable for easy replacement
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.