Colors Schemes in Depth
<!DOCTYPE html> <html> <head> <style> :root { --hue: 210; --color-base: hsl(210, 60%, 50%); --color-light: hsl(210, 60%, 75%); --color-pale: hsl(210, 40%, 90%); --color-dark: hsl(210, 60%, 25%); --color-muted: hsl(210, 20%, 50%); } .swatch-base { background-color: var(--color-base); } .swatch-light { background-color: var(--color-light); } .swatch-pale { background-color: var(--color-pale); } .swatch-dark { background-color: var(--color-dark); } .swatch-muted { background-color: var(--color-muted); } </style> </head> <body> <div class="swatch-base">Base</div> <div class="swatch-light">Light</div> <div class="swatch-pale">Pale</div> <div class="swatch-dark">Dark</div> <div class="swatch-muted">Muted</div> </body> </html>