Designer ti dal HEX, ale CSS súbor používa HSL premenné — prevedieš a vložíš. Chceš upraviť svetlosť farby — HSL alebo OKLCH ti dajú samostatný „lightness" slider, hex nie. Prepočet RGB hodnoty z dizajnérskeho nástroja (Figma) do CSS. Experiment s OKLCH na vytvorenie perceptuálne plynulých farebných škál.

HSL hue je v stupňoch (0–360), nie percentách. S a L sú percentá. OKLCH vs. HSL. HSL je rýchla approximácia; OKLCH zohľadňuje, ako oko skutočne vníma jas — žltá pri rovnakom „lightness" je vizuálne svetlejšia ako modrá. Alpha kanál. RGBA / HSLA pridávajú priehľadnosť 0–1. Hex s alphou je 8 znakov ( #58a6ff80 ). Skrátené hex. #abc = #aabbcc — funguje len keď sú páry rovnaké.

Konvertor farieb

Prevedie akúkoľvek farbu medzi hex, RGB, HSL a OKLCH. Živý náhľad, jedným klikom skopíruj.

Hex

RGB

HSL

OKLCH

Picker

Výsledok

Vytvoril JXXR1 · ♥ Sponzorovať · ☕ Kúp mi kávu

Načo to slúži?

Webové farby žijú v niekoľkých modeloch: hex (#58a6ff), RGB (red/green/blue 0–255), HSL (hue/saturation/lightness — intuitívnejšie pre dizajn) a moderný OKLCH (perceptuálne uniformný, dobrý na manipulácie). Tento nástroj prevedie jednu zápis na všetky ostatné s živým náhľadom.

Kedy to použiť

Designer ti dal HEX, ale CSS súbor používa HSL premenné — prevedieš a vložíš.
Chceš upraviť svetlosť farby — HSL alebo OKLCH ti dajú samostatný „lightness" slider, hex nie.
Prepočet RGB hodnoty z dizajnérskeho nástroja (Figma) do CSS.
Experiment s OKLCH na vytvorenie perceptuálne plynulých farebných škál.

Časté chyby

HSL hue je v stupňoch (0–360), nie percentách. S a L sú percentá.
OKLCH vs. HSL. HSL je rýchla approximácia; OKLCH zohľadňuje, ako oko skutočne vníma jas — žltá pri rovnakom „lightness" je vizuálne svetlejšia ako modrá.
Alpha kanál. RGBA / HSLA pridávajú priehľadnosť 0–1. Hex s alphou je 8 znakov (#58a6ff80).
Skrátené hex. #abc = #aabbcc — funguje len keď sú páry rovnaké.