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.
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.
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.
Č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“.