CodeKitHubCo je tento nástroj?
Míchání barev lineárně interpoluje červený, zelený a modrý kanál dvou barev ve zvoleném poměru — jde o stejnou matematiku, jakou interně používá barevný přechod. Při 0 % je výsledkem Barva A, při 100 % Barva B a při 50 % jde o aritmetický střed každého kanálu RGB.
To se liší od míchání fyzické barvy (které je subtraktivní a závisí na pigmentu) a není to totéž co průměrování v prostoru HSL — lineární interpolace RGB je metoda, kterou používají CSS přechody, designové nástroje i většina utilit typu „barva mezi dvěma barvami“, takže výsledek odpovídá tomu, co byste viděli u přechodu v prohlížeči mezi stejnými dvěma barvami.
Proč ho používat?
- Najděte přirozeně vypadající barvu pro stav hover nebo aktivní stav, která leží mezi vaší základní barvou a akcentem — místo hádání náhodné úpravy.
- Zobrazte si přesný kód HEX při libovolném poměru, místo odhadování ze snímku obrazovky přechodu.
- 11krokový žebříček vám jedním kliknutím poskytne kompletní paletu od jedné barvy ke druhé, což se hodí pro vizualizaci dat nebo vícebodový přechod.
- Kliknutím na kterýkoli krok okamžitě zkopírujete jeho kód HEX.
- Zdarma, okamžitě a zcela lokálně — žádné nahrávání, žádný účet.
Jak se používá
- Vyberte Barvu A a Barvu B pomocí výběru barev nebo zadáním kódu HEX.
- Přetažením posuvníku poměru nastavte, kolik Barvy B se má přimíchat.
- Přečtěte si výsledné hodnoty HEX a RGB nad vzorkem barvy.
- Kliknutím na kterýkoli vzorek v 11krokovém žebříčku níže zkopírujete jeho kód HEX.
Příklad
Vstup
Barva A #3B82F6 (modrá), Barva B #F59E0B (jantarová), poměr 50 %Výstup
#9B9E7D — rgb(155, 158, 125)Přesně při 50 % je každý kanál RGB aritmetickým průměrem odpovídajících kanálů obou vstupních barev.
Časté dotazy
Proč se to neshoduje s tím, co bych dostal při míchání skutečné barvy?
Míchání barviva je subtraktivní (pigmenty pohlcují světlo) a závisí na konkrétních použitých pigmentech — smícháním modré a žluté barvy například vznikne zelená. Tento nástroj naopak míchá světlo (kanály RGB) aditivně/lineárně, což je způsob, jakým barvy míchají obrazovky, CSS přechody i většina digitálních designových nástrojů. Oba systémy záměrně dávají skutečně odlišné výsledky, nejde o chybu.
Je to totéž jako CSS linear-gradient mezi dvěma barvami?
Ano — CSS linear-gradient(barvaA, barvaB) interpoluje kanály RGB stejným způsobem jako tento nástroj, takže barva, kterou byste viděli uprostřed takového přechodu, odpovídá zde uvedenému výsledku při 50 %.
Proč smíchaná barva někdy vypadá kalně nebo šedě?
Míchání dvou sytých, ale velmi odlišných odstínů (jako modré a oranžové, které jsou téměř komplementární) v prostoru RGB často vytváří málo sytý, šedohnědý střední odstín — to je skutečná vlastnost interpolace RGB, ne chyba. Pokud chcete živější směs, zkuste míchat barvy, které jsou si na barevném kole blíže, nebo míchejte v prostoru HSL úpravou odstínu při zachování vysoké sytosti (což tento přímý RGB míchač nedělá).
Můžu najednou smíchat víc než dvě barvy?
V jednom kroku ne — nástroj mísí přesně dvě barvy. Chcete-li kombinovat tři barvy, smíchejte nejprve první dvě ve zvoleném poměru, výsledek zkopírujte a vložte jako novou Barvu A proti třetí barvě. Postupné míchání po krocích vám navíc dává kontrolu nad váhou jednotlivých barev, kterou by jediný trojnásobný průměr neposkytl.
Mám použít tento nástroj, nebo generátor odstínů barev?
Pokud potřebujete barvu, která leží mezi dvěma odlišnými barvami — například přechodový odstín mezi modrou barvou vaší značky a jantarovým akcentem — použijte tento míchač. Pokud potřebujete světlejší a tmavší varianty jedné barvy (stavy hover, pozadí, žebříček ve stylu Tailwind 50-900), použijte místo toho Generátor odstínů barev: ten zachovává odstín a sytost neměnné a mění pouze světlost, takže každý výsledek zůstává zřetelně ve stejné barevné rodině.
Jaké formáty barev mohu zadat do vstupních polí?
Textová pole přijímají 6místné kódy HEX, s úvodním # nebo bez něj (např. 3B82F6 nebo #3B82F6). Zkrácený 3místný hex zápis, notace rgb() ani názvy barev CSS tam zpracovány nejsou — ale libovolnou barvu můžete vizuálně vybrat pomocí nativního výběru barev vedle každého pole, přičemž pole HEX se odpovídajícím způsobem aktualizuje.