Převodník barev

HEX je hexadecimální zápis (např. #FF5733), který se běžně používá při tvorbě webových stránek. RGB představuje barvy pomocí hodnot červené, zelené a modré (0-255). HSL používá hodnoty odstínu (0-360°), sytosti (0-100 %) a světlosti (0-100 %), takže je intuitivní pro úpravu barev. HSV používá hodnoty Hue (odstín), Saturation (sytost) a Value (jas), které jsou oblíbené v grafickém softwaru. Každý formát má své silné stránky pro různé případy použití.

Funkci HSL použijte, když potřebujete upravit jas nebo sytost barvy při zachování konstantního odstínu. HSL je intuitivnější pro vytváření barevných variací, odstínů a přízračných barev. Je vynikající pro vytváření přístupných barevných schémat a responzivní design, kde potřebujete předvídatelné úpravy světlosti. RGB je lepší, když potřebujete přesnou kontrolu nad jednotlivými barevnými kanály.

Pomocí vývojářských nástrojů prohlížeče zkontrolujte prvek a zkopírujte hodnotu barvy z CSS. Vložte ji do našeho převodníku v libovolném formátu (HEX, RGB nebo HSL) a my vám okamžitě zobrazíme ekvivalentní hodnoty ve všech ostatních formátech. K zachycení barev můžete také použít rozšíření prohlížeče nebo nástroje pro výběr barev na snímku obrazovky.

Kanál alfa určuje průhlednost s hodnotami od 0 (zcela průhledný) do 1 (zcela neprůhledný). RGBA a HSLA obsahují tuto čtvrtou hodnotu pro podporu průhledných nebo poloprůhledných barev. To je nezbytné pro překryvy, stíny a vrstvené prvky designu v moderním webovém designu.

Ano! Moderní prohlížeče plně podporují formáty barev HSL a HSLA v CSS. Pro barvy s průhledností použijte syntaxi: hsl(360, 100%, 50%) nebo hsla(360, 100%, 50%, 0,5). HSL je v CSS obzvláště užitečný při vytváření barevných variací pomocí funkce calc() nebo vlastních vlastností CSS pro dynamické vytváření témat.

Třímístné kódy HEX (#RGB) jsou zkrácené kódy, kde je každá číslice zdvojená. Například #F00 odpovídá #FF0000. Tato zkratka funguje pouze tehdy, když jsou obě číslice každého barevného kanálu stejné. Pro přesnou kontrolu barev a pro všechny barvy, které neodpovídají zkrácenému vzoru, použijte plný šestimístný formát (#RRGGBB).

RGB je obecný koncept reprezentace barev pomocí červené, zelené a modré barvy. sRGB (standardní RGB) je specifický barevný prostor RGB standardizovaný pro konzistenci mezi zařízeními a webovými prohlížeči. Většina webových barev předpokládá sRGB, a proto barvy obecně vypadají konzistentně na různých obrazovkách a v různých prohlížečích.

Po převedení barev zkontrolujte kontrastní poměry pro přístupnost textu. WCAG vyžaduje kontrast 4,5:1 pro normální text a 3:1 pro velký text. Při převodu mezi formáty zůstanou hodnoty barev stejné, ale to, že je máte v různých formátech, vám pomůže používat je v různých návrhových nástrojích při zachování přístupnosti.

Ano! Návrhový software, jako je Figma, Adobe XD nebo Photoshop, obvykle zobrazuje barvy v RGB nebo HEX. Zkopírujte tyto hodnoty a převeďte je do formátu potřebného pro váš kód. Tím zajistíte dokonalou shodu barev mezi návrhovými maketami a konečnou realizací.

Při převodu mezi barevnými formáty může dojít k zaokrouhlování. HEX používá celá čísla (0-255), RGB používá celá čísla, ale HSL/HSV používá stupně a procenta. Při vícenásobném převodu tam a zpět může dojít k drobným odchylkám způsobeným zaokrouhlováním. Pro kritické porovnávání barev pracujte důsledně v jednom formátu.