CodeKitHubŠta je ovaj alat?
Мешач боја линеарно интерполира између црвеног, зеленог и плавог канала две боје при изабраном односу — иста математика коју градијент користи интерно. При 0% резултат је Боја А, при 100% је Боја Б, а при 50% је аритметичка средина сваког RGB канала.
Ово се разликује од мешања физичке боје (које је суптрактивно и зависи од пигмента), а није ни исто што и усредњавање у HSL простору — линеарна RGB интерполација је оно што CSS градијенти, алати за дизајн и већина алата за „боју између две боје“ користе, тако да резултат одговара ономе што бисте видели у градијенту прегледача између исте две боје.
Zašto ga koristiti?
- Пронађите природно изгледајућу hover или активну боју стања која се налази између ваше основне боје и акцента — уместо нагађања насумичног прилагођавања.
- Видите тачан HEX код при било ком односу, а не само процењивање снимка екрана градијента на око.
- Лествица од 11 корака вам једним кликом даје потпуну палету од једне боје до друге, корисно за визуализацију података или вишестепени градијент.
- Кликните на било који корак да тренутно копирате његов HEX код.
- Бесплатно, тренутно и потпуно локално — без отпремања, без налога.
Kako se koristi
- Изаберите Боју А и Боју Б помоћу бирача боја или уносом HEX кода.
- Превуците клизач односа да подесите колико Боје Б треба помешати.
- Прочитајте резултујуће HEX и RGB вредности изнад узорка.
- Кликните на било који узорак у лествици од 11 корака испод да копирате његов HEX код.
Primer
Unos
Боја А #3B82F6 (плава), Боја Б #F59E0B (ћилибарна), однос 50%Rezultat
#9B9E7D — rgb(155, 158, 125)Тачно на 50%, сваки RGB канал је аритметичка средина канала обе улазне боје.
Često postavljana pitanja
Зашто се ово не поклапа са оним што бих добио мешањем праве боје?
Мешање боја је суптрактивно (пигменти апсорбују светлост) и зависи од конкретних укључених пигмената — мешање плаве и жуте боје, на пример, даје зелену. Овај алат меша светлост (RGB канале) адитивно/линеарно, а тако екрани, CSS градијенти и већина дигиталних алата за дизајн мешају боје. Два система намерно дају заиста другачије резултате, не због грешке.
Да ли је ово исто што и CSS linear-gradient између две боје?
Да — CSS linear-gradient(colorA, colorB) интерполира RGB канале на исти начин као и овај алат, тако да боја коју бисте видели на средини тог градијента одговара резултату од 50% овде.
Зашто помешана боја понекад изгледа блатњаво или сиво?
Мешање две засићене, али веома различите нијансе (попут плаве и наранџасте, које су скоро комплементарне) у RGB простору често производи сиво-браон средњу тачку ниске засићености — ово је стварна особина RGB интерполације, а не грешка. Ако желите живописнију мешавину, покушајте да помешате боје које су ближе једна другој на точку боја, или мешајте у HSL простору подешавањем нијансе уз задржавање високе засићености (нешто што овај директни RGB мешач не ради).
Могу ли да помешам више од две боје одједном?
Не у једном кораку — алат меша тачно две боје. Да бисте комбиновали три, помешајте прве две у изабраном односу, копирајте резултат и налепите га као нову Боју А наспрам треће боје. Радећи то у фазама, такође добијате контролу над тежином, што једнократно тросмерно усредњавање не би дало.
Да ли треба да користим ово или Генератор нијанси боја?
Ако вам је потребна боја која се налази између две различите боје — рецимо, прелазна нијанса између плаве боје вашег бренда и ћилибарног акцента — користите овај мешач. Ако вам је потребна светлија и тамнија варијанта једне боје (hover стања, позадине, лествица у Tailwind стилу од 50 до 900), уместо тога користите Генератор нијанси боја: он држи нијансу и засићеност фиксним и мења само осветљеност, тако да сваки резултат остаје јасно у истој породици боја.
Које формате боја могу да унесем у поља за унос?
Текстуална поља прихватају 6-цифрене HEX кодове, са водећим # или без њега (нпр. 3B82F6 или #3B82F6). Скраћени 3-цифрени hex, rgb() запис и CSS називи боја се тамо не препознају — али можете визуелно изабрати било коју боју уграђеним бирачем боја поред сваког поља, а HEX поље ће се одговарајуће ажурирати.