tigtools

Převodník barev

Napište nebo vložte barvu v libovolném podporovaném formátu, případně ji vyberte, a všechny ostatní formáty se okamžitě aktualizují.

Běží ve vašem prohlížeči Bez registrace

Načteno jako HEX.

HEX
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)
HWB
hwb(210 20% 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CMYK
cmyk(66.7%, 33.3%, 0%, 40%)

CMYK je zde jednoduchý vzorec, nikoli správa barev. Pro tisk převádějte s ICC profilem, který vám dodá vaše tiskárna.

Jak používat

  1. Napište nebo vložte barvu, například #1e90ff, rgb(30 144 255) nebo oklch(65% 0.18 250). Můžete také kliknout na výběr barvy.
  2. Zkontrolujte barevný vzorek, abyste se ujistili, že jde o očekávanou barvu.
  3. Zkopírujte ze seznamu potřebný formát. Hodnoty s průhledností si zachovávají alfa kanál.

Jak to funguje

Přijímané vstupy: HEX se 3, 4, 6 nebo 8 číslicemi (4. a 8. číslice představují alfu), rgb() a rgba() s čísly nebo procenty, hsl() a hsla(), hwb(), oklch() a cmyk() s procenty nebo čísly od 0 do 100. Funguje klasický zápis s čárkami i moderní zápis s mezerami a „/ alpha“. Odstín přijímá deg, turn, rad a grad. Pojmenované barvy jako „tomato“ nejsou rozpoznávány; místo toho použijte výběr barvy nebo kód.

Všechny převody probíhají přes sRGB. HSL a HWB jsou jednoduché transformace hodnot RGB, takže se převádějí přesně. OKLCH je percepční barevný prostor: stejné kroky v jeho světlosti vypadají přibližně stejně odlišně, což je užitečné pro vytváření palet. Počítá se pomocí publikovaných matic OKLab. Některé barvy OKLCH jsou mimo rozsah zobrazitelný v sRGB; nástroj na to upozorní a zobrazí nejbližší zobrazitelnou barvu.

CMYK se počítá běžným zjednodušeným vzorcem (K = 1 − největší kanál RGB). Skutečný tiskový výstup závisí na papíru, inkoustu a ICC profilu, proto tato čísla berte jako výchozí bod, nikoli jako tiskovou specifikaci.

Příklady

Z firemního HEX kódu do CSS

Stylová příručka uvádí #0b5d1e. Vložte tento kód a získáte rgb(11, 93, 30) pro starší CSS, hsl(133.9, 78.8%, 20.4%) pro ruční úpravu světlosti a hodnotu oklch() pro moderní barevné funkce CSS.

Čtení barvy s průhledností

rgba(0, 0, 0, 0.5) se převede na #00000080. Poslední dvě HEX číslice (80) jsou alfa: 128 z 255, asi 50 %.

Kontrola hodnoty OKLCH z návrhového souboru

oklch(70% 0.4 150) je velmi sytá zelená, kterou sRGB obrazovky neumí zobrazit. Nástroj na to upozorní a nabídne nejbližší barvu sRGB, takže víte, že návrh bude na většině displejů vypadat jinak.

Časté dotazy

Proč se při převodu do HSL a zpět někdy HEX změní o jedničku?

HEX ukládá celá čísla od 0 do 255 pro každý kanál. Hodnoty v jiných formátech se pro zobrazení zaokrouhlují (HSL na jedno desetinné místo) a zpětný převod zaokrouhlené hodnoty se může lišit o jedničku. Pokud potřebujete přesný originál, zkopírujte HEX.

Je hodnota CMYK pro tisk správná?

Ne, sám o sobě ne. Používá totiž jednoduchý vzorec bez barevného profilu. Tiskárny používají profily jako FOGRA nebo GRACoL, které dávají jiná čísla, proto se zeptejte své tiskárny nebo převeďte barvu v aplikaci se správou barev.

Co je OKLCH a mohu ho použít v CSS?

OKLCH popisuje barvu pomocí vnímané světlosti, chromy (barevnosti) a odstínu. Aktuální verze hlavních prohlížečů podporují oklch() v CSS. Pokud podporujete starší prohlížeče, ponechte záložní hodnotu HEX nebo rgb().

Co znamená osmimístný HEX kód?

#RRGGBBAA: poslední dvě číslice udávají neprůhlednost, od 00 (zcela průhledná) do ff (zcela neprůhledná). Čtyřmístný tvar #RGBA funguje stejně, s jednou číslicí na kanál.

Soukromí

Barvy se převádějí ve vašem prohlížeči. Nic z toho, co zadáte, se nikam neodesílá ani neukládá.