Designer ti dal HEX, ale CSS soubor používá HSL proměnné — převedeš a vložíš. Chceš upravit světlost barvy — HSL nebo OKLCH ti dají samostatný „lightness" slider, hex ne. Přepočet RGB hodnoty z designérského nástroje (Figma) do CSS. Experiment s OKLCH pro tvorbu perceptuálně plynulých barevných škál.

HSL hue je ve stupních (0–360), ne procentech. S a L jsou procenta. OKLCH vs. HSL. HSL je rychlá aproximace; OKLCH zohledňuje, jak oko skutečně vnímá jas — žlutá při stejném „lightness" je vizuálně světlejší než modrá. Alpha kanál. RGBA / HSLA přidávají průhlednost 0–1. Hex s alphou má 8 znaků ( #58a6ff80 ). Zkrácený hex. #abc = #aabbcc — funguje jen když jsou páry stejné.

Konvertor barev

Převede jakoukoli barvu mezi hex, RGB, HSL a OKLCH. Živý náhled, jedním klikem zkopíruj.

Hex

RGB

HSL

OKLCH

Picker

Výsledek

Vytvořil JXXR1 · ♥ Sponzorovat · ☕ Kup mi kávu

K čemu to slouží?

Webové barvy žijou v několika modelech: hex (#58a6ff), RGB (red/green/blue 0–255), HSL (hue/saturation/lightness — intuitivnější pro design) a moderní OKLCH (perceptuálně uniformní, dobrý na manipulace). Tenhle nástroj převede jeden zápis na všechny ostatní s živým náhledem.

Kdy to použít

Designer ti dal HEX, ale CSS soubor používá HSL proměnné — převedeš a vložíš.
Chceš upravit světlost barvy — HSL nebo OKLCH ti dají samostatný „lightness" slider, hex ne.
Přepočet RGB hodnoty z designérského nástroje (Figma) do CSS.
Experiment s OKLCH pro tvorbu perceptuálně plynulých barevných škál.

Časté chyby

HSL hue je ve stupních (0–360), ne procentech. S a L jsou procenta.
OKLCH vs. HSL. HSL je rychlá aproximace; OKLCH zohledňuje, jak oko skutečně vnímá jas — žlutá při stejném „lightness" je vizuálně světlejší než modrá.
Alpha kanál. RGBA / HSLA přidávají průhlednost 0–1. Hex s alphou má 8 znaků (#58a6ff80).
Zkrácený hex. #abc = #aabbcc — funguje jen když jsou páry stejné.