290 private links
hsl & rgb had an update:
- hsla is replaced by hsl
- units are now optional when we’re using the space separated syntax
Relative colours
They can be created by mixing colors: rgb( from [#ff0000](https://shaarli.lyokolux.space/./add-tag/ff0000) r g b / 0.5) tells the browser to create an rgb color, from#ff0000 where each hexadecimal is assigned to the variables r, g, b with 50% transparency. Note h s l can be used as notation.
So here is how to plug transparency to a color: rgb(from var(--color-primary) h s l / 0.75);.
Quickwins:
- add transparency
- use lighter and darker versions of a base color in hsl:
--base-light: hsl(from var(--base) h s 75%);. See a one color toast notification: https://codepen.io/piccalilli/pen/XJXMgEB/64c4f56702893dc64d9cd4dc564f5e0e - using
calc(a later post)
Light and dark mode handling
light-dark() allow to define two variants of the color for the dark and light theme, if color-scheme: light dark; is activated. color-scheme can also deactivate it.
Colour spaces
They can be defined, so the browser does a good job of filling in those in-between colours, and sometimes, it falls flat a little. The trick was to add one or two colors in-between. Using the oklch as colour space is better though. The color spaces have to be tried manually though: lch and oklch, lab and oklab, hwb, xyz.
To have rainbow, one can use longer hue as for example linear-gradient(in hsl longer hue 90deg, var(--color-1), var(--color-2));. increasing or decreasing exists too.
As a quick aside, the range of colours in a given space is called its (wide or narrow) gamut.
display-p3 is one reference of a colour space. The chrome color picker also show the limitations of sRGB in display-p3 :)
