CodeKitHubCo je tento nástroj?
Tailwind CSS nabízí pevně danou výchozí barevnou škálu místo toho, aby vám umožnil vybírat libovolné hodnoty pro běžné barvy uživatelského rozhraní. Každá z 22 pojmenovaných rodin (například amber nebo slate) má přesně 11 odstínů, číslovaných od 50 do 950, a každý odstín má jednu oficiální hex hodnotu, kterou dokumentuje samotný Tailwind a která se používá identicky napříč utilitami bg-, text-, border- a ring-.
Tento přehled má celou oficiální paletu vloženou lokálně, takže vyhledání barvy nebo názvu třídy nevyžaduje otevírání dokumentace Tailwindu, spouštění buildu ani protahování třídy přes PurgeCSS jen proto, abyste viděli, jak vypadá. Vyhledávání podle hexu používá RGB euklidovskou vzdálenost k nalezení nejbližšího oficiálního odstínu a vyhledávání podle třídy je přesné — každá hodnota zde odpovídá zdokumentovaným výchozím hodnotám Tailwindu.
Proč ho používat?
- Vložte hex kód z návrhového souboru nebo screenshotu a okamžitě získejte nejbližší název třídy Tailwind, místo abyste hádali, kterému číslovanému odstínu odpovídá.
- Napište název třídy, například slate-900 nebo bg-purple-500, a zobrazte si přesnou hex a RGB hodnotu bez prohledávání dokumentace Tailwindu.
- Procházejte celou mřížku 22 rodin x 11 odstínů a porovnávejte odstíny vedle sebe před výběrem.
- Získejte varianty bg-, text-, border- a ring- pro libovolný odstín jedním kliknutím, protože Tailwind používá napříč všemi stejnou číselnou škálu.
- Zdarma, okamžitě a plně lokálně — žádné nahrávání, žádný účet, žádný build krok.
Jak se používá
- Chcete-li najít název třídy podle hex kódu: napište nebo vložte hex hodnotu (s # nebo bez) do vyhledávacího pole — nejbližší oficiální odstín Tailwindu se zobrazí nad mřížkou spolu s barevnou vzdáleností, pokud nejde o přesnou shodu.
- Chcete-li najít hex hodnotu podle názvu třídy: napište název třídy nebo rodiny (např. amber-500, bg-blue-600, nebo jen teal) — přesná shoda zobrazí hex, RGB a všechny varianty utilit; samotný název rodiny přefiltruje mřížku na tuto rodinu.
- Chcete-li procházet vše: nechte vyhledávací pole prázdné a klikněte na libovolný vzorek v mřížce — jeho detaily se zobrazí v panelu nahoře a jeho hex kód se automaticky zkopíruje.
- Kliknutím na libovolné tlačítko varianty bg-/text-/border-/ring- v detailním panelu zkopírujete přesný název dané třídy.
Příklad
Vstup
#c4b5fdVýstup
violet-300 — Přesná shoda, #C4B5FD, rgb(196, 181, 253)Tento hex je jednou z oficiálně zdokumentovaných výchozích hodnot Tailwindu, takže vzdálenost je 0 a shoda je přesná, nikoli přibližná.
Časté dotazy
Jsou to oficiální výchozí barvy Tailwind CSS?
Ano — všech 242 hex hodnot (22 rodin x 11 odstínů) pochází z oficiálně zdokumentované výchozí palety Tailwindu. Tailwind v4 interně reprezentuje barvy jako OKLCH, ale stejná výchozí paleta a její zdokumentované hex ekvivalenty se od verze v3 nezměnily, takže tyto hodnoty platí pro obě verze.
Co znamená, když vyhledání podle hexu není přesná shoda?
Pokud vložíte hex kód, který není jednou z 242 výchozích hodnot Tailwindu (například vlastní firemní barva), nástroj zobrazí nejbližší oficiální odstín podle RGB vzdálenosti a označí jej jako „Nejbližší shoda“ s uvedenou vzdáleností — nebude pixelově totožný s vaším vstupem, jen nejbližší výchozí barvou Tailwindu.
Proč bg-, text-, border- a ring- používají stejná čísla?
Tailwind aplikuje jednu sdílenou barevnou škálu napříč všemi kategoriemi utilit, takže bg-amber-500, text-amber-500, border-amber-500 a ring-amber-500 jsou stejná podkladová hex hodnota aplikovaná na jinou CSS vlastnost. Proto detailní panel zobrazuje všechny čtyři varianty společně pro jakýkoli odstín, který vyhledáte.
Mohu vyhledat celou rodinu, například jen „blue“, bez čísla odstínu?
Ano — zadání samotného názvu rodiny (bez čísla) přefiltruje mřížku na všech 11 odstínů dané rodiny, takže je můžete porovnat vedle sebe, aniž byste zatím vybírali konkrétní odstín.
Zahrnuje to vlastní barvy motivu Tailwind, které jsem definoval ve své konfiguraci?
Ne — tento přehled zahrnuje pouze vestavěnou výchozí paletu Tailwindu, nikoli barvy, které jste přidali nebo přepsali v bloku tailwind.config.js theme.extend.colors nebo bloku @theme ve v4. Pokud váš projekt paletu upravuje, skutečné vykreslené barvy se mohou lišit od toho, co je zde zobrazeno pro stejný název třídy.