CodeKitHubCo je tento nástroj?
Barvy na webu se zapisují v několika ekvivalentních formátech, definovaných specifikací CSS Color na MDN. HEX (#4f46e5) je kompaktní forma používaná všude v CSS a při předávání návrhů. RGB (rgb(79, 70, 229)) přímo udává složky červené, zelené a modré, což často potřebuje kód. HSL (hsl(243, 75%, 59%)) popisuje odstín, sytost a jas — nejintuitivnější formát pro úpravu barvy, například její ztmavení nebo snížení sytosti.
Všechny popisují stejnou barvu; tento nástroj mezi nimi přesně převádí a zobrazuje náhled, abyste si potvrdili, že jde přesně o tu barvu, kterou jste chtěli.
Proč ho používat?
- Přijímá jakýkoli vstupní formát — HEX (3 nebo 6 znaků), RGB nebo HSL — a vrací všechny formáty najednou.
- Živá náhledová dlaždice, takže vidíte barvu, ne jen čísla.
- Vizuální výběr barvy pro případ, že chcete vybírat okem.
- Kopírování jedním klikem pro každý formát, připravené pro CSS nebo kód.
- Zdarma, okamžité, bez nahrávání.
Jak se používá
- Napište nebo vložte barvu: funguje #4f46e5, rgb(79, 70, 229) i hsl(243, 75%, 59%).
- Nebo klikněte na výběr barvy a zvolte ji vizuálně.
- Přečtěte si všechny tři formáty ve výsledcích a zkontrolujte náhledovou dlaždici.
- Klikněte na "Kopírovat" u formátu, který potřebujete.
Příklad
Vstup
#4f46e5Výstup
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tři zápisy, jedna identická barva.
Který formát byste měli použít?
Všechny tři formáty popisují přesně stejnou barvu — volba záleží na tom, s kterým se pro danou práci nejlépe pracuje, ne na přesnosti.
| Formát | Nejlepší pro | Proč |
|---|---|---|
| HEX (#4f46e5) | CSS, předávání návrhů, rychlé kopírování a vkládání | Nejkratší na napsání a vložení; univerzální formát v návrhářských nástrojích jako Figma. |
| RGB (rgb(79,70,229)) | Kód, který přímo manipuluje s kanály, práce s plátnem/obrázky | Odpovídá tomu, jak grafická API a data pixelů obrázků skutečně ukládají barvu. |
| HSL (hsl(243,75%,59%)) | Úprava barvy — světlejší, tmavší, více/méně sytá | Jas a sytost jsou samostatná čísla, která lze upravovat přímo, na rozdíl od HEX/RGB, kde se posouvá každý kanál. |
Časté případy použití
- Vizuální výběr barvy v návrhářském nástroji a její následný převod na přesnou hodnotu HEX nebo RGB potřebnou v CSS nebo kódu.
- Vytvoření sady příbuzných odstínů (světlejších/tmavších variant) převodem do HSL, úpravou jasu a převodem zpět.
- Sladění barvy značky napříč různými nástroji, které očekávají různé formáty — soubor loga v RGB, styleguide v HEX, CSS proměnná, která pro theming potřebuje HSL.
- Ověření, že barva vzatá ze screenshotu nebo návrhového souboru (často udaná jako RGB) odpovídá hodnotě HEX v stylopisu.
Časté dotazy
Kdy použít HSL místo HEX nebo RGB?
Když chcete o barvě uvažovat logicky. Ztmavení barvy o 10 % v HSL znamená snížit jas o 10 bodů; v HEX nebo RGB byste museli přepočítat všechny kanály. Design systémy proto často definují palety právě v HSL.
Podporuje nástroj 3znakový HEX jako #fff?
Ano. #fff je zkratka pro #ffffff — každá číslice se zdvojí. Obě formy jsou přijímány a výstup zobrazuje plnou 6znakovou formu.
Co alfa (průhlednost)?
Tento nástroj převádí neprůhledné barvy (hodnoty RGB/HSL). Pokud potřebujete průhlednost, přidejte alfu sami: rgba(79, 70, 229, 0.5) nebo #4f46e580 — barevná část zůstává stejná.
Proč se moje hodnoty HSL liší o 1 od jiného nástroje?
Zaokrouhlování. Převod HSL↔RGB vytváří desetinné hodnoty a různé nástroje zaokrouhlují jinak. Rozdíl ±1 v odstínu nebo procentech je neviditelný a normální.
Jsou podporovány názvy barev jako 'red'?
Ve fázi 1 ne — nástroj se zaměřuje na tři číselné formáty, které vývojáři převádějí nejčastěji. Zadejte hodnotu HEX/RGB/HSL nebo ji vyberte vizuálně pomocí výběru barvy.
Kdy použít HEX, RGB nebo HSL?
Pokud potřebujete průhlednost, použijte 8znakový HEX (#RRGGBBAA) nebo rgba() — 6znakový HEX nemá alfa kanál. Pokud chcete světlejší nebo tmavší varianty stejné barvy, nejjednodušší je HSL: ponechte odstín a sytost fixní a měňte pouze hodnotu jasu. Pro obyčejné kopírování do CSS nebo návrhářských nástrojů zůstává nejuniverzálnější formou 6znakový HEX.