Výběr barev a převodník
Vyberte barvy a převádějte mezi formáty HEX, RGB, HSL. Generujte nádherné palety pro svůj další designový projekt.
Jak používat výběr barev a převodník
- Použijte výběr barvy pro vizuální výběr libovolné barvy nebo zadejte hodnotu barvy přímo v libovolném podporovaném formátu (HEX, RGB, HSL nebo HSV). Nástroj automaticky převádí mezi všemi formáty při psaní nebo výběru.
- Prohlížejte okamžitě převedené hodnoty: HEX (#RRGGBB), RGB (r, g, b), HSL (h, s%, l%) a HSV (h, s%, v%). Každý formát je zobrazen ve své standardní notaci, připravený ke zkopírování a vložení do vašeho CSS, designového nástroje nebo kódu.
- Klikněte na libovolnou hodnotu formátu pro její zkopírování do schránky. Použijte vygenerovanou barevnou paletu pro průzkum komplementárních odstínů a tónů založených na vaší vybrané barvě.
- Dolaďte svou barvu úpravou posuvníků odstínu, sytosti a světlosti nebo přetažením výběru přímo na barevném kole a gradientu jasu.
Principy barevných modelů a převodu
Digitální barvy jsou reprezentovány v několika modelech, z nichž každý je vhodný pro různé úkoly. Formát HEX (#RRGGBB) kóduje červený, zelený a modrý kanál jako dvoumístné hexadecimální hodnoty (00-FF), což vytváří hodnoty jako #FF5733. Toto je nejběžnější formát v CSS a HTML. Model RGB vyjadřuje stejné kanály jako desetinné hodnoty od 0 do 255, zapisované jako rgb(255, 87, 51). HEX i RGB jsou závislé na zařízení a popisují, jak monitor vyzařuje světlo — říkají obrazovce, kolik každé primární barvy má vydat.
Modely HSL (odstín, sytost, světlost) a HSV (odstín, sytost, hodnota/jas) jsou navrženy tak, aby byly pro lidi intuitivnější. Odstín představuje samotnou barvu jako úhel od 0° do 360° po barevném kole (0° = červená, 120° = zelená, 240° = modrá). Sytost představuje intenzitu nebo čistotu barvy od 0% (šedá) do 100% (plně nasycená). Světlost (HSL) se pohybuje od 0% (černá) přes 50% (čistá barva) do 100% (bílá), zatímco hodnota (HSV) se pohybuje od 0% (černá) do 100% (plný jas). HSL je obzvlášť užitečný pro generování barevných palet, protože úprava světlosti nezávisle na odstínu a sytosti produkuje přirozené tóny a stíny.
Převod mezi barevnými modely zahrnuje jednoduché matematické vzorce. Převod RGB na HSL zahrnuje normalizaci hodnot RGB na 0-1, nalezení maximálního a minimálního kanálu a výpočet odstínu, sytosti a světlosti odtud. Převod HSL zpět na RGB vyžaduje převedení válcových souřadnic zpět do kartézského prostoru RGB. Tyto převody jsou bezeztrátové — mezi HEX, RGB, HSL a HSV se neztrácí žádná barevná informace pro plně neprůhledné barvy. Když je potřná alfa průhlednost, formáty se rozšiřují na RGBA, HSLA a 8místný HEX (#RRGGBBAA). Tento nástroj zpracovává všechny převody okamžitě ve vašem prohlížeči, což usnadňuje přechod mezi designovými nástroji (které často používají HSV), CSS (které upřednostňuje HEX a HSL) a softwarem pro úpravu obrázků.