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

Main CSS color functions

  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().

Hexadecimal colors #123456

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

Transparent hexadecimal colors #12345678

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)

Hex color alpha_hex alpha_dec alpha_norm% HSLA
#0000001A 1a int('1a', 16) = 25 25/255 = 0.01 hsla(0, 0, 0, 10%)
#0000001F 1f int('1F', 16) = 31 31/255 = 0.12 hsla(0, 0, 0, 12%)
#00000033 33 int('33', 16) = 33 33/255 = 0.2 hsla(0, 0, 0, 20%)
#0000004D 4d int('4d', 16) = 77 77/255 = 0.3 hsla(0, 0, 0, 30%)
#00000061 61 int('61', 16) = 97 97/255 = ~ 0.38 hsla(0, 0, 0, 38%)
#00000080 80 int('80', 16) = 128 128/255 = ~ 0.5 hsla(0, 0, 0, 50%)
#00000099 99 int('99', 16) = 97 97/255 = 0.6 hsla(0, 0, 0, 60%)
#000000BD bd int('BD', 16) = 189 189/255 = 0.74 hsla(0, 0, 0, 74%)
#000000DE de int('DE', 16) = 222 222/255 = 0.87 hsla(0, 0, 0, 87%)

 

HSL color model

HSL color solid sphere spherical - Wikipedia

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

hsl cheatsheet

CSS syntaxes

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 color scale

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

HUE color scale

HSL relative lightness color variable : Comming but not yet

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%)); 
}

 

Text inherit color

The inherit value takes the computed value of a property from its parent element (Dev.Moz.). This works for text color but it is better practice today to use the currentColor keyword to represent the value of an element's color property. This lets you use the color value on properties that do not receive it by default.

* { 
  color: inherit;       /* generic */
  color: currentColor;  /* specific to parent text color */
}

 

CSS color functions for design systems

Cascading logic within CSS variables

The common good practice is to define your CSS variables in the :root {} pseudo-class, so that it can be referenced globally. But... IF it is not define anywhere, the CSS var() function will read the next comma seperated value on that same color declaration.

* { 
  color: var(--color-primary-main, blue);
}

This is very usefull when building a vanilla (or white label) design system, allowing your client-user to declare his own values in the :root {} of his project.

Contrast color

The contrast-color() function commonly ensures the WCAG AA minimum contrast but the browsers may use different and better algorithms.

That function enables specifying a background-color and automatically generating a contrasting text color, or vice versa. It avoids the need to maintain background-text color pairs.

* { 
  color: contrast-color( var(--color-primary-main) );
  background-color: var(--color-primary-main);
}

Live demo from Kevin Powell on Youtube.

 

Color pickers for designers

Windows OS color pickers

  1. Just Color Picker
  2. ColorPic

macOS color pickers

  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.

 

Online tools

My wikis

[ Content edition ][ Web dev & design ][ Wordpress ] md

MartinDube.net

⚠️ **GitHub.com Fallback** ⚠️