Introduction to CSS foreground and background automatic color matching technology (demo)

1. Color matching effect preview

As shown in the GIF below, when the background color of our button gradually fades, the text color also changes from white to black, and the border is also displayed. The color conversion is achieved purely with CSS.

You can click here: Button text and border color automatically change with the background color demo

Drag the R, G, and B corresponding sliders to see that the button text color and border color will automatically change according to the background color. The specific manifestations are:

• On a dark background, the text is white with no border.
• On a light background, the text is black with a darkened border to make it easier to distinguish from the surrounding environment.

This smart matching is implemented in pure CSS, mainly using CSS3 calc() calculations and CSS3 native var variables.

2. Color code display

The HTML code is very simple, as follows:

<button class="btn">I am a button</button>

The key points and difficulties are in the CSS part:

:root {
  /* Define RGB variables */
  --red: 44;
  --green: 135;
  --blue: 255;
  /* The critical value for text color change, 0.5~0.6 is recommended */
  --threshold: 0.5;
  /* The threshold for the dark border to appear, ranging from 0 to 1, and 0.8+ is recommended*/
  --border-threshold: 0.8;
}

.btn {
  /* Button background color is the basic background color*/
  background: rgb(var(--red), var(--green), var(--blue));

  /** 
   * Use sRGB Luma method to calculate grayscale (can be seen as brightness)
   * The algorithm is:
   * lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
  */
  --r: calc(var(--red) * 0.2126);
  --g: calc(var(--green) * 0.7152);
  --b: calc(var(--blue) * 0.0722);
  --sum: calc(var(--r) + var(--g) + var(--b));
  --lightness: calc(var(--sum) / 255);
  
  /* Set the color */
  color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
 
  /* Determine the border transparency */
  --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
  /* Set border related styles */
  border: .2em solid;
  border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
}

At first glance, it's like a duck hearing thunder - I don't understand what it means. In fact, it's not complicated. Let me analyze the implementation principle.

3. Principle of automatic color matching of foreground and background

1. CSS property value range overflow boundary rendering feature

The CSS language has an interesting feature, that is, when the CSS property value exceeds the normal range, it will be rendered as long as the format is correct, and the rendered value is the legal boundary value.

Here are two examples:

The legal range of opacity transparency attribute value is 0-1, but if you set a negative number or a very large value, the browser can still interpret it, but it will be either 0 or 1, as follows:

.example {
  opacity: -2; /* resolves to 0, completely transparent*/
  opacity: -1; /* resolves to 0, completely transparent*/
  opacity: 2; /* Parses as 1, completely opaque*/
  opacity: 100; /* Parses as 1, completely opaque*/
}

Color values, such as HSL, S and L range from 0% to 100%. However, if you set a negative number or a maximum value, the browser can still interpret it, but it will be either 0% or 100%, as shown below:

.example {
  color: hsl(0, 0%, -100%); /* Parses as hsl(0, 0%, 0%), black*/
  color: hsl(0, 0%, 200%); /* Parses as hsl(0, 0%, 100%), white*/
}

The color matching technique in this article makes use of this boundary rendering feature.

2. var variables are passed to calc to implement complex calculations

Let's analyze the CSS code from top to bottom.

First, define a few global CSS variables on the :root selector (semantically global):

:root {
  --red: 44;
  --green: 135;
  --blue: 255;

  --threshold: 0.5;
  --border-threshold: 0.8;
}

in:

–threshold
This is the color change threshold, which is used to compare the brightness of the current RGB color value.
--border-threshold
This is the critical value of the border color transparency, which is also the brightness comparison with the current RGB color value.
Then the CSS code inside .btn{}:

background: rgb(var(--red), var(--green), var(--blue));

This is easy to understand, the basic RGB color value is used as the background color.

--r: calc(var(--red) * 0.2126);
--g: calc(var(--green) * 0.7152);
--b: calc(var(--blue) * 0.0722);
--sum: calc(var(--r) + var(--g) + var(--b));
--lightness: calc(var(--sum) / 255);

There are 5 CSS variables in 5 lines here. The one we need is actually the last one - lightness, which is to calculate the brightness of the current background color. The sRGB Luma grayscale algorithm① is used. Why do we need 5 lines? Because the calculation formula is this:

lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255

Among them, the coefficients for multiplying the R, G, and B color values ​​are fixed, and the coefficients for different grayscale algorithms are different. --lightness indicates brightness, ranging from 0 to 1. At this time, it can be compared with the two critical values ​​of --threshold and --border-threshold to determine the text color and border transparency of the button.

① The grayscale here can be regarded as brightness. In fact, the brightness calculation method of HSL should be half of the sum of the maximum and minimum color values ​​of R, G, and B.

color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%))

The CSS code to set the color.

The calc calculation here is translated into Chinese as: (brightness value – critical value) * proportional coefficient.

The brightness value ranges between 0 and 1, and the critical value is fixed at 0.5, so:

If the brightness value is less than 0.5, the brightness value minus the critical value is negative. Since our proportional coefficient is a very large negative number, negative times negative equals positive, so we will get a huge positive number. According to the boundary rendering principle, it will be rendered at 100%, so the color is white.
If the brightness value is greater than 0.5, the brightness value minus the critical value is positive. Since our proportional coefficient is a very large negative number, we will get a huge negative number. According to the boundary rendering principle, it will be rendered at 0%, so the color is black.
The above is the principle of the button text color changing to black on a color-changing background and white on a dark background.

--border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);

Border transparency works on a similar principle. The calc calculation here is translated into Chinese as: (brightness value – border threshold) * 100.

The brightness value ranges between 0 and 1, and the border threshold is fixed at 0.8, so:

If the brightness value is less than 0.8, the brightness value minus the border threshold is negative. In CSS, negative transparency will be rendered as 0, and the border is completely transparent.

If the brightness value is greater than 0.8, the brightness value minus the border threshold value is positive, and the calculated transparency value will range between 0 and 20. Of course, transparency values ​​greater than 1 will be rendered as 1. At this time, the border is basically completely opaque, and the darkened border appears;

border: .2em solid;
border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));

Set the border style, the border color is 50 units darker than the background color (negative numbers are rendered as 0), and then the transparency is calculated dynamically based on the brightness. Under a dark background, the button border transparency is 0 and does not appear; under a light background, the transparency ranges from 0 to 1 and appears. The lighter the color, the greater the border transparency and the darker the border color, which is in line with color matching expectations.

I believe that after the above analysis, everyone will understand the principle of its implementation.

Change the background color of a button

The CSS code under the .btn class name is fixed. When we need to change the color of the button, we do not modify the CSS under .btn, but modify the following three variable values ​​in :root:

--red: 44;
--green: 135;
--blue: 255;

CSS settings directly change the value. If it is set by JS, use the setProperty() method. If you don’t understand, you can refer to this article: "How to set CSS3 var variables in HTML tags and JS".

IV. Final remarks

Due to the compatibility limitations of var, this very interesting CSS technique is not yet suitable for use in large external projects.

You can give the applet a try because the kernel environment is relatively fixed. The internal system and experimental projects can be played with, which will be very interesting.

This color matching technique can actually be used not only on buttons, but also in the layout of some large areas, because the background color of these layouts may be dynamic. At this time, the color matching of the text can also be automated with the help of CSS.

In addition, the button text in the demo of this article is in black and white. In fact, if our multiplication coefficient is smaller, more color values ​​can appear and the color matching will be more refined.

References

Switch font color … CSS

Summarize

The above is a brief introduction to the CSS foreground and background automatic color matching technology introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!