Pět propojených nástrojů
Výběr barev, barvy z obrázku, tvorba palet, přechody a kontrola kontrastu používají společný základ Studia barev. Přepínač režimů otevře samostatnou stránku vybraného nástroje.
Studio barev
Vyberte barvu, získejte paletu z obrázku, sestavte vlastní paletu, vytvořte CSS přechod nebo ověřte kontrast textu.
Vybrat režim
Výběr barvy
Barevná harmonie
Aktuální
Barevné formáty
Související nástroje
Vaše statistiky
0
Vybrané barvy
0
Exportované palety
0
Vytvořené přechody
0
Kontroly kontrastu
Výběr barvy
Nejpoužívanější režim
0%
Skóre aktivity
Jak používat Studio barev
Video se nepodařilo načíst. Můžete postupovat podle návodu níže.
Video ukazuje anglické rozhraní.
Kliknutím nebo tažením na duhovém pruhu vyberte odstín. V ploše pod ním dolaďte jas a sytost. Hodnoty vedle barevné plochy se průběžně mění. V prohlížečích s podporou kapátka můžete použít i „Vybrat z obrazovky“.
Nástroje pro práci s barvami
Barvy z obrázků a GIFů
Vyberte barvu z náhledu obrázku nebo nechte sestavit paletu. U animovaných GIFů můžete volit jednotlivé snímky. Změna rozměrů, dekódování a seskupování barev mohou výsledek ovlivnit.
Knihovna CSS přechodů
Vyberte si ze 60 předvoleb s vyhledáváním nebo vytvořte lineární, radiální, kuželové či vícebodové pozadí. Před použitím si ověřte omezení exportu kódu a obrázků.
Zobrazit další (3)Zobrazit méně
Šest barevných harmonií
Vyzkoušejte doplňkové, analogické, triadické, rozdělené doplňkové, tetradické a monochromatické barvy. Před použitím v textu ověřte kontrast samostatně.
Kontrast textu a pozadí
Porovnejte dvojici jednolitých barev se čtyřmi limity WCAG pro text úrovně AA a AAA. Přibližné filtry náhledu nedokládají splnění požadavků na přístupnost.
Vyzkoušejte úpravu kontrastu
Úprava na AA nebo AAA se pokusí změnit RGB hodnoty textu. Nemusí uspět nebo může změnit odstín, proto zkontrolujte výsledný poměr.
Časté otázky
Jaké nástroje pro barvy tu najdu?
Výběr barev zobrazuje hodnoty v pěti formátech a nabízí šest barevných harmonií. Barvy z obrázku umožňují vybírat barvy z fotek a snímků GIFu. V paletě upravíte vzorky barev, v generátoru přechodů vytvoříte CSS pozadí a kontrola kontrastu porovná jednolitou barvu textu a pozadí s limity WCAG. Přepínač režimů otevře samostatné stránky nástrojů.
V jakých formátech můžu barvu zkopírovat?
Výběr barev zobrazuje HEX, RGB, HSL, HSV a přibližný CMYK. Každou hodnotu můžete zkopírovat zvlášť nebo použít Kopírovat všechny formáty. Pole slouží pouze ke čtení. Zobrazené hodnoty jsou zaokrouhlené a CMYK nepoužívá tiskový ICC profil.
Můžu získat barvy z animovaného GIFu?
Ano. Nástroj pro barvy z obrázků nabízí přehrávání a výběr snímků animovaného GIFu. Z vybraného snímku můžete odebrat barvu nebo sestavit paletu. Velké animace mohou vyžadovat hodně paměti.
Jaké formáty obrázků můžu otevřít?
Použijte formát, který prohlížeč dokáže načíst, například PNG, JPG nebo WebP. Pro HEIC a HEIF se v případě potřeby stáhne místní dekodér. Animované GIFy se načítají po snímcích. Podpora formátů se liší podle prohlížeče a TIFF tu nemá vlastní dekodér.
Zobrazit další (10)Zobrazit méně
Jaké barevné harmonie jsou k dispozici?
Doplňková, Analogická, Triáda, Rozdělená doplňková, Tetráda a Jednobarevná. Kliknutím na navržený vzorek ho nastavíte jako aktuální barvu. Harmonie určuje kombinaci barev, neověřuje přístupnost textu.
Jaké přechody můžu vytvořit?
Lineární, radiální a kuželové přechody mají až šest zarážek. Vícebodové přechody mohou mít až deset bodů a používají vrstvené radiální CSS přechody. Knihovna obsahuje 60 předvoleb. Tailwind přechody zjednodušuje na lineární, SVG nahrazuje kuželové a vícebodové typy lineárními a obrázkové exporty mají vlastní omezení vykreslování. Kuželový přechod lze exportovat jako obrázek jen při jeho podpoře v Canvas.
Jaký kontrast požaduje WCAG?
Běžný text potřebuje alespoň 4,5 : 1 pro AA a 7 : 1 pro AAA. U velkého textu jsou limity 3 : 1 a 4,5 : 1. Úspěšný výsledek platí pro vybranou dvojici barev a konkrétní limit pro text, ne pro celý web.
Dokáže nástroj upravit kontrast za mě?
Volby Upravit na AA a Upravit na AAA se pokusí zesvětlit nebo ztmavit RGB složky barvy textu. Mohou změnit odstín a u aktuálního pozadí nemusí uspět. Před použitím barvy ověřte výsledný poměr.
Co zobrazují volby poruch barvocitu?
Volby Protanopie, Deuteranopie a Tritanopie používají jednoduché CSS filtry náhledu. Jde o přibližné vizuální úpravy, nikoli ověřené modely barvocitu nebo důkaz přístupnosti.
Jak si paletu uchovám?
Uložte ji jako pojmenovanou předvolbu v tomto prohlížeči nebo ji exportujte. Dialog Export barev nabízí soubory PNG, JPG, SVG a JSON i kopírování CSS proměnných. Neuložená pracovní paleta se při novém otevření stránky vrátí na Material.
Kde se ukládá historie barev?
Společná historie uchovává v tomto prohlížeči až 20 posledních záznamů včetně režimu, ze kterého pocházejí. Najdete je v Historie barev. Vymazání dat webu může historii odstranit. Mezi zařízeními se nesynchronizuje.
Můžu vybrat barvu z obrazovky?
Volba Vybrat z obrazovky používá EyeDropper API, pokud ho prohlížeč a zařízení podporují. Vyžaduje zabezpečené prostředí a vrací HEX hodnotu v sRGB. Pokud není dostupná, použijte posuvník odstínu a barevnou plochu.
Kam se ukládají obrázky a předvolby?
Vybrané obrázky se zpracovávají v tomto prohlížeči a neposílají se na převodní server. Pojmenované předvolby a nedávná historie se ukládají místně v IndexedDB. Před vymazáním dat webu si důležité výsledky exportujte.
Můžu Studio barev používat offline?
Načtené ovládání a výpočty mohou fungovat bez připojení, ale stránka i všechny potřebné skripty už musí být dostupné. Dekodér HEIC se stahuje až při potřebě, takže první otevření takového souboru může vyžadovat připojení.
Technické podrobnosti
Barevné hodnoty a harmonie
Výběr barev převádí RGB na HEX, HSL, HSV a přibližný CMYK. Hodnoty jsou zaokrouhlené a pole formátů slouží pouze ke čtení. Šest harmonií mění odstín nebo světlost. CMYK výstup nepoužívá tiskový ICC profil.
Náhled obrázku a získávání barev
Výběr přes Canvas čte zmenšený náhled obrázku. Automatické získávání barev seskupuje vzorky RGB pomocí K-means do palety o 1 až 20 barvách. Většinu formátů načítá prohlížeč. HEIC a HEIF mají místní náhradní dekodér, GIFy ovládání jednotlivých snímků.
Zobrazit další (4)Zobrazit méně
Výpočet kontrastu textu
Poměr porovnává relativní jas dvou jednolitých barev sRGB. Limity AA jsou 4,5 : 1 pro běžný text a 3 : 1 pro velký. Limity AAA jsou 7 : 1 a 4,5 : 1. Výsledky vycházejí z nezaokrouhleného poměru a nedokládají splnění všech požadavků WCAG.
CSS přechody a omezení exportu
Lineární, radiální a kuželové přechody používají příslušné CSS funkce. Vícebodové přechody vrství radiální přechody. Tailwind generuje zjednodušený lineární kód a SVG nahrazuje kuželové a vícebodové typy lineárními. PNG a JPG vykresluje Canvas v rozměrech 1200 × 600 pixelů. Kuželový export vyžaduje podporu kuželových přechodů v Canvas. Pevný poměr stran a prolínání barev se mohou lišit od CSS náhledu.
Úpravy palet a export souborů
Začít můžete se sedmi předvolbami po čtyřech barvách. Vzorky lze upravovat, přidávat, odebírat, zamykat a řadit. Export nabízí barevné pruhy PNG, JPG nebo SVG, soubor JSON a kopírování CSS proměnných. U PNG a JPG nastavíte šířku 120 až 7680 pixelů. Pro zachování palety mezi návštěvami ji uložte jako pojmenovanou předvolbu.
Historie a předvolby v prohlížeči
Historie obsahuje až 20 posledních záznamů ve společném úložišti IndexedDB Studia barev. Pojmenované předvolby ukládají barvy a nastavení režimů místně. Dostupnost a uchování dat závisí na prohlížeči. Automatická synchronizace mezi zařízeními není k dispozici.