DEV Community

Ibrahim Elhofy
Ibrahim Elhofy

Posted on

HSL-based color name

just add the lightiness parameter of hsl color to the end of color name

:root {

    --white : hsl(0, 0%, 100%);

    --gray-95: hsl(0, 0%, 95%);
    --gray-65: hsl(0, 0%, 65%);
    --gray-45: hsl(0, 0%, 45%);
    --gray-30: hsl(0, 0%, 30%);

    --blue-95 : hsl(195, 100%, 95%);
    --blue-45 : hsl(195, 100%, 45%);
    --blue-20 : hsl(220, 50%, 20%);

    --black : hsl(0, 0%, 10%);

}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)