Barevné nástroje ToolDeck vám umožňují převádět mezi formáty barev, kontrolovat kontrastní poměry přístupnosti, generovat palety, vytvářet CSS přechody a vyhledávat názvy barev nebo třídy Tailwind přímo v prohlížeči. Color Converter zpracovává HEX, RGB, HSL a HSV v obou směrech. Contrast Checker testuje soulad s WCAG 2.1 AA a AAA. Palette Generator vytváří komplementární, analogické, triadické a tetradické schémata z libovolné základní barvy. CSS Gradient Generator produkuje kód lineárních a radiálních přechodů připravený ke zkopírování. Color Name Finder přiřazuje libovolnou hodnotu k nejbližší pojmenované barvě CSS a Tailwind Color Finder mapuje libovolné barvy na utility třídy Tailwind. Všechny nástroje běží na straně klienta bez odesílání dat na jakýkoliv server.
Co jsou barevné nástroje?
Barevné nástroje jsou utility, které pomáhají vývojářům a designérům pracovat s digitálními hodnotami barev. Každá barva na obrazovce je uložena jako čísla: tři kanály pro RGB (červená, zelená, modrá), šestnáctkový triplet pro zkrácený zápis CSS nebo úhlový odstín plus sytost a světlost pro HSL. Ruční převod mezi těmito reprezentacemi je pomalý a náchylný k chybám, zejména když je třeba zohlednit také průhlednost alfa nebo novější modely jako OKLCH.
Mimo převod formátů zahrnuje práce s barvami testování přístupnosti, tvorbu palet a vytváření přechodů. WCAG 2.1 definuje minimální kontrastní poměry (4,5:1 pro normální text na úrovni AA, 7:1 pro AAA), které je obtížné ověřit pouhým okem. Generování harmonických barevných schémat vyžaduje přesné výpočty úhlů na HSL barevném kole. CSS přechody potřebují správnou syntaxi pro směr, barevné zarážky a záložní hodnoty. Dělat toto vše ručně napříč design systémem s desítkami tokenů se rychle stává zdlouhavým.
Barevné nástroje tyto úkoly automatizují. Přijmou barvu v jednom formátu, provedou matematiku a vrátí výsledek, který potřebujete — ať jde o převedenou hodnotu, výsledek splnění/nesplnění přístupnosti, sadu harmonických vzorků nebo úryvek CSS kódu. Když nástroj běží v prohlížeči, také se vyhnete nahrávání citlivých design tokenů do služeb třetích stran.
Proč používat barevné nástroje na ToolDeck?
Barevné nástroje ToolDeck běží zcela ve vašem prohlížeči. Žádné hodnoty barev neopustí váš počítač, nevyžaduje se žádný účet a každý nástroj se načte okamžitě bez instalace rozšíření nebo desktopového softwaru.
🎨Převod formátů v jednom kroku
Vložte HEX kód a získejte hodnoty RGB, HSL a HSV současně. Není třeba řetězit více převodníků nebo si pamatovat vzorce pro převod.
🔒Uchovejte design tokeny v soukromí
Veškeré zpracování probíhá na straně klienta. Barvy vaší značky, neuvolněná rozhodnutí o paletě a hodnoty interního design systému zůstávají na vašem zařízení.
♿Testujte přístupnost okamžitě
Zkontrolujte libovolný pár popředí/pozadí vůči prahům WCAG 2.1 AA a AAA pro normální i velký text. Získejte přesný kontrastní poměr, nejen označení splnění/nesplnění.
⚡Kopírujte výstup připravený pro produkci
Každý nástroj produkuje hodnoty, které lze vložit přímo do CSS, konfigurace Tailwind nebo vstupních polí designových nástrojů. Žádné přeformátování není potřeba.
Případy použití barevných nástrojů
Zde je šest běžných scénářů, kde barevné nástroje ToolDeck šetří čas.
Údržba design systému
Při aktualizaci design systému často dostanete barvy v HEX od designéra, ale potřebujete HSL pro CSS vlastní vlastnosti.
Color Converter překládá mezi formáty, takže můžete naplnit soubory tokenů bez ručních výpočtů.
Audity přístupnosti
Při auditu souladu s WCAG musí každá kombinace textu a pozadí splňovat minimální kontrastní poměry.
Color Contrast Checker zobrazuje přesný poměr a stav splnění AA/AAA pro normální i velké velikosti textu.
Průzkum palety značky
Počínaje jednou barvou značky potřebujete varianty akcentu a neutrálních barev.
Color Palette Generator vypočítá komplementární, analogické, triadické a tetradické harmonie, abyste mohli vyhodnotit možnosti před závazkem k paletě.
Stylování pozadí CSS
Vytvoření hero sekce nebo pozadí karty s přechodem vyžaduje správnou syntaxi CSS pro úhly, barevné zarážky a předpony dodavatelů.
CSS Gradient Generator vám umožní sestavit přechod vizuálně a zkopírovat kód.
Migrace na Tailwind
Při migraci projektu na Tailwind CSS musíte mapovat stávající hodnoty HEX nebo RGB na nejbližší utility třídu Tailwind.
Tailwind Color Finder najde nejbližší shodu a zobrazí rozdíl, abyste mohli rozhodnout, zda je aproximace přijatelná.
Code review a dokumentace
Při code review neznamená surová hodnota HEX jako #708090 na první pohled nic.
Color Name Finder ji identifikuje jako SlateGray, čímž zpřehlední recenze i dokumentaci.
Přehled barevných modelů CSS
CSS podporuje více barevných modelů. Tabulka níže shrnuje šest nejběžnějších formátů, jejich syntaxi a typické případy použití. Všechny tyto formáty jsou podporovány Color Converterem ToolDeck.
| Model | CSS syntaxe | Kanály | Rozsah hodnot | Typické použití |
|---|
| HEX | #rrggbb | Červená, zelená, modrá | 00–ff na kanál | Nejčastější v CSS, předávání návrhů, firemní směrnice |
| RGB | rgb(r, g, b) | Červená, zelená, modrá | 0–255 na kanál | JavaScript canvas API, vypočítané styly, zpracování obrázků |
| HSL | hsl(h, s%, l%) | Odstín, sytost, světlost | 0–360 / 0–100% / 0–100% | Design tokeny, generování témat, programové varianty odstínů |
| HSV | N/A (není v CSS) | Odstín, sytost, hodnota | 0–360 / 0–100% / 0–100% | Výběrníky barev (Photoshop, Figma), hardwarová kalibrace barev |
| OKLCH | oklch(L C H) | Světlost, chroma, odstín | 0–1 / 0–0,4 / 0–360 | Perceptuálně uniformní palety (specifikace CSS Color Level 4) |
| Named | např. slategray | Interně mapováno na RGB | 148 předdefinovaných názvů | Prototypování, čitelný kód, rychlé ukázky |
CSS Color Level 4 (W3C) také definuje funkce lab(), lch() a color(). HEX a RGB zůstávají nejrozšířenější napříč prohlížeči a designovými nástroji.
Jak vybrat správný barevný nástroj
Každý barevný nástroj řeší jiný problém. Použijte průvodce níže pro nalezení správného nástroje pro váš úkol.
- 1
Pokud potřebujete převést barvu mezi formáty HEX, RGB, HSL nebo HSV → Color Converter - 2
Pokud potřebujete ověřit, zda pár barvy textu/pozadí splňuje standardy přístupnosti WCAG → Color Contrast Checker - 3
Pokud potřebujete generovat sadu harmonických barev z jedné základní barvy → Color Palette Generator - 4
Pokud potřebujete sestavit lineární nebo radiální CSS přechod a získat kód → CSS Gradient Generator - 5
Pokud potřebujete najít lidsky čitelný název CSS nejbližší dané hodnotě barvy → Color Name Finder - 6
Pokud potřebujete mapovat libovolnou barvu na nejbližší utility třídu Tailwind CSS → Tailwind Color Finder
Všech šest nástrojů přijímá vstup v různých formátech. Pokud si nejste jisti, v jakém formátu vaše barva je, začněte s Color Converterem, který automaticky detekuje zápis HEX, RGB, HSL a HSV.
Často kladené otázky
Jaký je rozdíl mezi formáty barev HEX a RGB?
HEX a RGB reprezentují stejný barevný prostor. HEX kód jako #ff6600 je šestnáctkové kódování tří kanálů RGB: ff = 255 (červená), 66 = 102 (zelená), 00 = 0 (modrá). Jediný rozdíl je v zápisu. HEX je kompaktnější v CSS šablonách stylů, zatímco RGB je snazší programově manipulovat, protože každý kanál je již celé desetinné číslo.
Kdy bych měl používat HSL místo HEX nebo RGB?
HSL odděluje odstín (samotnou barvu) od sytosti a světlosti. To usnadňuje tvorbu variant odstínů: ponechte odstín pevný, snižte světlost pro tmavší odstín, zvyšte ji pro světlejší tón. Design systémy, které generují světlá/tmavá témata z jedné základní barvy, ukládají tokeny v HSL právě z tohoto důvodu. CSS vlastní vlastnosti se také dobře kombinují s HSL, protože lze přepsat jednotlivé kanály.
Jaký kontrastní poměr vyžaduje WCAG 2.1 pro text?
WCAG 2.1 úroveň AA vyžaduje minimální kontrastní poměr 4,5:1 pro normální text (pod 18pt nebo 14pt tučné) a 3:1 pro velký text (18pt+ nebo 14pt+ tučné). Úroveň AAA zvyšuje tyto prahové hodnoty na 7:1 a 4,5:1. Tyto poměry se vypočítávají z relativní luminance barev popředí a pozadí pomocí vzorce definovaného v kritériu úspěšnosti WCAG 2.1 1.4.3.
Kolik pojmenovaných barev CSS podporuje?
CSS definuje 148 pojmenovaných barev, zděděných ze specifikací barev SVG 1.1 a CSS3. Sahají od běžných názvů jako red, blue a white až po specifické názvy jako MediumSlateBlue, PapayaWhip a LavenderBlush. Pojmenované barvy se mapují na pevné hodnoty RGB. Specifikace CSS Color Level 4 zachovává stejných 148 názvů a nepřidává žádné nové. Prohlížeče také rozpoznávají klíčové slovo transparent (ekvivalent rgba(0,0,0,0)).
Mohu dnes používat barvy OKLCH v CSS?
Ano. Funkce oklch() je podporována v Chrome 111+, Firefox 113+ a Safari 15.4+. OKLCH je součástí specifikace CSS Color Level 4 vydané W3C. Jeho hlavní výhoda oproti HSL je percepční uniformita: dvě barvy se stejnou hodnotou světlosti v OKLCH vypadají pro lidské oko stejně jasně, což pro HSL neplatí. Díky tomu je OKLCH lepší volbou pro generování přístupných palet s konzistentním vnímaným jasem.
Jaký je rozdíl mezi HSL a HSV?
HSL i HSV používají válcovou reprezentaci s odstínem jako úhlem, ale světlost definují odlišně. V HSL je světlost 50 % čistá barva; 0 % je černá, 100 % je bílá. V HSV je hodnota 100 % čistá barva; 0 % je černá. HSV nemá vestavěný způsob, jak dosáhnout bílé bez snížení sytosti. Designéři a výběrníky barev (Photoshop, Figma) obvykle používají HSV, zatímco CSS nativně používá HSL.
Jak najdu třídu Tailwind pro libovolnou barvu HEX?
Tailwind CSS je dodáván s pevnou paletou přibližně 220 barevných tříd (22 odstínů krát 10 tónů, plus černá, bílá a transparent). Pro nalezení nejbližší třídy k dané hodnotě HEX vypočítáte euklidovskou vzdálenost v percepčním barevném prostoru (jako CIELAB nebo OKLCH) mezi vaší barvou a každým vzorkem Tailwind. Tailwind Color Finder na ToolDeck to dělá automaticky a zobrazuje nejbližší shodu spolu s barevným rozdílem, abyste mohli posoudit, zda je aproximace dostatečně přesná.
Je bezpečné vkládat důvěrné barvy značky do online nástroje?
Záleží na nástroji. Jakýkoliv nástroj, který odesílá váš vstup na server, tyto hodnoty zpřístupňuje v síťovém provozu a serverových záznamech. Barevné nástroje ToolDeck běží zcela ve vašem prohlížeči pomocí JavaScriptu na straně klienta. Žádné HTTP požadavky nepřenášejí vaše barevná data do žádného backendu. Toto můžete ověřit otevřením karty Síť ve vašem prohlížeči při používání nástroje. Pro maximální opatrnost můžete nástroje používat také offline po prvním načtení stránky.