Colors Schemes in Depth
<!DOCTYPE html> <html> <head> <style> :root { --triadic-base: hsl(40, 70%, 55%); --triadic-accent-1: hsl(160, 70%, 40%); --triadic-accent-2: hsl(280, 70%, 45%); } .swatch-base { background-color: var(--triadic-base); } .swatch-accent-1 { background-color: var(--triadic-accent-1); } .swatch-accent-2 { background-color: var(--triadic-accent-2); } </style> </head> <body> <div class="swatch-base">Base</div> <div class="swatch-accent-1">Accent 1</div> <div class="swatch-accent-2">Accent 2</div> </body> </html>