Žádné nahrávání, 100% lokálně, bez účtu

Převodník barev

Převádějte mezi HEX, RGB, HSL, HSV a CMYK. Živý náhled. Kontrola kontrastu WCAG pro přístupnost. Nic neopustí váš prohlížeč.

Jak Převodník barev funguje

Převodník barev okamžitě překládá libovolnou barvu mezi formáty HEX, RGB, HSL, HSV a CMYK při psaní. Také provádí kontrolu kontrastu WCAG mezi libovolnými dvěma barvami, které vyberete, a zobrazuje poměr kontrastu a výsledek splnění nebo nesplnění AA/AAA pro normální text, velký text a komponenty uživatelského rozhraní. Veškeré výpočty probíhají v prohlížeči bez odesílání dat kdekoli; nic, co napíšete, neopustí vaše zařízení.

Porozumění tomu, jak stejná barva vypadá v různých barevných modelech, je užitečné při předávání návrhu. Návrhář může specifikovat firemní barvu jako HEX #1A4F8C; vývojář CSS potřebuje ekvivalent HSL pro tématický systém; tiskový tým potřebuje rozložení CMYK. Tento nástroj provádí konverzi ve všech směrech najednou, takže nikdy nemusíte spouštět více samostatných konvertorů.

Napsal Bastien Sulyan

Převodník barev: návod krok za krokem

  1. Zadejte hodnotu HEX, klikněte na barevný vzorek nebo zadejte hodnoty RGB, HSL, HSV nebo CMYK do příslušných polí.
  2. Všechny ostatní reprezentace formátů se okamžitě aktualizují pro zobrazení ekvivalentní barvy.
  3. Pro kontrolu kontrastu vyberte barvu popředí a barvu pozadí pomocí dvou výběrů barev.
  4. Přečtěte si poměr kontrastu WCAG a odznak splnění nebo nesplnění pro úrovně souladu AA a AAA.
  5. Zkopírujte libovolnou hodnotu barvy pomocí ikony kopírování vedle každého pole.

Časté případy použití

  • Návrhář uživatelského rozhraní převede kód HEX značky na HSL pro napsání vlastní vlastnosti CSS pro tématický systém.
  • Webový vývojář zkontroluje poměr kontrastu mezi barvou textu a pozadím před odesláním komponenty pro potvrzení souladu WCAG AA.
  • Tiskový návrhář obdrží webovou barvu HEX a potřebuje ekvivalent CMYK pro její přizpůsobení v tisknuté brožuře.
  • Vývojář potřebuje rozložení RGB designového tokenu pro předání jednotlivých hodnot kanálů funkci kreslení na plátně.

Často kladené otázky

Podporuje nástroj hodnoty alfa (průhlednost)?

Aktuální převodník pracuje s plně neprůhlednými barvami (alfa = 1). HEXA (8místný hex) a RGBA ještě nejsou v rozsahu. Pro průhlednost nastavte alfa kanál v CSS samostatně pomocí notace rgba() nebo oklch().

Ukládají se nebo odesílají barvy, které zadám, někam?

Ne. Konverze barev je čistá aritmetika (přemapování kanálů a škálování rozsahu), která běží celá v JavaScriptovém enginu prohlížeče. Nic, co zde napíšete, se nedostane na žádný server nebo externí službu.

Jaké úrovně kontrastu WCAG kontrola podporuje?

Nástroj vykazuje výsledky podle kritérií WCAG 2.1: AA vyžaduje minimální poměr kontrastu 4,5:1 pro normální text (pod 18pt nebo 14pt tučný) a 3:1 pro velký text a komponenty uživatelského rozhraní. AAA vyžaduje 7:1 pro normální text a 4,5:1 pro velký text.

Proč se hodnoty CMYK liší mezi tímto nástrojem a profesionálním návrhářským softwarem?

Konverze RGB na CMYK, kterou tento nástroj provádí, je matematický vzorec bez barevného profilu. Profesionální návrhářské aplikace aplikují profily ICC barev, které zohledňují přírůstek bodů inkoustu a vlastnosti podkladu. Hodnoty CMYK zde jsou užitečné pro aproximaci; pro produkční tisk vždy aplikujte profil vaší tiskárny v dedikovaném softwaru.

Mohu zde převést název barvy CSS, jako je 'cornflowerblue'?

Pojmenované barvy CSS se přímo nezadávají do polí převodníku. Pro převod pojmenované barvy nejprve vyhledejte její hodnotu HEX v referenci CSS (cornflowerblue je #6495ED), poté vložte tento HEX do pole HEX pro zobrazení všech ostatních formátů.

Funguje nástroj offline po načtení stránky?

Ano. Konverze barev je aritmetika bez externí závislosti. Jakmile je stránka ve vyrovnávací paměti prohlížeče, můžete ji otevřít bez síťového připojení a všechny konverze budou fungovat normálně.

Související nástroje

Zachovejte vše lokálně, prozkoumejte doplňkové nástroje.

Všechny nástroje pro vývojáře