Color - Greyscale

Table of Contents


A greyscale is the lightness scale where:

  • White is the highest possible value
  • Black is the lowest value.
  • Gray is the a medium value. The midpoint between black and white, neither dark nor light.

It's a color space that has only one parameter which controls the level of lightness going from black to white.


In css with the rgb color function were all primary colors are mixed at an equal level to get an achromatic color

#swatches > * {
    width: 4rem;
    height: 4rem;
    display: inline-block;
    margin: 0.5rem;
<div id="swatches">
    <div style="background-color:rgb(0,0,0)"> </div>
    <div style="background-color:rgb(12.5%, 12.5%, 12.5%)"> </div>
    <div style="background-color:rgb(25%, 25%, 25%)"> </div>
    <div style="background-color:rgb(37.5%, 37.5%, 37.5%)"> </div>
    <div style="background-color:rgb(50%, 50%, 50%)"> </div>
    <div style="background-color:rgb(62.5%, 62.5%, 62.5%)"> </div>
    <div style="background-color:rgb(75%, 75%, 75%)"> </div>
    <div style="background-color:rgb(87.5%, 87.5%, 87.5%)"> </div>
    <div style="background-color:rgb(100%, 100%, 100%)"> </div>

Powered by ComboStrap