Color Mixer
Blanda två färger i ett valt färgrymd med valfritt förhållande, så som CSS color-mix() gör. Ange två färger i valfritt CSS-format, ställ in andelen av den andra färgen från 0 till 100 procent och välj OKLab, OKLCH, Lab, LCH, sRGB, linjär sRGB, Display P3, HSL, HWB eller XYZ. Resultatet visas som HEX, RGB, HSL och OKLCH, tillsammans med ett färdigt color-mix()-uttryck för din formatmall.
Vanliga frågor
Hur fungerar mängden?
Mängden är andelen av färg 2 i blandningen. 0 % ger färg 1, 100 % ger färg 2 och 50 % hamnar mitt emellan i det valda färgrymdet. Det motsvarar color-mix(in space, color1 (100 - p)%, color2 p%).
Vilket färgrymd ska jag välja?
Standardvalet OKLab är perceptuellt enhetligt och undviker grumliga eller mörka mellanlägen. sRGB blandar de gammakodade kanalerna som äldre webbläsare och Sass gör, vilket gör blandningar av mättade färger mörkare och mattare. Lab är den äldre perceptuella CIE-färgrymden och beter sig ungefär som OKLab, men blå nyanser blir mindre jämna.
Vad gör de nyansbaserade färgrymderna?
OKLCH, LCH, HSL och HWB interpolerar nyansen längs den kortaste bågen på färghjulet, vilket är standard i CSS. Därför behåller mittpunkten sin mättnad och kan vara mer livfull än någon av inmatningsfärgerna. När en färg är neutralgrå utan nyans används den andra färgens nyans.
Vad används linjär sRGB och XYZ till?
Båda blandar ljusintensiteter linjärt, som överlappande ljusstrålar, så mittpunkten ser ljusare ut än i sRGB. De är användbara för fysikbaserade effekter och för att matcha utseendet hos suddiga eller blandade pixlar.
Hur hanteras transparens?
Precis som CSS color-mix() interpolerar blandaren med premultiplicerad alfa, så en transparent färg inte drar blandningen mot svart. Alfa interpoleras med samma förhållande och visas i hexkoder med 8 siffror samt efter snedstrecket i CSS-funktioner.
Vilka indatformat kan jag använda?
Hexkoder med eller utan #, CSS färgnamn, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color()-färgrymder som display-p3 och cmyk(), i valfri kombination. Varje färg kan vara upp till 100 tecken lång.
Vad händer när resultatet ligger utanför sRGB?
Blandning i Display P3, OKLCH eller LCH kan ge färger som sRGB inte kan visa. HEX, RGB och HSL mappas då till sRGB med algoritmen CSS Color 4, och en notering visas vid resultatet. OKLCH-värdet behåller den omappade färgen.
Hur använder jag color-mix()-uttrycket?
Klistra in det i valfri CSS-egenskap som tar emot en färg. Indata anges med hexkod eller, för färger med stort färgomfång, med oklch(), så att webbläsaren räknar om samma blandning. color-mix() fungerar i alla aktuella versioner av Chrome, Edge, Firefox och Safari.
Hur exakt är resultatet?
Mängden anges i hela procent och blandningen beräknas med full precision med biblioteket culori. RGB-kanaler avrundas till heltal, HSL-procent till två decimaler och OKLCH-ljushet och kromavärde till fyra, så webbläsare kan skilja sig med ett steg i den sista siffran.
Hur får jag flera steg mellan två färger?
Kör blandaren med olika mängder, till exempel 25 %, 50 % och 75 %. För en fullständig skala mot vitt, svart eller grått genererar Color Tint, Shade and Tone Generators alla steg i en tabell.