Color Format Reference
HEX
``css
color: #FF5733;
color: #F53; /* Shorthand */
`RGB
css
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5); /* With alpha */
`HSL
css
color: hsl(11, 100%, 60%);
color: hsla(11, 100%, 60%, 0.5); /* With alpha */
`When to Use Each Format
| Format | Best For |
HEXQuick inline colors, design specs
RGBProgrammatic color manipulation
| HSL | Creating color schemes, themes |
HSL Color Manipulation
Starting with hsl(200, 80%, 50%):
Lighter: Increase L →hsl(200, 80%, 70%)Darker: Decrease L →hsl(200, 80%, 30%)Muted: Decrease S →hsl(200, 40%, 50%)Complement: Add 180 to H →hsl(20, 80%, 50%)
CSS Custom Properties
`css
:root {
--primary-h: 200;
--primary-s: 80%;
--primary-l: 50%;
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
--primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
}
``