CSS snippety
Kontrast (WCAG)
Barevné harmonie
Jak převodník barev použít
- Vyberte barvu přes color picker nebo zadejte HEX kód do textového pole. Obě možnosti se vzájemně synchronizují.
- Všech 8 barevných formátů (HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH) se aktualizuje okamžitě. Žádné tlačítko není potřeba.
- Klikněte na ikonu kopírování u libovolného formátu. Hodnota se zkopíruje do schránky a zobrazí se potvrzení.
- Podívejte se na WCAG sekci, kde vidíte kontrastní poměr vůči bílé a černé s hodnocením AAA, AA nebo Fail.
- V sekci harmonií najdete doplňkovou, analogickou a triádovou paletu. Kliknutím na swatch přepnete aktivní barvu.
Převod HEX na RGB a zpět
HEX a RGB popisují stejnou barvu jiným zápisem. HEX kód #FF6B6B odpovídá hodnotě RGB(255, 107, 107). Převod je čistě matematický: každé dva znaky HEX kódu představují jednu barevnou složku v šestnáctkové soustavě. FF je 255, 6B je 107.
V praxi potřebujete HEX hlavně v CSS a designových nástrojích jako Figma. RGB zase v programovacích jazycích nebo při práci s Canvas API. Pokud vytváříte vlastní QR kód s barvami, hodí se mít hodnoty v obou formátech po ruce.
Co je OKLCH a proč ho používat v CSS
OKLCH je moderní barevný prostor navržený pro CSS. Na rozdíl od HSL odpovídá tomu, jak barvy vnímá lidské oko. Dva odstíny se stejnou hodnotou lightness v OKLCH vypadají skutečně stejně světlé. V HSL to neplatí: žlutá s lightness 50 % vypadá výrazně světlejší než modrá se stejnou hodnotou.
Prohlížeče OKLCH podporují od roku 2023 (Chrome 111, Firefox 113, Safari 16.4). Zápis vypadá takto: oklch(0.7 0.15 30). První číslo je světlost (0 až 1), druhé sytost (chroma) a třetí úhel odstínu ve stupních. Pro generování konzistentních barevných palet je OKLCH nejlepší volba, protože změna jednoho parametru nemění vnímaný jas.
WCAG kontrast barev: co potřebujete vědět
Kontrastní poměr určuje, jak snadno se text na barevném pozadí čte. WCAG 2.1 definuje tři úrovně: poměr 4,5:1 splňuje AA pro běžný text, 3:1 stačí pro velký text a 7:1 je potřeba pro úroveň AAA. Šedý text na bílém pozadí s poměrem 2:1 propadne, i když vám připadá čitelný.
Náš převodník barev kontroluje kontrast automaticky. U každé barvy vidíte poměr vůči bílému i černému pozadí. Díky tomu hned víte, jestli vaše barva splní požadavky přístupnosti. Pro webové vývojáře je to praktičtější než přepínat mezi převodníkem a samostatným nástrojem na kontrast.
CMYK vs. RGB: tisk versus obrazovka
RGB míchá světlo (červená, zelená, modrá) a funguje na monitorech, telefonech a projektorech. CMYK míchá inkousty (azurová, purpurová, žlutá, černá) a používá se v tiskárnách. Převod mezi nimi není přesný, protože RGB zobrazí víc barev než CMYK dokáže vytisknout. Sytá oranžová nebo neonová zelená na obrazovce v tisku vždycky ztrácí.
Pokud připravujete grafiku pro tisk, zkontrolujte si CMYK hodnoty předem. Náš převodník vám ukáže přibližný CMYK ekvivalent každé barvy. Pro finální tiskovou přípravu ale doporučujeme pracovat přímo v CMYK profilu v grafickém editoru. Hodnoty z kalkulačky vám poslouží jako rychlá orientace, jestli barva v tisku bude vypadat podobně.
Časté otázky
Jak převedu HEX barvu na RGB?
Zadejte HEX kód (třeba #3498db) do textového pole nebo color pickeru. RGB hodnota se zobrazí okamžitě v příslušném řádku. Stačí kliknout na ikonu kopírování a máte ji ve schránce. Ruční postup: rozdělte HEX na tři dvojice (34, 98, db) a každou převeďte z šestnáctkové na desítkovou soustavu.
Jaký je rozdíl mezi HSL a HSV?
Oba formáty popisují barvu pomocí odstínu, sytosti a třetí složky. V HSL je to lightness (světlost), v HSV je to value (jas). Praktický rozdíl: HSL s lightness 50 % dává „čistou“ barvu, zatímco HSV s value 100 % dává nejsytější variantu. CSS používá HSL, grafické editory jako Photoshop pracují s HSV.
Podporuje převodník průhlednost (alpha kanál)?
Ano. Formáty RGBA a HSLA obsahují alpha kanál pro nastavení průhlednosti. Hodnota 1 znamená plnou neprůhlednost, 0 je úplná průhlednost. Když změníte alpha v RGBA, automaticky se aktualizuje i HSLA a naopak.
Můžu si barvu uložit nebo sdílet?
Každá barva se automaticky uloží do URL jako hash (například #ff6b6b). Stačí zkopírovat adresu z prohlížeče a poslat ji kolegovi. Po otevření odkazu se barva načte přesně tak, jak jste ji nastavili.
Funguje výběr barvy z obrazovky (EyeDropper)?
V prohlížečích Chrome a Edge ano. Po kliknutí na ikonu kapátka se kurzor změní na pipetu a můžete vybrat barvu z libovolného místa na obrazovce. Firefox a Safari tuto funkci zatím nepodporují, v těchto prohlížečích se ikona nezobrazí.