Color Mixer

Mængden er Color 2's andel af blandingen. 0 % giver Color 1, 100 % giver Color 2, og 50 % ligger midt imellem dem i det valgte farverum. Det svarer til color-mix(in space, color1 (100 - p)%, color2 p%).

OKLab, som er standardindstillingen, er perceptuelt ensartet og undgår mudrede eller mørke mellemtoner. sRGB blander de gammakodede kanaler som ældre browsere og Sass, hvilket gør blandinger af mættede farver mørkere og mere matte. Lab er det ældre perceptuelle farverum fra CIE og opfører sig omtrent som OKLab, men med mindre ensartede blå nuancer.

OKLCH, LCH, HSL og HWB interpolerer farvetonen langs den korteste bue på farvehjulet, som er CSS-standardindstillingen, så mellemtonen bevarer sin mætning og kan være mere levende end nogen af inputfarverne. Hvis den ene farve er neutral grå uden farvetone, bruges den anden farves farvetone.

Begge blander lysintensiteter lineært, som overlappende lysstråler, så mellemtonen ser lysere ud end i sRGB. De er nyttige til fysisk baserede effekter og til at efterligne udseendet af slørede eller blandede pixels.

Ligesom CSS color-mix() interpolerer mixeren med præmultipliceret alpha, så en gennemsigtig farve ikke trækker blandingen mod sort. Alpha-værdien interpoleres selv med samme forhold og vises i hex med 8 cifre og efter skråstregen i CSS-funktioner.

Hex-koder med eller uden #, CSS-farvenavne, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color()-farverum som display-p3 og cmyk(), i alle kombinationer. Hver farve kan være op til 100 tegn lang.

Blanding i Display P3, OKLCH eller LCH kan give farver, som sRGB ikke kan vise. HEX, RGB og HSL tilpasses da sRGB med CSS Color 4-algoritmen, og resultatet får en note, mens OKLCH-værdien beholder den ikke-tilpassede farve.

Indsæt det i en vilkårlig CSS-egenskab, der tager en farve. Det angiver inputfarverne med deres hex-kode eller med oklch() for farver med et bredt farvespektrum, så browseren beregner den samme blanding igen. color-mix() fungerer i alle aktuelle versioner af Chrome, Edge, Firefox og Safari.

Mængden er et helt procenttal, og blandingen beregnes med fuld præcision ved hjælp af biblioteket culori. RGB-kanaler afrundes til hele tal, HSL-procenter til to decimaler og OKLCH-lysstyrke og -kroma til fire, så der kan være ét trins forskel i det sidste ciffer mellem browsere.

Kør mixeren med forskellige mængder, f.eks. 25 %, 50 % og 75 %. Hvis du vil have en fuld skala mod hvid, sort eller grå, genererer Color Tint, Shade and Tone Generators alle trin i én tabel.