CodeLab
Tutorials For Everyone
Run
<!Doctype HTML> <html> <head> <title>Colors By HSL Value</title> <style> .color-group{ background: #f4f4fb; display: flex; flex-wrap: wrap; } .single-color{ border-radius: 4px; flex: 40%; display: block; text-align: center; padding-top: 20px; padding-bottom: 20px; margin: 2px; box-sizing: border-box; } </style> </head> <body> <h2>These are some of Colors By HSL Value</h2> <div class="color-group"> <div class="single-color" style="background:hsl(0, 100%, 10%);color: #fff;"> hsl(0, 100%, 10%) </div> <div class="single-color" style="background:hsl(0, 100%, 20%);color: #fff;"> hsl(0, 100%, 20%) </div> <div class="single-color" style="background:hsl(0, 100%, 30%);"> hsl(0, 100%, 30%) </div> <div class="single-color" style="background:hsl(0, 100%, 40%);"> hsl(0, 100%, 40%) </div> <div class="single-color" style="background:hsl(0, 100%, 50%);"> hsl(0, 100%, 50%) </div> <div class="single-color" style="background:hsl(0, 100%, 60%);"> hsl(0, 100%, 60%) </div> <div class="single-color" style="background:hsl(0, 100%, 70%);"> hsl(0, 100%, 70%) </div> <div class="single-color" style="background:hsl(0, 100%, 80%);"> hsl(0, 100%, 80%) </div> <div class="single-color" style="background:hsl(0, 100%, 90%);"> hsl(0, 100%, 90%) </div> <div class="single-color" style="background:hsl(0, 100%, 100%);"> hsl(0, 100%, 100%) </div> </div> <div class="color-group"> <div class="single-color" style="background:hsl(120, 100%, 10%);color: #fff;"> hsl(120, 100%, 10%) </div> <div class="single-color" style="background:hsl(120, 100%, 20%);color: #fff;"> hsl(120, 100%, 20%) </div> <div class="single-color" style="background:hsl(120, 100%, 30%);"> hsl(120, 100%, 30%) </div> <div class="single-color" style="background:hsl(120, 100%, 40%);"> hsl(120, 100%, 40%) </div> <div class="single-color" style="background:hsl(120, 100%, 50%);"> hsl(120, 100%, 50%) </div> <div class="single-color" style="background:hsl(120, 100%, 60%);"> hsl(120, 100%, 60%) </div> <div class="single-color" style="background:hsl(120, 100%, 70%);"> hsl(120, 100%, 70%) </div> <div class="single-color" style="background:hsl(120, 100%, 80%);"> hsl(120, 100%, 80%) </div> <div class="single-color" style="background:hsl(120, 100%, 90%);"> hsl(120, 100%, 90%) </div> <div class="single-color" style="background:hsl(120, 100%, 100%);"> hsl(120, 100%, 100%) </div> </div> <div class="color-group"> <div class="single-color" style="background:hsl(240, 100%, 10%);color: #fff;"> hsl(240, 100%, 10%) </div> <div class="single-color" style="background:hsl(240, 100%, 20%);color: #fff;"> hsl(240, 100%, 20%) </div> <div class="single-color" style="background:hsl(240, 100%, 30%);"> hsl(240, 100%, 30%) </div> <div class="single-color" style="background:hsl(240, 100%, 40%);"> hsl(240, 100%, 40%) </div> <div class="single-color" style="background:hsl(240, 100%, 50%);"> hsl(240, 100%, 50%) </div> <div class="single-color" style="background:hsl(240, 100%, 60%);"> hsl(240, 100%, 60%) </div> <div class="single-color" style="background:hsl(240, 100%, 70%);"> hsl(240, 100%, 70%) </div> <div class="single-color" style="background:hsl(240, 100%, 80%);"> hsl(240, 100%, 80%) </div> <div class="single-color" style="background:hsl(240, 100%, 90%);"> hsl(240, 100%, 90%) </div> <div class="single-color" style="background:hsl(240, 100%, 100%);"> hsl(240, 100%, 100%) </div> </div> <div class="color-group"> <div class="single-color" style="background:hsl(0, 0%, 5%);color: #fff;"> hsl(0, 0%, 5%) </div> <div class="single-color" style="background:hsl(0, 0%, 10%);color: #fff;"> hsl(0, 0%, 10%) </div> <div class="single-color" style="background:hsl(0, 0%, 15%);color: #fff;"> hsl(0, 0%, 15%) </div> <div class="single-color" style="background:hsl(0, 0%, 20%);color: #fff;"> hsl(0, 0%, 20%) </div> <div class="single-color" style="background:hsl(0, 0%, 25%);color: #fff;"> hsl(0, 0%, 25%) </div> <div class="single-color" style="background:hsl(0, 0%, 30%);color: #fff;"> hsl(0, 0%, 30%) </div> <div class="single-color" style="background:hsl(0, 0%, 35%);color: #fff;"> hsl(0, 0%, 35%) </div> <div class="single-color" style="background:hsl(0, 0%, 40%);color: #fff;"> hsl(0, 0%, 40%) </div> <div class="single-color" style="background:hsl(0, 0%, 45%);"> hsl(0, 0%, 45%) </div> <div class="single-color" style="background:hsl(0, 0%, 50%);"> hsl(0, 0%, 50%) </div> <div class="single-color" style="background:hsl(0, 0%, 55%);"> hsl(0, 0%, 55%) </div> <div class="single-color" style="background:hsl(0, 0%, 60%);"> hsl(0, 0%, 60%) </div> <div class="single-color" style="background:hsl(0, 0%, 65%);"> hsl(0, 0%, 65%) </div> <div class="single-color" style="background:hsl(0, 0%, 70%);"> hsl(0, 0%, 70%) </div> <div class="single-color" style="background:hsl(0, 0%, 75%);"> hsl(0, 0%, 75%) </div> <div class="single-color" style="background:hsl(0, 0%, 80%);"> hsl(0, 0%, 80%) </div> <div class="single-color" style="background:hsl(0, 0%, 85%);"> hsl(0, 0%, 85%) </div> <div class="single-color" style="background:hsl(0, 0%, 90%);"> hsl(0, 0%, 90%) </div> <div class="single-color" style="background:hsl(0, 0%, 95%);"> hsl(0, 0%, 95%) </div> <div class="single-color" style="background:hsl(0, 0%, 100%);"> hsl(0, 0%, 100%) </div> </div> </body> </html>