Studio barev

Vyberte barvu a zkopírujte její kód

1. 01

   Otevřete „Výběr barvy“. Posunutím úchytu na barevném pruhu zvolte odstín, například modrý nebo zelený.

2. 02

   Posouváním úchytu ve velkém čtverci barvu zesvětlete, ztmavte nebo snižte její sytost.

3. 03

   V části „Barevné formáty“ najděte požadovaný formát a stiskněte jeho tlačítko pro kopírování.

4. 04

   Zkopírovanou hodnotu vložte do aplikace nebo dokumentu, kde ji potřebujete.

Pole formátů zobrazují výsledek a nelze je upravovat. Tlačítko „Kopírovat všechny formáty“ zkopíruje všech pět hodnot i s jejich názvy. HEX, RGB, HSL, HSV a CMYK vyjadřují tutéž vybranou barvu různými způsoby.

HEX, RGB a HSL využijete při tvorbě webových stylů. Hodnoty HSV a CMYK jsou číselné převody, které nelze přímo vložit jako deklarace CSS. Převod do CMYK nezohledňuje profil tiskárny ani papíru, a proto nepředpovídá přesnou barvu výtisku.

Tlačítko „Vybrat z obrazovky“ otevře kapátko prohlížeče, pokud ho prohlížeč podporuje. Vyberte viditelný pixel, jehož barvu chcete použít, nebo výběr zrušte klávesou Escape. Na dotykových zařízeních tato možnost není dostupná a nepodporují ji ani některé prohlížeče na počítači.

Najděte barvy, které se k sobě hodí

Možnosti v části „Barevná harmonie“ navrhují kombinace podle aktuální barvy. Kliknutím na navržený vzorek ho nastavíte jako aktuální barvu a aktualizujete hodnoty formátů.

Tyto návrhy neověřují čitelnost textu. Než barvy použijete pro text a pozadí, zkontrolujte je společně v nástroji „Kontrola kontrastu“. Tlačítkem „Uložit jako předvolbu“ uložíte aktuální barvu a harmonii na později.

Získejte barvy z obrázku

1. 01

   Otevřete „Barvy z obrázku“ a přidejte jeden obrázek ze zařízení.

   Načíst obrázek

   Vybrat soubor

   JPGPNGWEBPAVIFGIFBMPTIFFICOHEICHEIF

2. 02

   Počkejte, až se zobrazí navržené barvy. Chcete-li jich více nebo méně, upravte „Počet barev“.

3. 03

   Kliknutím na barevný vzorek ho vyberete a zkopírujete jeho hodnotu HEX. Panel vybrané barvy obsahuje také hodnoty RGB, HSL, HSV a CMYK.

4. 04

   Kliknutím na jiné místo obrázku přidejte barvu z tohoto bodu.

Pole „Počet barev“ umožňuje 1 až 20 automatických návrhů. Ručně vybrané barvy se přidávají navíc, takže výsledný seznam může být delší. Návrhy vycházejí ze vzorkovaných pixelů a skupin podobných barev. Nejde o soupis všech jednotlivých barev původního obrázku.

Volba „Filtrovat krajní odstíny“ při hledání barev vynechává velmi tmavé a velmi světlé pixely. Vypněte ji, pokud tyto barvy potřebujete nebo pokud je obrázek převážně černobílý. Změna této volby nebo pole „Počet barev“ návrhy přepočítá. U statického obrázku tím nahradí i ručně vybrané barvy.

Volba „Zobrazit body“ zobrazí značky míst, odkud se barvy získávají. Vypnutím značky skryjete, ale barvy nesmažete. Přetažením viditelné značky vyberete jiné místo. Při ovládání myší vám zvětšený náhled pomůže zaměřit požadovaný bod.

Vzorek odeberete jeho tlačítkem pro smazání. Příkaz „Odebrat obrázek a začít znovu“ si před odstraněním aktuálního obrázku a barev vyžádá potvrzení. Uložené předvolby zachová.

