Převodník barev (HEX, RGB, HSL)
Převádějte barvy mezi HEX (#RRGGBB), RGB (0—255) a HSL (odstín, sytost, světlost) v reálném čase. Upravte hodnoty pro výběr nebo typ, abyste viděli, jak se všechny formáty aktualizují společně — ideální pro CSS, Figma handoff a pokyny pro značku. HSL usnadňuje intuitivní úpravy (světlejší/tmavší bez posunu odstínu) než úpravy hexadecimálních číslic.
Barva
Výsledek
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
Jak převést barvy
1. Vyberte barvu vizuálně nebo zadejte hodnoty HEX, RGB nebo HSL.
2. Okamžitě zobrazí ekvivalentní hodnoty ve všech podporovaných formátech.
3. Vylaďte světlost HSL pro stavy vznášení při zachování odstínu značky.
4. Zkopírujte formát, který váš zásobník potřebuje (#hex pro CSS, rgb() pro moderní prohlížeče).
Příklady převodu barev
Značková modrá #2563EB
RGB rgb(37, 99, 235); HSL hsl (217, 84 %, 53 %). Darken hover: hsl(217, 84%, 45%) bez hádání hexu.
CSS rgb to HEX pro SVG
rgb(255, 87, 51) → #FF5733 pro výplň SVG a barevné zdroje Android XML.
Neutrální šedá pro okraje
hsl(220, 10%, 90%) → velmi světlá studená šedá; mírně zvyšte sytost pro tónovaná pozadí uživatelského rozhraní.
Kdy tento nástroj použít
• Když překládáte tokeny návrhu mezi HEX ve Figma a HSL v proměnných CSS.
• Když vytváříte konzistentní světlá/tmavá témata posunutím světlosti HSL.
• Když dokumentujete palety značek pro vývojáře a obchodníky.
Kdy zvolit něco jiného
• Když musíte ověřit kontrast WCAG — použijte kontrolu kontrastu.
• Když potřebujete pro tisk CMYK nebo Pantone — použijte nástroje specifické pro tisk.
• Když generujete úplné přechody — použijte generátor přechodů CSS.
Teorie barev pro práci s uživatelským rozhraním
Doplňkové barvy sedí naproti na kolečku odstínu (180° od sebe) — vysoký kontrast, pro CTA používejte střídmě. Analogické odstíny (±30°) působí harmonicky na palubní desky. Neutrální UI chrome často používá modré nebo šedé odstíny s nízkou sytostí (hsl 220, 10 %, 96 %) spíše než čisté #EEE, které může na různých obrazovkách vypadat teple/studeně. Omezte paletu značky na jeden primární odstín, 2—3 neutrální a sémantické zelené/červené pro stav.
Usnadnění začíná převodem
Nádherná #7C3AED fialová na bílém nemusí u malého textu selhat v kontrastu. Po výběru barev zde proveďte kontrolu kontrastu páry popředí/pozadí. Chcete-li opravit chyby, upřednostněte vylepšení HSL: ztmavte text nebo zesvětlete pozadí při zachování odstínu. Při chybách se nespoléhejte pouze na barvy — spárujte je s ikonami a štítky (WCAG 1.4.1).
Časté dotazy
K čemu je HSL dobré?
Nastavení světlosti a sytosti při zachování stabilního odstínu — např. primární, primární-hover, primární-ztlumený z hodnoty jednoho odstínu.
HEX zkratka #RGB?
#F53 se rozšíří na #FF5533. Přijímáme 3- nebo 6-místné hex (volitelně #).
sRGB vs displej-P3?
Tento nástroj používá sRGB, standard pro web CSS. Displeje se širokým gamutem se mohou vykreslovat mírně odlišně.
Alfa / průhlednost?
8místné HEX (#RRGGBBAA) a rgba() mohou být podporovány tam, kde nástroj zpřístupňuje alfa — zkontrolujte pole uživatelského rozhraní.
Proč moje součty RGB vypadají špatně v hex?
Každý kanál má 0—255 → dvě hexadecimální číslice. 255 = FF, nikoli zřetězené „255“.
Odesílají se moje data na server?
Ne.
Je tento nástroj zdarma?
Ano.