css • Colors - martindubenet/wed-dev-design GitHub Wiki

1. hwb() stands for « Hue, Whiteness & Blackness »,
2. hsl() stands for « Hue, Saturation & Lightness » also refered to as HSV (Hue, Saturation & Value) or HSB (Hue, Saturation & Brightness),
3. oklch() is a CSS color function that stands for « OKLab color space Lightness Chroma Hue ».
4. rgb() stands for « Red, Green & Blue ».

Notes

• RGB values , no more requires to be seperated by comas : rgb(*,*,*) = rgb(* * *)
• The «a» in rgba(), hsla(), etc. stands for Alpha which is a transparency value expressed in % percent.
• The know CMYK (Cyan, Majenta, Yellow & Black) model refers to four ink colors required in color (printing) process. This model is more limited then RGB therefor irrelevant to use in CSS for @media=screen.
• Visit my «Sass Colors» documentation to know how to use Sass native functions to edit your color $variables via Sass color.$parameters().

Starts by a pound character # followed by 6 alphanumeric characters.

Cheatsheet: Hexadecimal color code for transparency

These are 8 alphanumeric characters octodecimal color values. The last 2 alphanumric characters stands for alpha value on an hexadecimal color.

Math formula

alpha_hex = '61'
alpha_dec = int('61', 16) = 97
alpha_norm = 97 / 255 ≈ 0.38 (38%)

Link to get alpha_dec int('*', 16)

« The best color model for (CSS) developers! », according to Kevin Powell, because the values are more human readable and refers to a 3D space

Default is 3 values with or without comma:

{ hsl( HUE, Saturation%, Lightness% ); }
{ hsl( HUE Saturation% Lightness% ) }
{ hsl( HUEdeg Saturation% Lightness% ) }

{ hsl( 0, 100%, 100%) }
{ hsl( 0 100% 100%) }
{ hsl( 0deg, 100%, 100%) }

Optional 4th value is Alpha:

{ hsla( HUE, Saturation%, Lightness%, Alpha% ) }
{ hsla( HUE Saturation% Lightness% / Alpha% ) }
{ hsla( HUEdeg, Saturation%, Lightness%, Alpha% ) }

{ hsla( 0, 100%, 100%, 100%) }
{ hsla( 0 100% 100% / 100%) }
{ hsla( 0deg, 100%, 100%, 100%) }

HUE values are based on the 360° HSB color wheel.

A recent W3C introduced in CSS COLOR 5 the relative color syntax where you can convert a declared var color to HSL format then use calc() to adjust the lightness. All this within a basic CSS file (no Sass lighten() required). Source

NO SUPPORT YET!!!

:root {
    --color-primary: #f00; /* any format you want here */
    --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5%)); 
    --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10%)); 
}

Work around : Translate your original color to first HSL then lightning var(--l) by breaking it down in two variables that you then use

:root {
    --color:0, 100%; /*the base color*/
    --l:50%; /*the initial lightness*/
    
    --color-primary: hsl(var(--color),var(--l));
    --color-primary-darker: hsl(var(--color),calc(var(--l) - 5%));
    --color-primary-darkest: hsl(var(--color),calc(var(--l) - 10%)); 
}

This value takes the computed value of the property from its parent element. (Dev.Moz.)

* { 
  color: inherit;
}

1. Just Color Picker
2. ColorPic

1. Apple native « Color picker » app

   ꜛSHIFT+⌘Command+C : Copy color values as text. More about Digital Color Meter native app is available on support.apple.com.

• OKLCH color palette generator
• Sass color parameter
• Color Converter — w3schools.com
• Color Keywords (Names VS HEX) — MDN
• Opposite Complementary Color — colortools.net
• Generators
  • Color Shades (variations) — mdigi.tools
  • 2 Color CSS Gradient — mycolor.space
  • 3 Color CSS Gradient — mycolor.space
  • Sass Colors — scg.ar-ch.org
• Inspiration
  • Color Declination Picker — MDN on CodePen
  • Compare HEX Colors — colortools.net
  • Palettes — mycolor.space
• Accessibility
  • Contrast Checker — webaim.org
  • Link Contrast Checker — webaim.org
  • Who Can Use This Color Combination — whocanuse.com