Kleur - rvdegroen/notes GitHub Wiki

Inhoud

Color spaces

Je hebt verschillende color spaces waarin je kan werken. Een color space is een bepaalde kleuren hoeveelheid. De color space kan het uiterlijk van de kleur veranderen. Het kiezen van een color space is ook afhankelijk hoeveel kleuren een bepaald scherm of systeem dat aan kan.

Er zijn verschillende color spaces:

  • HSL (voor schermen)
  • sRGB
  • RGB (voor papier)
  • Adobe Colors (in adobe kan je dat instellen op srgb)
  • P3 (safari en iphones ondersteunen dit)

je kan checken op: www.css.land./lch

Gebruik altijd een LCH waarde EN RGB.

Color functions

Met color functions kun je kleuren mixen. Je kan zo bijvoorbeeld een kleur met een andere kleur mixen in CSS met de color-mix function:


/* CSS */
/* blend color is hoeveel percentage van 1 kleur in de andere kleur zit */

color-mix( [set resulting color space in hsl/rgb], [base color] [percentage] , [into blend color] )

Color contrast

Met color contrast kan je checken of de contrast hoog genoeg is.


/* CSS */
/* je geeft zelf de kleuren mee, waaruit ie kan kiezen, dat is voor de vs */

color-contrast([based on this color] vs , [this color])

Interessant om te lezen: https://www.smashingmagazine.com/2023/01/creating-high-contrast-design-system-css-custom-properties/