🎨
Color & Design Cheatsheet
HEX, RGB, HSL, WCAG contrast ratios, common named CSS colors reference.
Color Format Reference
| Format | Example | Range | Notes |
|---|---|---|---|
| HEX | #3A5FCD | #000000–#FFFFFF | Most common in CSS. 6 or 3 chars. |
| HEX + Alpha | #3A5FCD80 | #00000000–#FFFFFFFF | 80 = 50% opacity in hex |
| RGB | rgb(58, 95, 205) | 0–255 per channel | Additive color model |
| RGBA | rgba(58,95,205,0.5) | 0–255, alpha 0–1 | With transparency |
| HSL | hsl(228, 57%, 52%) | H:0-360, S/L:0-100% | Hue, Saturation, Lightness |
| HSLA | hsla(228,57%,52%,0.5) | H:0-360, S/L:0-100%, A:0-1 | With transparency |
| HWB | hwb(228 10% 20%) | H:0-360, W/B:0-100% | CSS Color 4 |
| LCH | lch(45 60 228) | L:0-100, C:0-150, H:0-360 | Perceptually uniform |
WCAG Contrast Ratios
| Level | Min Ratio | Applies To |
|---|---|---|
| AA — Normal text | 4.5:1 | Text under 18pt (or 14pt bold) |
| AA — Large text | 3:1 | Text 18pt+ (or 14pt+ bold) |
| AA — UI components | 3:1 | Input borders, focus rings, icons |
| AAA — Normal text | 7:1 | Enhanced accessibility |
| AAA — Large text | 4.5:1 | Enhanced large text |
Contrast ratio of 1:1 = no contrast; 21:1 = black on white (maximum).
Named CSS Colors — Common Picks
crimson
tomato
darkorange
gold
forestgreen
steelblue
slateblue
orchid
coral
teal
navy
dimgray