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

Изберете два цвята, плъзнете плъзгача за съотношение и получете точния HEX и RGB код на смесването — плюс пълна градиентна лента, показваща всяка стъпка от 0% до 100%, за да намерите точната междинна точка, от която се нуждаете. Полезно за намиране на нюанс за hover или акцент, който естествено се вписва между два цвята на марката.

Какво представлява този инструмент?

Смесителят на цветове линейно интерполира между червения, зеления и синия канал на два цвята при избрано съотношение — същата математика, която градиентите използват вътрешно. При 0% резултатът е Цвят A, при 100% е Цвят B, а при 50% е аритметичната средна стойност на всеки RGB канал.

Това се различава от смесването на физически бои (което е субтрактивно и зависи от пигмента) и не е същото като усредняване в HSL пространство — линейната RGB интерполация е това, което CSS градиентите, дизайнерските инструменти и повечето инструменти за „цвят между два цвята“ използват, така че резултатът съвпада с това, което бихте видели в градиент на браузъра между същите два цвята.

Защо да го използвате?

Намерете естествен цвят за hover или активно състояние, който се намира между базовия ви цвят и акцент — вместо да гадаете произволна корекция.
Вижте точния HEX код при произволно съотношение, а не просто гледайте на око скрийншот на градиент.
Стъпаловидната скала от 11 стъпки ви дава пълна палитра от единия цвят до другия само с едно кликване, полезно за визуализация на данни или многостепенен градиент.
Кликнете върху всяка стъпка, за да копирате моментално нейния HEX код.
Безплатно, мигновено и напълно локално — без качване, без акаунт.

Как да го използвате

Изберете Цвят A и Цвят B с помощта на избирачите на цветове или като въведете HEX код.
Плъзнете плъзгача за съотношение, за да зададете колко от Цвят B да се смеси.
Прочетете резултантните HEX и RGB стойности над образеца.
Кликнете върху произволен образец в скалата от 11 стъпки по-долу, за да копирате неговия HEX код.

Пример

Вход

Цвят A #3B82F6 (синьо), Цвят B #F59E0B (кехлибарено), съотношение 50%

Резултат

#9B9E7D — rgb(155, 158, 125)

При точно 50% всеки RGB канал е аритметичната средна стойност на каналите на двата входни цвята.

Често задавани въпроси

Защо това не съвпада с това, което бих получил при смесване на истинска боя?

Смесването на бои е субтрактивно (пигментите поглъщат светлина) и зависи от конкретните пигменти — например смесването на синя и жълта боя дава зелено. Този инструмент смесва светлина (RGB канали) адитивно/линейно, което е начинът, по който екраните, CSS градиентите и повечето цифрови дизайнерски инструменти смесват цветове. Двете системи произвеждат наистина различни резултати по замисъл, не по грешка.

Това същото ли е като CSS linear-gradient между двата цвята?

Да — CSS linear-gradient(colorA, colorB) интерполира RGB каналите по същия начин, по който прави и този инструмент, така че цветът, който бихте видели в средата на този градиент, съвпада с резултата при 50% тук.

Защо смесеният цвят понякога изглежда мътен или сив?

Смесването на два наситени, но много различни нюанса (като синьо и оранжево, които са почти комплементарни) в RGB пространство често дава средна точка с ниска наситеност, сиво-кафява — това е реално свойство на RGB интерполацията, не грешка. Ако искате по-жив резултат, опитайте да смесите цветове, които са по-близо един до друг в цветния кръг, или смесвайте в HSL пространство, като регулирате нюанса и запазвате висока наситеност (нещо, което този директен RGB смесител не прави).

Мога ли да смеся повече от два цвята наведнъж?

Не в една стъпка — инструментът смесва точно два цвята. За да комбинирате три, смесете първите два в избраното от вас съотношение, копирайте резултата и го поставете като новия Цвят A срещу третия ви цвят. Правенето на това на етапи също ви дава контрол върху тежестта, което единично тройно усредняване не би дало.

Да използвам ли това или генератора на цветови нюанси?

Ако имате нужда от цвят, който се намира между два различни цвята — да речем, преходен нюанс между синьото на марката ви и кехлибарен акцент — използвайте този смесител. Ако имате нужда от по-светли и по-тъмни варианти на един цвят (hover състояния, фонове, скала в стил Tailwind от 50 до 900), използвайте вместо това Генератора на цветови нюанси: той запазва нюанса и наситеността фиксирани и променя само светлостта, така че всеки резултат остава ясно в същото цветово семейство.

Какви цветови формати мога да въвеждам в полетата за въвеждане?

Текстовите полета приемат 6-цифрени HEX кодове, със или без водещ # (напр. 3B82F6 или #3B82F6). Съкратен 3-цифрен hex, rgb() нотация и CSS имена на цветове не се разпознават там — но можете да изберете произволен цвят визуално с вградения избирач на цветове до всяко поле, а HEX полето се актуализира съответно.