Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HSL Colors</title> <style> .row { display: flex; gap: 4px; margin: 8px 0; } .chip { flex: 1; height: 50px; border-radius: 4px; display: flex; align-items: flex-end; padding: 4px; font-size: 0.7rem; font-family: monospace; } </style> </head> <body> <h1>HSL Color Variations</h1> <h2>Shades of Blue (hue 210°)</h2> <div class="row"> <div class="chip" style="background:hsl(210,100%,20%)">20%</div> <div class="chip" style="background:hsl(210,100%,35%)">35%</div> <div class="chip" style="background:hsl(210,100%,50%);color:white">50%</div> <div class="chip" style="background:hsl(210,100%,65%)">65%</div> <div class="chip" style="background:hsl(210,100%,80%)">80%</div> </div> <h2>Saturation (hue 0°, lightness 50%)</h2> <div class="row"> <div class="chip" style="background:hsl(0,0%,50%)">0%</div> <div class="chip" style="background:hsl(0,25%,50%)">25%</div> <div class="chip" style="background:hsl(0,50%,50%)">50%</div> <div class="chip" style="background:hsl(0,75%,50%)">75%</div> <div class="chip" style="background:hsl(0,100%,50%)">100%</div> </div> </body> </html>
Result
Open