Смесител на цветове

Количеството е делът на Цвят 2 в сместа. При 0% резултатът е Цвят 1, при 100% — Цвят 2, а при 50% двата цвята се смесват поравно в избраното пространство. Съответства на color-mix(in space, color1 (100 - p)%, color2 p%).

OKLab, избраното по подразбиране, е перцептивно равномерно и избягва мътни или тъмни междинни цветове. sRGB смесва гама-кодираните канали като по-старите браузъри и Sass, което прави смесите от наситени цветове по-тъмни и по-бледи. Lab е по-старото перцептивно пространство на CIE и се държи подобно на OKLab, но сините му нюанси са по-неравномерни.

OKLCH, LCH, HSL и HWB интерполират нюанса по по-късата дъга на цветното колело — настройката CSS по подразбиране. Така междинният цвят запазва наситеността си и може да е по-ярък от всеки от двата входни цвята. Когато единият цвят е неутрално сиво без нюанс, се използва нюансът на другия.

И двете пространства смесват линейно интензитета на светлината, както при наслагване на светлинни лъчи, затова междинният цвят изглежда по-ярък, отколкото в sRGB. Те са полезни за физически базирани ефекти и за съвпадение с вида на размазани или смесени пиксели.

Както при CSS color-mix(), смесителят интерполира с предварително умножена алфа, така че прозрачният цвят да не измества сместа към черно. Самата алфа се интерполира в същото съотношение и присъства в hex кодовете с 8 цифри и след наклонената черта във функциите CSS.

Hex кодове със или без #, CSS имена на цветове, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), пространства color() като display-p3 и cmyk() — във всякаква комбинация. Всеки цвят може да съдържа до 100 знака.

Смесването в Display P3, OKLCH или LCH може да създаде цветове, които sRGB не може да покаже. След това HEX, RGB и HSL се преобразуват в sRGB с алгоритъма за CSS Color 4, а резултатът получава бележка, докато стойността OKLCH запазва непреобразувания цвят.

Поставете го във всяко свойство на CSS, което приема цвят. Той задава входните цветове по шестнадесетичен код или чрез oklch() за цветове с широка цветова гама, така че браузърът да преизчисли същата смес. color-mix() работи във всички актуални версии на Chrome, Edge, Firefox и Safari.

Количеството е цяло число в проценти, а сместа се изчислява с пълна точност чрез библиотеката culori. Каналите RGB се закръглят до цели числа, процентите HSL — до два знака след десетичната запетая, а светлотата и наситеността в OKLCH — до четири, затова браузърите може да се различават с една стъпка в последната цифра.

Изпълнете смесителя с различни стойности, например 25%, 50% и 75%. За пълна скала към бяло, черно или сиво генераторите Color Tint, Shade and Tone създават всички стъпки в една таблица.