Tri opisy farby sRGB
Šesťmiestny HEX zápis skladá červený, zelený a modrý kanál do dvojíc hexadecimálnych číslic. RGB zapisuje tie isté tri kanály ako desiatkové čísla od 0 po 255. HSL opisuje farbu sRGB pomocou odtieňa, sýtosti a svetlosti. Hodí sa pri uvažovaní o farebnej rodine, no svetlosť HSL je parameter modelu, nie priamo meraná jasnosť vnímaná človekom. HEX a RGB sú dva zápisy kanálov; HSL vyžaduje výpočet. Pri dôslednom prevode môžu všetky tri vyjadriť zhodnú zobrazovanú farbu. Nástroje MultiVerto tu pracujú s nepriehľadnými farbami vo vyznačených tvaroch, nie so všetkou syntaxou CSS.
Príklad tlmenej modrej
Vezmime #336699. Dvojice 33, 66 a 99 v šestnástkovej sústave sú desiatkovo 51, 102 a 153. Nástroj HEX na RGB preto zobrazí rgb(51, 102, 153). Prevod týchto kanálov na HSL dá v zaokrúhlenom výstupe hsl(210, 50%, 40%). Odtieň 210 stupňov patrí do modrej oblasti; sýtosť a svetlosť sú súradnice konkrétnej farby. Zadajte #336699 do vloženého nástroja a výsledok RGB vložte do prepojeného nástroja RGB na HSL. Opačnú cestu skúste cez HSL na RGB a RGB na HEX. Pri tomto jednoduchom príklade sa vrátite k pôvodným šiestim čísliciam.
- HEX #336699 → kanály 33 66 99
- RGB rgb(51, 102, 153)
- HSL hsl(210, 50%, 40%)
Spätný prevod a presnosť
Dvojice HEX presne určujú celočíselné kanály. HSL zápis ľubovoľnej hodnoty RGB môže potrebovať viac desatinných miest, než ukáže krátky výsledok. MultiVerto zaokrúhľuje HSL na dve desatinné miesta a spätný prevod kanálov RGB na celé čísla. Výsledok zostane často vizuálne blízky, no jeden kanál sa môže zmeniť o jednotku. Ak potrebujete presný strojový token dizajnu, zachovajte pôvodný HEX alebo RGB. Trojmiestny HEX zopakuje každú číslicu: #369 sa rozvinie na #336699; nejde o tri desiatkové čísla. Ukážkové konvertory neprijímajú priehľadnosť alfa, preto priesvitná farba potrebuje iný postup.
Prevod nie je test prístupnosti
Tá istá číselná farba môže pôsobiť inak na rôznom pozadí alebo zariadení. Svetlosť HSL neprezradí, či biely alebo čierny text spĺňa požiadavku na kontrast. Kontrast závisí od dvoch farieb a pravidiel prístupnosti, nie iba od percenta HSL jednej farby. Pri texte otestujte skutočnú dvojicu popredia a pozadia podľa príslušného kritéria WCAG. Overte tiež stavy po prejdení myšou, zameraní a deaktivácii, kde sa farby menia. Prevodníky pomáhajú zachovať zápis medzi CSS, dizajnovými tokenmi a API; prístupnú paletu nevyberajú automaticky. Čitateľnosť neodvodzujte z jediného výsledku.
Postup s dizajnovými tokenmi
Vyberte jeden základný token, napríklad #336699, a zaznačte jeho použitie. Preveďte ho na RGB, ak rozhranie žiada kanály, alebo na HSL, keď chcete cielene upraviť odtieň a sýtosť. Po zmene HSL preveďte novú hodnotu späť na RGB či HEX a uložte ju ako nový token namiesto tichého prepísania starého. Porovnajte zobrazené vzorky v skutočnom rozložení a otestujte kontrast so susednými farbami. Priehľadnosť alfa a farby so širším gamutom nepatria do tohto jednoduchého porovnania troch kanálov, pokiaľ ich cieľ výslovne nepodporuje. Jasný originál a overené varianty uľahčia údržbu.