Nástroje pre farby — výber, paleta, kontrast, prechod a ďalšie
Nástroje pre farby
Bezplatné online nástroje pre farby — výber farby, generátor palety, prevodník formátov, simulátor farebnej slepoty, generátor prechodov, kontrolór kontrastu WCAG, extraktor dominantnej farby, miešač, farebná teplota a tradičné čínske farby. Všetko v prehliadači. Na písanie HTML/CSS (ekvivalenty hex/rgb/hsl, 148 pomenovaných farieb, paleta 216 bezpečných farieb a deklarácie pripravené na kopírovanie) slúži nástroj zameraný na kód Kódy farieb HTML.
HEX:#ff0000
RGB:255, 0, 0
HSL:0, 100%, 50%
Komplementárna
Triadická
Tetradická
Analogická
Rozdelene komplementárna
Pôvodný
Simulovaný
0%100%
Ukážkový text
50%
6500K
Ako funguje každý režim
Výber: veľký štvorec je mapa sýtosti a jasu pri aktuálnom odtieni — zľava doprava sa zvyšuje sýtosť, zhora nadol klesá jas. Kliknutím kdekoľvek na ňu sa vyberie farba. Tenký zvislý pás vpravo je posúvač odtieňa (0° až 360°) — jeho posunutím sa zmení základný odtieň a štvorec sa prekreslí. Vpravo sa zobrazuje vybraná farba vo formátoch HEX, RGB a HSL — kliknutím na ľubovoľnú hodnotu sa skopíruje.
Paleta: ľavý výber farby a pravé pole na úpravu uchovávajú tú istú základnú farbu — sú obojsmerne synchronizované (výberom farby alebo zápisom hex hodnoty sa obe polia aktualizujú). Päť riadkov palety nižšie je odvodených z tejto základnej farby otočením jej odtieňa na farebnom kruhu: Komplementárna (odtieň +180°, najsilnejší kontrast), Triadická (+120° / +240°, vyvážená trojica), Tetradická (+90° / +180° / +270°, obdĺžniková štvorica), Analogická (−30° / základná / +30° / +60°, harmonickí susedia) a Rozdelene komplementárna (+150° / +210°, jemnejšia než čisto komplementárna). Prvá vzorka v každom riadku je vždy samotná základná farba a ostatné sú jej varianty s otočeným odtieňom.
Prevod: zadá sa ľubovoľná platná farba — HEX (#3b82f6), funkcia CSS (rgb(59,130,246) / hsl(217,90%,60%)) alebo pomenovaná farba (dodgerblue) — a hneď sa získa prevod do všetkých hlavných formátov. Rozbaľovací zoznam formátov môže analyzátoru nápovedať, ak automatická detekcia zvolí zlý formát. Výstup zobrazuje HEX, RGB (0–255), HSL (stupne, %, %), HSV a CMYK. Kliknutím na hodnotu sa skopíruje.
Farebná slepota: nahrá sa obrázok a zvolí sa typ farebného videnia, ktorý sa má simulovať. Nástroj použije na každý pixel maticovú transformáciu kužeľových odpovedí, čím prevedie hodnoty RGB tak, aby približne zodpovedali tomu, ako ľudia s rôznymi formami farebnej slepoty vnímajú obrázok. Ľavé plátno zobrazuje pôvodný obrázok, pravé simulovaný pohľad. Rozbaľovací zoznam pokrýva tri typy dichromázie (chýbajúci jeden kužeľový pigment: protanopia, deuteranopia, tritanopia), úplnú achromatopsiu (žiadne farebné videnie) a tri typy anomálnej trichromázie (slabá odpoveď kužeľov). Obrázky s nižším rozlíšením sa načítajú rýchlejšie.
Prechod: ide o vizuálny tvorca prechodov CSS. Zvolí sa lineárny (smerový) alebo radiálny (od stredu von), nastaví sa uhol (0° = zdola nahor, 90° = zľava doprava) a definujú sa farebné zastávky. Každá zastávka má výber farby a je rovnomerne rozložená (0 %, 50 %, 100 % pri troch zastávkach). Kliknutím na + Bod sa pridajú medziľahlé farebné body pre zložitejšie prechody. Náhľad sa aktualizuje živo a vygenerované CSS je pripravené na kopírovanie nižšie.
Kontrast: vypočíta pomer kontrastu WCAG 2.1 medzi popredím textu a farbou pozadia pomocou vzorca relatívnej svetelnosti z hodnôt sRGB (s korekciou gamma). Pomer sa pohybuje od 1:1 (identické farby) po 21:1 (čierna oproti bielej). Výsledky ukazujú úspech alebo neúspech na troch úrovniach súladu: AA normálny text (pomer ≥ 4,5:1), AAA veľký text (pomer ≥ 4,5:1 pre text ≥ 18 pt alebo tučný ≥ 14 pt) a AAA normálny text (pomer ≥ 7:1). Ukážkový text sa pri úprave farieb aktualizuje v reálnom čase.
Extrakcia: nahrá sa ľubovoľný obrázok a nástroj zistí jeho paletu dominantných farieb pomocou kvantizácie farieb. Obrázok sa zmenší na 100×100 px, potom sa každý pixel zaradí do histogramu so 4 bitmi na kanál (16 úrovní pre R/G/B = 4096 košov). Priehľadné pixely sa preskočia. Najčastejšie koše sa zoradia podľa počtu pixelov a stredová farba každého koša sa stane vzorkou. Každá vzorka zobrazuje svoju hodnotu HEX a percento pixelov obrázka, ktoré reprezentuje. Posúvačom počtu (2–12) sa nastaví, koľko dominantných farieb sa extrahuje.
Miešač: mieša dve farby v priestore farieb RGB lineárnou interpoláciou. Posúvač pomeru určuje zmes: 0 % je čistá farba 1, 100 % je čistá farba 2 a 50 % je rovnomerná zmes. Každý kanál R, G, B sa interpoluje nezávisle (napr. červená + modrá pri 50 % dá fialovú). Náhľad výsledku a hodnoty HEX/RGB sa aktualizujú živo pri ťahaní posúvača alebo zmene ktorejkoľvek farby.
Teplota: prevádza teplotu čierneho telesa v kelvinoch na zodpovedajúcu viditeľnú farbu podľa aproximačného algoritmu Tannera Hellanda. Nižšie teploty (1000–3000 K) dávajú teplé oranžové a červené tóny ako sviečka a žiarovka; stredný rozsah (4000–6500 K) prechádza od neutrálnej bielej po denné svetlo; vyššie teploty (8000–40000 K) prechádzajú do studenej modrej ako zamračená obloha a hlboká voda. Štítok pod tým určuje najbližší reálny zdroj svetla pre každú teplotu.
Pomenované: prehľad kombinovanej zbierky 80 tradičných čínskych farieb (胭脂, 朱砂, 黛蓝 a ďalšie — názvy zo klasickej čínskej literatúry, maľby a farbiarskych tradícií) a viac ako 140 pomenovaných farieb CSS (štandardná webová paleta). Vyhľadávacie pole filtruje podľa názvu alebo hodnoty HEX a rozbaľovací zoznam prepína kategórie. Kliknutím na farebný štvorček sa zobrazí veľký náhľad s názvom a kódom HEX — kliknutím na kód sa skopíruje.