Velké obrázky se mohou pro výběr barev zmenšit. Vybraná hodnota pak může pocházet ze zobrazeného zmenšeného obrázku, nikoli z nezměněného pixelu v původním rozlišení. Průhlednost se nezpracovává jako samostatný barevný kanál.

Vyberte barvy z animovaného GIFu

Animovaný GIF se otevře s časovou osou snímků. Snímek vyberete tlačítkem pro předchozí či další snímek, posuvníkem nebo miniaturou. Animaci můžete také přehrát a pozastavit.

Kliknutím na obrázek získáte barvu z aktuálního snímku. Seznam barev spojuje uložené výběry z použitých snímků. Samotný přechod na další snímek automaticky nezískává novou paletu pro každý snímek.

Chcete-li znovu získat automatické barvy aktuálního snímku, změňte „Počet barev“ nebo „Filtrovat krajní odstíny“. Výběry jednotlivých snímků GIFu se uchovávají odděleně, takže barvy z jiných snímků mohou ve společném seznamu zůstat. Pokud chcete zachovat obrázek, výběry snímků i polohy bodů, uložte předvolbu obrázku.

Sestavte a upravte paletu

Otevřete „Tvorba palet“. Začněte barvami Material nebo vyberte jinou rychlou předvolbu. Pokud jste aktuální paletu změnili, může nástroj před jejím nahrazením předvolbou požádat o potvrzení.

Příkaz „Náhodná paleta“ mění odemčené barvy. Barvy, které chcete zachovat, zamkněte a potom vygenerujte paletu znovu. Zámek chrání barvu při náhodném generování. Nebrání jejím úpravám, odebrání ani nahrazení předvolbou.

Tlačítko „Přidat barvu“ přidá další vzorek. Každý vzorek má ovládání pro úpravu a smazání i úchyt pro změnu pořadí přetažením. V paletě musí zůstat alespoň jedna barva. Kliknutím na zobrazenou hodnotu ji zkopírujete, přepínačem HEX nebo RGB změníte kopírovaný formát.

Na počítači otevře příkaz „Upravit barvu“ výběr barvy prohlížeče. Na dotykovém zařízení otevře dialog s ovládáním barev a poli HEX a RGB. Tlačítkem „Použít“ změnu potvrdíte, tlačítkem „Zrušit“ ji zahodíte.

Tlačítka „Zpět“ a „Znovu“ procházejí poslední změny palety. Historie uchovává až 50 stavů po dobu aktuálního otevření stránky. Příkaz „Obnovit“ požádá o potvrzení před obnovením výchozí palety.

Volba „Režim soustředění“ zobrazí paletu i s ovládáním na větší ploše. Zpět se vrátíte klávesou Escape nebo příkazem „Ukončit režim soustředění“. Po obnovení stránky se pracovní paleta vrátí na začátek. Před odchodem proto použijte „Uložit jako předvolbu“ nebo „Stáhnout paletu“.

Stáhněte nebo zkopírujte sadu barev

Export otevřete tlačítkem „Stáhnout barvy“ v nástroji „Barvy z obrázku“ nebo tlačítkem „Stáhnout paletu“ v nástroji „Tvorba palet“. PNG, JPG a SVG vytvoří pruh barevných vzorků. Volby „Přidat HEX kódy“ a „Přidat RGB kódy“ přidají do obrázku příslušné popisky.

JSON stáhne barevné hodnoty jako strukturovaná data. Tlačítko „Kopírovat CSS“ zkopíruje očíslované vlastní proměnné, například --color-1, které lze použít ve stylopisu webu. U PNG a JPG nastavíte „Šířka (px)“ v rozmezí 120 až 7680 pixelů. Výška odpovídá šestině šířky zaokrouhlené na celý pixel. SVG používá souřadnicový prostor 1200 × 200.

Export obrázku obsahuje získané barvy, nikoli nahranou fotografii. Pokud si chcete zachovat samostatný soubor nebo ho sdílet, exportujte ho před vymazáním pracovní plochy.

