Tři popisy barvy sRGB
Šestimístný HEX zápis skládá červený, zelený a modrý kanál do dvojic hexadecimálních číslic. RGB zapisuje stejné tři kanály jako desítková čísla od 0 do 255. HSL popisuje barvu sRGB pomocí odstínu, sytosti a světlosti. Hodí se při uvažování o barevné rodině, ale světlost HSL je parametr modelu, nikoli přímo měřený jas vnímaný člověkem. HEX a RGB jsou dva zápisy kanálů; HSL vyžaduje výpočet. Při důsledném převodu mohou všechny tři vyjádřit shodnou zobrazovanou barvu. Nástroje MultiVerto zde pracují s neprůhlednými barvami ve vyznačených tvarech, ne s veškerou syntaxí CSS.
Příklad tlumené modré
Vezměme #336699. Dvojice 33, 66 a 99 v šestnáctkové soustavě jsou desítkově 51, 102 a 153. Nástroj HEX na RGB proto zobrazí rgb(51, 102, 153). Převod těchto kanálů na HSL dá v zaokrouhleném výstupu hsl(210, 50%, 40%). Odstín 210 stupňů patří do modré oblasti; sytost a světlost jsou souřadnice konkrétní barvy. Zadejte #336699 do vloženého nástroje a výsledek RGB vložte do propojeného nástroje RGB na HSL. Opačnou cestu zkuste přes HSL na RGB a RGB na HEX. U tohoto jednoduchého příkladu se vrátíte k původním šesti číslicím.
- HEX #336699 → kanály 33 66 99
- RGB rgb(51, 102, 153)
- HSL hsl(210, 50%, 40%)
Zpětný převod a přesnost
Dvojice HEX přesně určují celočíselné kanály. HSL zápis libovolné hodnoty RGB může potřebovat více desetinných míst, než ukáže krátký výsledek. MultiVerto zaokrouhluje HSL na dvě desetinná místa a zpětný převod kanálů RGB na celá čísla. Výsledek zůstane často vizuálně blízký, ale jeden kanál se může změnit o jednotku. Pokud potřebujete přesný strojový token designu, zachovejte původní HEX nebo RGB. Trojmístný HEX zopakuje každou číslici: #369 se rozvine na #336699; nejde o tři desítková čísla. Ukázkové převodníky nepřijímají průhlednost alfa, takže průsvitná barva vyžaduje jiný postup.
Převod není test přístupnosti
Stejná číselná barva může působit jinak na různém pozadí nebo zařízení. Světlost HSL neprozradí, zda bílý nebo černý text splňuje požadavek na kontrast. Kontrast závisí na dvou barvách a pravidlech přístupnosti, nikoli jen na procentu HSL jedné barvy. U textu otestujte skutečnou dvojici popředí a pozadí podle příslušného kritéria WCAG. Ověřte také stavy při najetí myší, zaměření a deaktivaci, kdy se barvy mění. Převodníky pomáhají zachovat zápis mezi CSS, designovými tokeny a API; přístupnou paletu automaticky nevyberou. Čitelnost neodvozujte z jediného výsledku.
Postup s designovými tokeny
Vyberte jeden základní token, například #336699, a zaznamenejte jeho použití. Převeďte jej na RGB, pokud rozhraní žádá kanály, nebo na HSL, chcete-li cíleně upravit odstín a sytost. Po změně HSL převeďte novou hodnotu zpět na RGB či HEX a uložte ji jako nový token místo tichého přepsání starého. Porovnejte zobrazené vzorky ve skutečném rozvržení a otestujte kontrast se sousedními barvami. Průhlednost alfa a barvy s širším gamutem nepatří do tohoto jednoduchého srovnání tří kanálů, pokud je cíl výslovně nepodporuje. Jasný originál a ověřené varianty usnadní údržbu.