CodeKitHubČo je tento nástroj?
Miešač farieb lineárne interpoluje červený, zelený a modrý kanál dvoch farieb v zvolenom pomere — presne rovnaký výpočet, aký interne používa prechod (gradient). Pri 0 % je výsledkom Farba A, pri 100 % Farba B a pri 50 % ide o aritmetický priemer každého RGB kanála.
Toto sa líši od miešania skutočných farieb (ktoré je subtraktívne a závisí od pigmentu), a nie je to ani to isté ako priemerovanie v priestore HSL — lineárna interpolácia RGB je to, čo používajú CSS prechody, dizajnérske nástroje a väčšina utilít typu „farba medzi dvoma farbami“, takže výsledok zodpovedá tomu, čo by ste videli v prechode prehliadača medzi rovnakými dvoma farbami.
Prečo ho používať?
- Nájdite prirodzene vyzerajúcu hover alebo aktívnu farbu, ktorá leží medzi vašou základnou farbou a akcentom — namiesto hádania náhodnej úpravy.
- Zobrazte presný HEX kód pri ľubovoľnom pomere, nielen odhad zo snímky obrazovky prechodu.
- 11-krokový rebrík vám jedným kliknutím poskytne celú paletu od jednej farby k druhej, čo je užitočné pri vizualizácii dát alebo pri prechode s viacerými zastávkami.
- Kliknutím na ktorýkoľvek krok okamžite skopírujete jeho HEX kód.
- Zadarmo, okamžite a plne lokálne — žiadny upload, žiadny účet.
Ako sa používa
- Vyberte Farbu A a Farbu B pomocou výberu farby alebo zadaním HEX kódu.
- Potiahnite posuvník pomeru, aby ste nastavili, koľko Farby B sa má primiešať.
- Prečítajte si výsledné hodnoty HEX a RGB nad vzorkou farby.
- Kliknutím na ktorúkoľvek vzorku v 11-krokovom rebríku nižšie skopírujete jej HEX kód.
Príklad
Vstup
Farba A #3B82F6 (modrá), Farba B #F59E0B (jantárová), pomer 50 %Výstup
#9B9E7D — rgb(155, 158, 125)Presne pri 50 % je každý RGB kanál aritmetickým priemerom kanálov oboch vstupných farieb.
Časté otázky
Prečo sa to nezhoduje s tým, čo by som dostal miešaním skutočnej farby (náteru)?
Miešanie náterov je subtraktívne (pigmenty pohlcujú svetlo) a závisí od konkrétnych použitých pigmentov — napríklad zmiešaním modrého a žltého náteru vznikne zelená. Tento nástroj mieša svetlo (RGB kanály) aditívne/lineárne, presne tak, ako to robia obrazovky, CSS prechody a väčšina digitálnych dizajnérskych nástrojov. Tieto dva systémy zámerne produkujú odlišné výsledky, nie je to chyba.
Je to to isté ako CSS linear-gradient medzi dvoma farbami?
Áno — CSS linear-gradient(colorA, colorB) interpoluje RGB kanály rovnakým spôsobom ako tento nástroj, takže farba, ktorú by ste videli v strede takéhoto prechodu, zodpovedá výsledku pri 50 % tu.
Prečo niekedy výsledná farba vyzerá kalne alebo sivo?
Miešanie dvoch sýtych, ale veľmi odlišných odtieňov (napríklad modrej a oranžovej, ktoré sú takmer komplementárne) v priestore RGB často vytvorí stredný odtieň s nízkou sýtosťou, sivohnedý — je to reálna vlastnosť RGB interpolácie, nie chyba. Ak chcete živší výsledok, skúste zmiešať farby, ktoré sú si na farebnom kruhu bližšie, alebo miešajte v priestore HSL úpravou odtieňa pri zachovaní vysokej sýtosti (čo tento jednoduchý RGB miešač nerobí).
Môžem naraz zmiešať viac ako dve farby?
V jednom kroku nie — nástroj mieša presne dve farby. Ak chcete skombinovať tri farby, zmiešajte prvé dve v požadovanom pomere, výsledok skopírujte a vložte ho ako novú Farbu A oproti tretej farbe. Postup po etapách vám navyše dáva kontrolu nad váhovaním, ktorú by jednoduchý priemer troch farieb neposkytol.
Mám použiť toto, alebo generátor odtieňov farieb?
Ak potrebujete farbu, ktorá leží medzi dvomi rôznymi farbami — napríklad prechodový odtieň medzi vašou modrou značkovou farbou a jantárovým akcentom — použite tento miešač. Ak potrebujete svetlejšie a tmavšie varianty jednej farby (hover stavy, pozadia, rebrík v štýle Tailwind 50 – 900), použite radšej Generátor odtieňov farieb: ten drží odtieň a sýtosť pevne a mení iba svetlosť, takže každý výsledok zostáva jasne v rovnakej farebnej rodine.
Aké formáty farieb môžem zadať do vstupných polí?
Textové polia akceptujú 6-miestne HEX kódy, s úvodným # alebo bez neho (napr. 3B82F6 alebo #3B82F6). Skrátený 3-miestny hex, notácia rgb() a názvy farieb CSS sa tam neparsujú — no ľubovoľnú farbu môžete vybrať vizuálne pomocou natívneho výberu farby vedľa každého poľa a pole HEX sa automaticky aktualizuje.