Vytvořte barevný přechod

Otevřete „Generátor přechodů“ a zvolte typ přechodu. Barevný bod určuje barvu na konkrétním místě přechodu. Jeho posunutím změníte, kde se tato barva objeví.

Kliknutím na prázdné místo v ploše lineárního nebo vícebodového přechodu přidáte barvu. U radiálního a kuželového přechodu klikněte na lištu barevných bodů. Lineární, radiální a kuželový přechod umožňují nejvýše šest bodů, vícebodový nejvýše deset. Vždy musí zůstat alespoň dva.

Kliknutím na barevný bod upravíte jeho barvu. Dvojklik ho odstraní tam, kde je toto gesto podporováno. Na dotykových zařízeních podporují body lineárního a vícebodového přechodu také dvojí klepnutí. Bod radiálního či kuželového přechodu odstraníte podržením bez pohybu. Tyto úchyty můžete také zaměřit klávesou Tab a stisknout Delete.

Přidání barvy do lineárního přechodu znovu rozmístí body po stávající přímce. Příkaz „Obrátit přechod“ obrátí jejich pořadí a „Obnovit směr“ obnoví směr nebo střed aktuálního typu přechodu. Náhled se při úpravách průběžně aktualizuje.

Část „Hotové přechody“ nabízí výchozí návrhy. Tlačítko „Procházet knihovnu“ otevře větší sbírku s vyhledáváním. Použití předvolby nahradí aktuální nastavení přechodu a podle potřeby si vyžádá potvrzení. Tlačítkem pro zvětšení náhledu si přechod prohlédnete na větší ploše, klávesou Escape se vrátíte.

Použijte přechod v jiné aplikaci

CSS obsahuje přechod zobrazený v náhledu. Vložte ho do deklarace background ve stylopisu. SCSS nabízí proměnnou s přechodem a příklad jejího použití.

Výstup Tailwind zjednodušuje přechod na lineární směr a nejvýše tři barvy. Může vynechat vnitřní body, přesné polohy i tvar radiálního, kuželového nebo vícebodového přechodu. Pokud tyto detaily potřebujete zachovat, použijte CSS.

SVG vytváří vektorový zápis lineárního nebo radiálního přechodu. Kuželové a vícebodové přechody v něm nahrazuje lineární aproximace, takže výsledek bude vypadat jinak. Na tuto náhradu upozorňuje komentář ve vygenerovaném kódu.

Tlačítko „Stáhnout přechod“ exportuje PNG nebo JPG o rozměrech 1200 × 600 pixelů. V exportním dialogu můžete také zkopírovat kód CSS, Tailwind, SCSS nebo SVG. Exportovaný obrázek zkontrolujte v konečné velikosti, protože jeho poměr stran se může lišit od náhledu na stránce. Před odchodem obrázek nebo kód uložte. Rozpracovaný přechod se neukládá jako předvolba.

Ověřte čitelnost textu

1. 01

   Otevřete „Kontrola kontrastu“.

2. 02

   Zadejte barvu textu a pozadí jako šestimístné hodnoty HEX včetně znaku #, nebo každou vyberte pomocí ovládání barev.

   Barva textu

   Barva pozadí

3. 03

   Prohlédněte si kontrastní poměr a čtyři výsledky AA a AAA.

4. 04

   Pokud dvojice nevyhovuje, upravte barvu nebo zkuste „Upravit na AA“ či „Upravit na AAA“ a výsledek znovu zkontrolujte.

   Upravit na AA

   Upravit na AAA

Například černý text na bílém pozadí má poměr 21 : 1, bílý na bílém 1 : 1. Vyšší číslo znamená větší rozdíl v jasu.

Podle WCAG je text velký od 18 bodů, přibližně 24 pixelů CSS, nebo od 14 bodů u tučného písma, přibližně 18,7 pixelu CSS. Čtyři výsledky zobrazují obě velikostní kategorie současně. Změna velikosti písma v náhledu nemění kontrastní poměr barev.

