tigtools

Generátor barevných palet

Začněte jednou základní barvou, vyberte barevnou harmonii a zkopírujte paletu ve formátu, který váš projekt používá.

Běží ve vašem prohlížeči Bez registrace

Paleta

  • #3366cc
  • #8c6500

Zamčené barvy zůstávají stejné, když změníte základní barvu.

Exportovat jako

Jak používat

  1. Zadejte základní barvu nebo ji vyberte. „Nová náhodná základní barva“ vybere jednu za vás.
  2. Vyberte harmonii. „Odstíny a tóny“ vytvoří 11stupňovou škálu od velmi světlé po velmi tmavou.
  3. Uzamkněte libovolnou barvu, kterou si chcete ponechat, a pak zkoušejte další základní barvy.
  4. Vyberte HEX, vlastní vlastnosti CSS nebo JSON, nastavte název a zkopírujte kód.

Jak to funguje

Harmonie se hledají otáčením odstínu po barevném kruhu: doplňková barva přidá protilehlý odstín (180°), analogická přidá sousedy vzdálené 30° a 60° na každou stranu, triáda používá tři odstíny vzdálené 120°, tetráda čtyři odstíny vzdálené 90° a rozdělená doplňková dva odstíny vedle doplňkové barvy (150° a 210°).

Otáčení probíhá v OKLCH, nikoli v HSL. OKLCH udržuje vnímanou světlost stabilní, takže žlutá a modrá ve stejné paletě vypadají podobně jasné, místo aby žlutá oslňovala. Když by otočená barva spadla mimo rozsah, který sRGB obrazovky umí zobrazit, její chroma se snižuje, dokud se nevejde, přičemž světlost a odstín zůstávají zachovány.

Škála odstínů a tónů používá pevné kroky světlosti OKLCH pojmenované 50 až 950, podobně jako pojmenování používané v Tailwind CSS, s chromou sníženou poblíž bílé a černé, aby nejsvětlejší tóny nevypadaly neonově. Harmonie jsou výchozím bodem: před použitím pro obsah ověřte dvojice textu a pozadí nástrojem na kontrolu kontrastu.

Příklady

Barva značky s akcentem

Základ #3366cc s volbou „Doplňková“ přidá #8c6500, teplý okr se stejnou světlostí OKLCH. Modrá a oranžovožlutá jsou běžnou volbou pro akcenty vedle modré značky.

Design tokeny pro knihovnu komponent

Vyberte „Odstíny a tóny“, nastavte název na „primary“ a exportujte proměnné CSS. Získáte --primary-50 až --primary-950, připravené pro pozadí (50–100), ohraničení (200–300) a text (700–900).

Ponechání jedné barvy při zkoušení

Uzamkněte druhou barvu triadické palety a poté zkuste různé základní barvy. Uzamčený vzorek si zachová svou HEX hodnotu, zatímco se ostatní mění.

Časté dotazy

Proč se mé barvy liší od nástroje s barevným kruhem HSL?

Tento nástroj otáčí odstín v OKLCH, percepčním barevném prostoru. Jeho úhly odstínu se přesně neshodují s HSL, takže „opačná“ barva může být mírně odlišný odstín, než jaký poskytne nástroj HSL.

Mohu použít JSON v Tailwind CSS?

JSON mapuje názvy na HEX hodnoty, stejný tvar, jaký Tailwind přijímá pro barvu ve své konfiguraci motivu. V Tailwindu 4 můžete také vložit CSS proměnné do bloku @theme poté, co je přejmenujete na --color-…

Jsou vygenerované palety přístupné?

Ne automaticky. Harmonie neříká nic o kontrastu mezi textem a pozadím. Každou dvojici, kterou plánujete použít, zkontrolujte pomocí nástroje Kontrola kontrastu.

Soukromí

Palety se generují ve vašem prohlížeči. Vaše barvy se nikam neodesílají ani neukládají.