Nástroje pro barvy

Bezplatné online nástroje pro barvy — výběr barvy, generátor palet, převodník formátů, simulátor barevné slepoty, generátor přechodů, kontrolu kontrastu WCAG, extrakci dominantní barvy, míchání, barevnou teplotu a tradiční čínské barvy. Vše ve vašem prohlížeči.
Pro psaní HTML/CSS (ekvivalenty hex/rgb/hsl, 148 pojmenovaných barev, webová paleta 216 barev, deklarace připravené ke kopírování) použijte pomocníka zaměřeného na kód Kódy barev HTML.
HEX:#ff0000
RGB:255, 0, 0
HSL:0, 100%, 50%
Jak funguje každý režim
Výběr: velký čtverec je mapa sytosti a jasu při aktuálním odstínu — zleva doprava sytost roste, shora dolů jas klesá. Kliknutím kamkoli vyberete barvu. Tenký svislý pruh vpravo je posuvník odstínu (0° až 360°) — posunutím změníte základní odstín a čtverec se překreslí. Vpravo se zobrazuje vybraná barva ve formátech HEX, RGB a HSL — kliknutím na libovolnou hodnotu ji zkopírujete.
Paleta: levý výběr barvy a pravé editační pole ukládají tutéž základní barvu — jsou obousměrně synchronizované (vyberete barvu nebo napíšete hex hodnotu, obě se aktualizují). Pět řádků palety níže je odvozeno z této základní barvy otáčením jejího odstínu po barevném kruhu: doplňková (odstín +180°, nejsilnější kontrast), triadická (+120° / +240°, vyvážená trojice), tetradická (+90° / +180° / +270°, obdélníková čtyřbarevná), analogická (−30° / základ / +30° / +60°, harmonická sousedství) a rozdělená doplňková (+150° / +210°, měkčí než čistá doplňková). První vzorek každého řádku je vždy samotná základní barva, zbytek jsou její variace s otočeným odstínem.
Převod: zadejte libovolnou platnou barvu — HEX (#3b82f6), funkci CSS (rgb(59,130,246) / hsl(217,90%,60%)) nebo pojmenovanou barvu (dodgerblue) — a okamžitě získáte převod do všech hlavních formátů. Rozbalovací nabídka formátu může parseru napovědět, pokud automatická detekce zvolí špatný formát. Výstup zobrazuje HEX, RGB (0–255), HSL (stupně, %, %), HSV a CMYK. Kliknutím na libovolnou hodnotu ji zkopírujete.
Slepota na barvy: nahrajte obrázek a zvolte typ poruchy vidění barev k simulaci. Nástroj aplikuje na každý pixel transformaci maticí odezvy čípků, která přemapuje hodnoty RGB tak, aby přibližně ukázala, jak obrázek vnímají lidé s různými formami barevné slepoty. Levé plátno ukazuje originál, pravé simulovaný pohled. Rozbalovací nabídka pokrývá tři typy dichromazie (chybí jeden barevný pigment čípků: protanopie, deuteranopie, tritanopie), úplnou achromatopsii (žádné vidění barev) a tři typy anomální trichromazie (slabá odezva čípků). Obrázky s nižším rozlišením se načítají rychleji.
Přechod: vizuální tvůrce přechodů CSS. Zvolte lineární (směrový) nebo radiální (od středu ven), nastavte úhel (0° = zdola nahoru, 90° = zleva doprava) a definujte barevné zastávky. Každá zastávka má výběr barvy a je rovnoměrně rozmístěna (pro tři zastávky 0 %, 50 %, 100 %). Kliknutím na + Zastavit přidáte mezilehlé barevné body pro složitější přechody. Náhled se aktualizuje živě a vygenerované CSS je níže připravené ke kopírování.
Kontrast: počítá poměr kontrastu WCAG 2.1 mezi barvou popředí textu a barvou pozadí podle vzorce relativní jasnosti z hodnot sRGB (s gama korekcí). Poměr sahá od 1:1 (totožné barvy) po 21:1 (černá na bílé). Výsledky ukazují splnění na třech úrovních: AA normální text (poměr ≥ 4,5:1), AAA velký text (poměr ≥ 4,5:1 pro text ≥ 18 pt nebo tučný ≥ 14 pt) a AAA normální text (poměr ≥ 7:1). Ukázkový text se při úpravě barev aktualizuje v reálném čase.
Extrakce: nahrajte libovolný obrázek a nástroj určí jeho paletu dominantních barev pomocí kvantizace barev. Obrázek se zmenší na 100×100 px a každý pixel se zařadí do histogramu se 4 bity na kanál (16 úrovní pro R/G/B = 4096 přihrádek). Průhledné pixely se přeskočí. Nejčetnější přihrádky se seřadí podle počtu pixelů a středová barva každé přihrádky se stane vzorkem. Každý vzorek ukazuje svou hodnotu HEX a procento pixelů obrázku, které reprezentuje. Posuvníkem počtu (2–12) řídíte, kolik dominantních barev se extrahuje.
Míchání: mísí dvě barvy v prostoru barev RGB lineární interpolací. Posuvník poměru určuje směs: 0 % je čistá Barva 1, 100 % je čistá Barva 2 a 50 % je rovnoměrná směs. Každý kanál R, G, B se interpoluje nezávisle (např. červená + modrá v poměru 50 % dává fialovou). Výsledný náhled a hodnoty HEX/RGB se aktualizují živě při tažení posuvníku nebo změně kterékoli barvy.
Teplota: převádí barevnou teplotu černého tělesa v kelvinech na odpovídající viditelnou barvu podle aproximačního algoritmu Tannera Hellanda. Nižší teploty (1000–3000 K) dávají teplé oranžové a červené tóny jako svíčka a žárovka; střední rozsah (4000–6500 K) dává neutrální bílou až denní světlo; vyšší teploty (8000–40000 K) se posouvají k chladné modré jako zatažená obloha a hluboká voda. Popisek níže určuje nejbližší reálný zdroj světla pro každou teplotu.
Pojmenované: procházejte spojenou sbírku 80 tradičních čínských barev (胭脂, 朱砂, 黛蓝 a další — názvy čerpané z klasické čínské literatury, malby a barvířství) a více než 140 pojmenovaných barev CSS (standardní webová paleta). Vyhledávací pole filtruje podle názvu nebo hodnoty HEX a rozbalovací nabídka přepíná kategorie. Kliknutím na barevný čip zobrazíte velký náhled s názvem a kódem HEX — kliknutím na kód jej zkopírujete.