Difference between revisions of "Manipulate CSS Colors Using Javascript"

From WikiHTP
Line 46: Line 46:
=== Calculate saturation from RGB ===
=== Calculate saturation from RGB ===

Revision as of 02:44, 30 May 2019

Before learning how to use JavaScript to manipulate CSS colors, we need a basic understanding of how CSS sets colors. There are many different color modes for CSS. The most common models are RGB and HSL. Let's take a look at the two color modes first.

Color mode


RGB is red, green and blue abbreviation for the first letter of three words, consisting of three numbers, each number indicating how much light in its respective color is included in the final color. In CSS, these numbers are in 0~255 between and can be used as RGB arguments to CSS functions, separated by commas. For example RGB(50,100,0).

RGB is an additive color system, which means that the higher each number, the brighter the final color. If all values ​​are equal, the color is grey; if all values ​​are zero, the result is black; if all values ​​are 255, the result will be white.

Alternatively, you can use hexadecimal to represent RGB colors. In this notation, the integer for each color is 10 converted from base to base 16. For example, the RGB(50,100,0) converted hexadecimal is #326400.

Although we often find ourselves using RGB (especially hexadecimal) out of habit, I often find it difficult to read and especially difficult to operate.


HSL is hue, saturation and light three words the first letter of the abbreviation, but also by the three values. The hue corresponds to the position on the color wheel and is represented by the angle value of the CSS, the most common being the deg unit.

Saturation is expressed as a percentage and refers to the intensity of the color. When the degree of saturation 100%, it is a color; when the saturation of the substrate, the less color, until 0%, would be a grey.

Brightness is also expressed as a percentage, which refers to the color brightness. The regular brightness is 50%. Regardless of hue and saturation, 100% the brightness will be pure white and 0% the brightness will be pure black.

The HSL color model is a more intuitive color model. The relationship between colors is more pronounced, and the operation of colors is often as simple as adjusting a number.

For a more in-depth introduction to CSS color, you can read the following article to expand:

  • Color: From Hexcodes to Eyeballs
  • Give you some color to see
  • Detailed CSS color system

Conversion between color models

Both the RGB and HSL color models break the color into different properties. To convert between grammars, you first need to calculate these properties.

In addition to the hue, each value we discussed can be expressed as a percentage. Even RGB values ​​are a percentage representation of the byte size. In the following formulas and functions, these percentages will be used 0 to 1 decimal between.

I would like to point out that we will not discuss these maths in depth in this article. Instead, I will briefly introduce the original mathematical formula and then convert it to a JavaScript formula.

Calculate brightness from RGB

Brightness is the easiest to calculate among the three HSL values. Mathematically, the formula is as follows, where M is the maximum value m of the RGB value, which is the minimum value of the RGB value:


The JavaScript expression is as follows:

const rgbToLightness = (r, g, b) => 1 / 2 * (Math.max(r, g, b) + Math.min(r, g, b));

Calculate saturation from RGB

Saturation is only slightly more complicated than brightness. If the brightness is 0 or 1, the saturation value is 0. The corresponding mathematical formula is as follows (where L is the brightness):


The corresponding JavaScript code:

const rgbToSaturation = (r, g, b) => {
    const L = rgbToLightness(r, g, b)
    const max = Math.max(r, g, b)
    const min = Math.min(r, g, b)
    return (L === 0 || L === 1) ? 0 : (max - min) / (1 - Math.abs(2 * L - 1))