Why CSS HSL Colors are Better!

With the Power of CSS Variables

Introduction

pixels view from close look
.box{
background-color: #ff0000;
width: 100px;
height: 100px;
}
.box{
background-color: rgb(255, 0, 0);
width: 100px;
height: 100px;
}

The Main Problems with the RGB and Hexadecimal Methods

HSL/HSLA to the Rescue!

Choosing the Base Colors for Your Project

Base Starting Points for the Saturation, Lightness and Opacity Parameters

  • Saturationbegin with the default of 50% — mid-range (has to be bigger than 0% value. Because 0% saturation value will make the color look grayish).
  • Lightnessstart with the default of 50% because it should be larger than 0% and smaller than 100% value; otherwise, the color will look either black or white.
  • Opacity — start with the default of 100%. If you are working with HSLA, you have a parameter for opacity, and full opacity is best. The 100% value means full opacity, while the 0% value will cause the color to be transparent.

How to Elegantly Code HSL/HSLA in Your CSS

/**  common-colors  **/ 
:root{
/* base color 1 */
--base-color1: 60;

/* base color 2 */
--base-color2: 120;

/*base color 3*/
--base-color3: 200;
}
/** common-colors **/
:root{
/* base color 1 */
--base-color1: 60;
--color1-light: hsla(var(--base-color1), 50%, 75%, 100%);
--color1-normal: hsla(var(--base-color1), 50%, 50%, 100%);
--color1-darker: hsla(var(--base-color1), 50%, 35%, 100%);
}
/**common-colors**/ 
:root{
/* base color 1 */
--base-color1: 60;
--color1-light: hsla(var(--base-color1), 50%, 75%, 100%);
--color1-normal: hsla(var(--base-color1), 50%, 50%, 100%);
--color1-darker: hsla(var(--base-color1), 50%, 35%, 100%);

/* base color 2 */
--base-color2: 120;
--color2-light: hsla(var(--base-color2), 50%, 75%, 100%);
--color2-normal: hsla(var(--base-color2), 50%, 50%, 100%);
--color2-darker: hsla(var(--base-color2), 50%, 35%, 100%);

/*base color 3 */
--base-color3: 200;
--color3-light: hsla(var(--base-color3), 50%, 75%, 100%);
--color3-normal: hsla(var(--base-color3), 50%, 50%, 100%);
--color3-darker: hsla(var(--base-color3), 50%, 35%, 100%);
}
HSL Colors Pallet Result

Making More Common Rules for the Params of the HSL/HSLA

:root{ 
/** commonly used saturation/lightness/opacity levels **/
--saturation-level1: 20%;
--saturation-level2: 50%; /* mid range - normal */
--saturation-level3: 80%;

--lightness-level1: 75%;
--lightness-level2: 50%; /* mid range - normal */
--lightness-level3: 35%;

--opacity-level1: 100%; /* no opacity - normal */
--opacity-level2: 80%;
--opacity-level3: 60%;
}
--color1-light:  hsla( var(--base-color1),  
var(--saturation-level2),
var(--lightness-level1),
var(--opacity-level1) );

Final Words

--

--

CSS & HTML Architect

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store