Náš převodník barev usnadňuje převádění mezi všemi hlavními barevnými formáty používanými při tvorbě webů, v grafickém designu a tisku. Ať už potřebujete převést kód HEX na RGB pro CSS, přeložit hodnoty HSL pro návrhové nástroje, nebo převést RGB na CMYK pro tisk, tento nástroj zvládne všechny převody v reálném čase se živým náhledem barvy.
color: #3B82F6; background: rgb(59, 130, 246); border: 1px solid hsl(217, 91%, 60%);
Do libovolného vstupního pole zadejte HEX kód (#FF5733), hodnoty RGB (rgb(255,87,51)) nebo hodnoty HSL (hsl(11,100%,60%)).
Kliknutím na vzorek náhledu barvy otevřete nativní výběr barev a můžete si barvu vizuálně zvolit.
Kliknutím na tlačítko kopírování vedle libovolného formátu barvy jej zkopírujete do schránky. Všechny formáty se aktualizují v reálném čase.
Převod barev využívá matematické transformace mezi barevnými modely. HEX je šestnáctková reprezentace RGB. HSL/HSV jsou reprezentace ve válcových souřadnicích, které jsou pro designéry intuitivnější. CMYK se používá v tiskárenství a představuje procenta inkoustu.
HEX → RGB: R = parseInt(hex[1..2], 16), G = parseInt(hex[3..4], 16), B = parseInt(hex[5..6], 16)
Kódy HEX jsou nejčastějším formátem pro webové/CSS barvy – vždy obsahují prefix #
RGB je přirozený formát pro obrazovky – každý kanál se pohybuje v rozmezí 0–255
HSL je pro designéry intuitivnější – odstín (Hue) upravuje barvu, sytost (Saturation) živost, světlost (Lightness) jas
CMYK slouží pouze pro tisk – barvy v RGB/HEX mohou při vytištění v CMYK vypadat jinak
Pro barvy se opakujícími páry (#FF0000) používejte zkrácený tvar HEX (#F00)
Neprůhlednost / alpha kanál: pro průhledné barvy použijte rgba() nebo hsla()
Pojmenované barvy v CSS (jako 'tomato', 'dodgerblue') odpovídají konkrétním hodnotám HEX
Náš bezplatný převaděč barev okamžitě překládá barvy mezi všemi hlavními formáty. Ať už jste webový vývojář potřebující převod HEX na RGB, designér pracující s hodnotami HSL, nebo připravujete soubory pro tisk v CMYK, tento nástroj zvládne všechny konverze barev s živým náhledem.
HEX a RGB jsou dva nejčastější formáty barev na webu. Kódy HEX (#RRGGBB) jsou kompaktní a široce používané v CSS, zatímco hodnoty RGB (0-255 na kanál) se používají v JavaScriptu a grafických nástrojích.
Náš převaděč z hex na rgb převádí tyto formáty okamžitě, což usnadňuje práci v různých nástrojích a kódech.
HSL (odstín, sytost, světlost) je pro designéry nejintuitivnější barevný model. Upravte:
Náš převaděč barev HSL usnadňuje vytváření barevných variant, sestavování palet a převod hodnot HSL na HEX nebo RGB pro implementaci.
Převod barev z obrazovky (RGB) na tiskové barvy (CMYK) vyžaduje pečlivý převod, protože tyto dva barevné modely fungují odlišně. RGB je aditivní (založené na světle), zatímco CMYK je subtraktivní (založené na inkoustu).
Náš převaděč z RGB do CMYK poskytuje přibližné tiskové hodnoty, přičemž konečné výsledky závisí na vaší tiskárně a papíru.
Chcete-li převést barvu HEX na RGB, rozdělte šestmístný kód (#RRGGBB) na tři dvojice znaků a každou převeďte ze základu 16 (šestnáctková soustava) do základu 10 (desítková soustava): R = 16 × d1 + d2 a tak dále pro zelenou a modrou.
Například #FF5733 dává FF = 255, 57 = 87, 33 = 51 neboli rgb(255, 87, 51). Obě zápisy popisují stejný barevný prostor sRGB definovaný normou IEC 61966-2-1 a uváděný ve specifikaci W3C CSS Color.
Každý kanál má rozsah 0–255 (8 bitů), což dává 256³ = 16 777 216 možných barev. Zkrácený HEX (#F53) jednoduše zdvojnásobuje každou čílici do dvojice.
RGB se převádí na HSL a HSV pomocí stejného prvního kroku: normalizujte každý kanál na hodnotu 0–1 (vydělte 255) a poté najděte maximum a minimum. Odstín (Hue) je v obou modelech stejný a odvíjí se od toho, který kanál je největší.
Pro HSL platí Světlost (Lightness) = (max + min) / 2; pro HSV platí Hodnota (Value) = max. Sytost (Saturation) se počítá odlišně: HSL dělí čistotu barvy (chroma) hodnotou 1 − |2L − 1|, zatímco HSV dělí čistotu barvy maximem.
HSL a HSV jsou válcové přepisy RGB krychle, které jsou standardizovány v modulu W3C CSS Color Module. Designéři je upřednostňují, protože odstín, sytost a světlost odpovídají tomu, jak lidé popisují barvy.
HEX kód barvy je šestnáctková zkratka pro hodnoty kanálů RGB, která začíná znakem #.
Šestnáctková soustava je soustava o základu 16, která používá číslice 0–9 a písmena A–F, přičemž A = 10 a F = 15. Díky tomuto kompaktnímu zápisu dominují kódy HEX v CSS a nástrojích pro výběr barev v designu.
Většina hodnot HEX a RGB, které používáte na webu, je v prostoru sRGB, což je standardní barevný prostor definovaný normou IEC 61966-2-1 a předpokládaný v CSS, pokud není deklarován jiný prostor. sRGB pokrývá omezenou část barev, které lidské oko dokáže vidět, takže pro moderní displeje existují širší barevné prostory jako Display P3 a Rec. 2020.
Modul CSS Color Module Level 4 od konsorcia W3C přidává funkce jako color() a oklch(), které umožňují dosáhnout těchto barevných gamutů. Tento převodník pracuje v prostoru sRGB, který zůstává nejbezpečnějším a nejkompatibilnějším prostorem pro každodenní webové a UI práce napříč prohlížeči a zařízeními.
Převodníky barev překládají jedinou barvu mezi formáty tak, aby fungovala všude, kde je potřeba.
Převodník odstraňuje manuální výpočty v šestnáctkové soustavě a udržuje barvu konzistentní v kódu, souborech designu i tisku.
CSS definuje 148 pojmenovaných barev, jako jsou tomato (#FF6347), dodgerblue (#1E90FF) a rebeccapurple (#663399), přičemž každá z nich je přesným aliasem pro konkrétní sRGB HEX hodnotu. Tyto názvy jsou standardizovány v modulu W3C CSS Color Module a jsou podporovány každým moderním prohlížečem.
Jsou praktické pro vytváření prototypů, ale představují jen nepatrnou podmožinu z 16,7 milionu barev dostupných prostřednictvím HEX a RGB.
Protože pojmenovaná barva odpovídá pevnému HEX kódu, převodníky mohou pro jakýkoliv vstup zobrazit nejbližší pojmenovanou barvu. Názvy barev v CSS nerozlišují velká a malá písmena, takže 'DodgerBlue' a 'dodgerblue' se vykreslí totožně.
Vyhněte se těmto častým chybám při převodu barev:
Každý barevný formát se hodí pro jiný úkol.
Všechny formáty pro obrazovky sdílejí prostor sRGB definovaný normou IEC 61966-2-1 a modulem W3C CSS Color Module, takže HEX, RGB a HSL jsou plně vzájemně zaměnitelné; pouze CMYK vyžaduje přibližný převod závislý na zařízení.
Data sourced from trusted institutions
All formulas verified against official standards.