Development usually use RGB color description, in need of time can add transparency, that is, RGBA, but in most of the time without design draft, want to toss about their own page, color is a big problem. As a result, deliberately to design colleagues for some learning.

Then open the door to a new world. As you know, there are four ways to describe colors in CSS:

  • rgb().rgba()Three primary color channel + transparency channel
  • Color name, such asred.yellow
  • The hexadecimal value is as follows#f1f1f1.# 33333
  • hsl().hsla(), Hue, Saturation, Brightness channel + Transparency channel

Now I will focus on HSL (HSLA)

Definition and Usage

The hSLA () function defines colors using hue, saturation, brightness, and transparency.

HSLA refers to Hue, Saturation, brightness and transparency (English: Hue, Saturation, Lightness, Alpha).

Hue (H) value 0-360, is the basic attribute of color, is commonly said color name, such as red, yellow and so on.

Saturation (S) takes the value of 0-100%, which refers to the purity of color. The higher the color is, the purer it is, and the lower it becomes gray gradually.

The brightness (L) is 0-100%. If the brightness is increased, the color will change to white. Reduce the brightness and the color changes to black. Transparency (A) The value ranges from 0 to 1, indicating transparency.

The trick is to use hue H as the main operation, and saturation S and brightness L as the auxiliary color adjustment. Before I introduce the technique, a few ideas

  • Twelve color wheel: divide the hue value into 12 points, forming 12 sections, called 12 color wheel, each section contains a 30 degree Angle color range.
  • Close color: a color within ±30 degrees of the hue of the current color, defined as close color
  • Complementary color: The hue of the current color +180 degrees, is the complementary color of the current color, usually used to highlight something.

Without further ado, knowing the above, you can start a wave of dafa.

During development, the demand side gives us a theme color, and then we can

    1. Use a similar color on the site for the overall color configuration, while adjusting the colorsaturationandbrightness, fine tuning the color;
    1. Where you want to stand out, like button text,First take complementary colors, and then take their close colorsAnd then by adjusting the colorsaturationandbrightness, fine tuning the color;
    1. Transparency, depending on the mood, needs to be adjusted. Designer colleagues said that transparency will not be adjusted under normal circumstances, and the default is kept at 1.

Amway time

Finally, colorHunt.co /, an Amway color matching site, when you get a given color, go directly to the site to find a color card that contains (or is close to) that color. Then you can use the color and happily match it by tweaking the hue, saturation and brightness.

The above is the small skills of color collocation, but this is only a reference, the specific situation, or need more practice and continuous learning, will be more and more feeling. Please share your color tips in the comments section. I will learn them from small benches and books. ‘.