Tyto hranice vycházejí z pravidel WCAG pro minimální kontrast a pro zvýšený kontrast. Vyhovující dvojice barev neprokazuje přístupnost celé stránky.

Příkazy „Upravit na AA“ a „Upravit na AAA“ zkoušejí zesvětlit nebo ztmavit text při zachování pozadí. Cílí na hranice pro běžný text. Některé dvojice tímto způsobem opravit nelze. V takovém případě zvolte jinou barvu textu nebo pozadí ručně.

Použijte úplnou hodnotu, například #336699. Při neúplné nebo neplatné hodnotě zůstává použita poslední přijatá barva. Poměr se zobrazuje na dvě desetinná místa, ale výsledek kontroly vychází z nezaokrouhleného výpočtu.

Přibližné barevné filtry mění pouze náhled. Jde o jednoduché vizuální efekty, nikoli spolehlivou simulaci barevného vidění konkrétního člověka. Výpočet kontrastu nemění.

Uchovejte předvolby a poslední barvy

Tlačítko „Uložit jako předvolbu“ uloží pojmenované nastavení nástrojů „Výběr barvy“, „Barvy z obrázku“, „Tvorba palet“ nebo „Kontrola kontrastu“. Zadejte název a stiskněte „Uložit předvolbu“. Uložený seznam otevřete přes „Předvolby“, na telefonu tlačítkem se záložkou. Výběrem předvolby obnovíte nastavení v příslušném nástroji.

Předvolby se ukládají v tomto prohlížeči. Předvolba obrázku může obsahovat i otevřený obrázek, jeho barvy a polohy výběru. Předvolby se automaticky nepřenášejí na jiné zařízení a vymazání dat prohlížeče je může odstranit. Důležitou práci si stáhněte i jako samostatné soubory.

Příkaz „Smazat“ po potvrzení odstraní jednu předvolbu. Příkaz „Vymazat vše“ po potvrzení odstraní všechny uložené předvolby. Ani jedna z těchto akcí nemaže původní soubory ze zařízení.

„Historie barev“ uchovává až 20 posledních záznamů. Výběrem záznamu zkopírujete jeho hodnotu HEX a v nástroji „Výběr barvy“ také nastavíte danou barvu. Vymazání historie barev je nezávislé na mazání předvoleb.

Když výsledek nevypadá správně

Pokud se obrázek nedaří otevřít, zkuste menší JPG nebo PNG. Pro HEIC a HEIF je k dispozici doplňkový dekodér, u ostatních variant obrázků záleží na podpoře prohlížeče. Najednou lze otevřít pouze jeden obrázek.

Pokud získané barvy nezachycují požadovaný detail, klikněte na dané místo ručně. Potřebujete-li téměř černé nebo bílé barvy, vypněte „Filtrovat krajní odstíny“. Automatické návrhy vyjadřují skupiny podobných vzorkovaných barev. Jejich průměr proto nemusí odpovídat žádnému konkrétnímu pixelu obrázku.

Pokud se zkopírovaný přechod liší od náhledu, zkontrolujte zvolený formát kódu. Tailwind a některé výstupy SVG používají aproximace. CSS zachovává typ přechodu i polohy bodů.

Pokud je kopírování v nástroji „Výběr barvy“ nebo „Barvy z obrázku“ zablokované, označte hodnotu ve výstupním poli a použijte běžný příkaz pro kopírování. Paletu můžete místo toho exportovat jako JSON nebo obrázek. Zpracování i uložené sady zůstávají v prohlížeči, jeho úložiště však nenahrazuje zálohu.

Ovládání klávesnicí

Funkce „Zpět“ a „Znovu“ se ovládají tlačítky. Nástroj nepřiřazuje klávesy Cmd + Z ani Ctrl + Z ke změnám palety. Při úpravách textu tyto zkratky fungují běžným způsobem.