Generátor barevných schémat

Vyberte základní barvu a získejte celou paletu, komplementární, analogickou, triadickou, tetradickou nebo monochromatickou. Kopírujte libovolný vzorek jako HEX, RGB nebo HSL. Nic neopustí váš prohlížeč.

Jak Generátor barevných schémat funguje

Generátor barevných schémat sestavuje kompletní barevné palety z jediné základní barvy, kterou vyberete: komplementární (naproti na kruhu barevného spektra), analogické (sousední odstíny), triadické (tři rovnoměrně rozmístěné), tetradické (čtyři odstíny ve dvou komplementárních párech) a monochromatické (měnící se světlost a sytost stejného odstínu). Veškerá logika palet běží v prohlížeči; nic, co zadáte, neopustí vaše zařízení.

Každá vygenerovaná paleta zobrazuje vzorky s jejich hodnotami HEX a RGB připravenými ke kopírování. To dává návrhářům výchozí bod zakotvený v teorii barev, ne v hádání. Protože generátor funguje offline po počátečním načtení stránky, můžete volně experimentovat s firemními barvami během schůzky s klientem bez potřeby síťového připojení. Zadejte základní barvu v libovolné notaci, kterou máte k dispozici, HEX, RGB nebo HSL, a každý vygenerovaný vzorek dostanete zpět ve všech třech formátech, takže si zkopírujete ten, který očekává váš návrhový nástroj.

Napsal Bastien Sulyan

Generátor barevných schémat: návod krok za krokem

Vyberte základní barvu pomocí výběru barev nebo zadejte hodnotu HEX.
Zvolte typ harmonie ze záložek: komplementární, analogické, triadické, tetradické nebo monochromatické.
Vzorky palety se okamžitě zobrazí s jejich hodnotami HEX a RGB.
Klikněte na libovolný vzorek pro zkopírování jeho hodnoty HEX do schránky.
Upravte základní barvu pro prozkoumání variací a sledujte, jak se celá paleta aktualizuje.

Časté případy použití

Návrhář začínající novou identitu značky vybere svou primární barvu a vygeneruje triadickou paletu pro navržení tříbarevných kombinací klientovi.
Vývojář budující tmavý motiv použije monochromatickou paletu pro generování řady odstínů a nuancí z jediné firemní barvy.
Tvůrce obsahu vybere analogickou paletu pro výběr doplňkových barev pro prezentaci, které působí soudržně bez ostrého kontrastu.
Návrhář uživatelského rozhraní použije komplementární paletu pro identifikaci vysoce kontrastní doplňkové barvy, která vyniká na pozadí primární firemní barvy.

Často kladené otázky

Jak funguje komplementární paleta?

Komplementární barva je odstín přímo naproti základní barvě na barevném kruhu HSL, 180 stupňů. Umístění komplementárních barev vedle sebe vytváří maximální kontrast. Nástroj zobrazuje základní barvu a její komplement, plus světlejší a tmavší varianty každé z nich.

Jaký je rozdíl mezi triadickými a tetradickými paletami?

Triadická paleta používá tři odstíny rovnoměrně rozmístěné 120 stupňů od sebe na barevném kruhu. Tetradická paleta používá čtyři odstíny 90 stupňů od sebe, tvořící dva komplementární páry (nazývaná také dvojitá komplementární nebo čtvercová paleta). Tetradické palety jsou komplexnější a vyžadují pečlivé vyvážení proporcí, aby se předešlo vizuálnímu šumu.

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

Ne. Generování palety je aritmetika na reprezentaci HSL základní barvy: otočení úhlu odstínu o pevné hodnoty, posunutí světlosti a sytosti. Každý výpočet probíhá lokálně v prohlížeči; nic se neposílá na žádný server.

Mohu exportovat paletu jako soubor CSS nebo soubor designového tokenu?

Nástroj aktuálně zobrazuje vzorky s kopírovatelnými hodnotami HEX a RGB. Pro úplný export vlastních vlastností CSS nebo JSON designového tokenu zkopírujte hodnoty ručně do souboru tokenu nebo CSS projektu. Vyhrazené tlačítko exportu může být přidáno v budoucí aktualizaci.

Dodržuje tento generátor nějaký formální standard teorie barev?

Výpočty palety používají standardní vzorce otáčení odstínu v barevném prostoru HSL, což je konvence ve většině webových návrhářských nástrojů. Přesná perceptuální uniformita HSL má omezení ve srovnání s LAB nebo OKLCH, ale otočení HSL produkuje palety odpovídající konvencím barevného kruhu, které návrháři obvykle očekávají.

Související nástroje

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

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