CodeKitHubCo je tento nástroj?
Škála odstínů je řada variací jedné barvy na různých úrovních světlosti, používaná v UI designu pro věci jako hover stavy, deaktivované stavy, ohraničení a pozadí, které musí souviset s barvou značky, aniž by s ní byly totožné.
Tento nástroj převede vaši základní barvu do HSL, ponechá odstín a sytost pevně dané a mění světlost přibližně od 95 % (téměř bílý tón) do přibližně 10 % (téměř černý odstín), přičemž vaše původní barva je umístěna na svém přirozeném místě uprostřed škály.
Proč ho používat?
- Generuje škálu ve stylu designového systému (podobně jako Tailwindova škála 50/100/200.../900) z jakékoli jednotlivé barvy, nejen z pevné přednastavené palety.
- Vyberte si 7, 9 nebo 11 kroků podle toho, jak jemnou škálu potřebujete.
- Každý krok zobrazuje přesný kód HEX a procento světlosti — kliknutím zkopírujete.
- Udržuje odstín a sytost konstantní v celé škále, takže všechny odstíny jasně souvisí se základní barvou místo toho, aby sklouzávaly do šedi.
- Zdarma, okamžité a plně lokální.
Jak se používá
- Vyberte základní barvu pomocí výběru barev nebo zadáním kódu HEX.
- Zvolte, kolik kroků chcete ve škále (7, 9 nebo 11).
- Přečtěte si kód HEX a procento světlosti každého odstínu přímo na jeho vzorníku.
- Kliknutím na libovolný vzorník zkopírujete jeho kód HEX.
Příklad
Vstup
#3B82F6 (středně modrá), 9 krokůVýstup
9 odstínů od téměř bílého tónu (~95 % světlosti) po téměř černý odstín (~10 % světlosti), přičemž #3B82F6 samotná je umístěna jako prostřední krokOdstín a sytost zůstávají konstantní ve všech 9 krocích — mění se pouze světlost — takže každý odstín jasně patří do stejné barevné rodiny.
Časté dotazy
Je to stejný systém, jaký Tailwind CSS používá pro své barevné škály?
Je to stejná základní myšlenka (pevný odstín/sytost, proměnlivá světlost), ale ne přesná replika konkrétní palety Tailwindu — škály 50-900 Tailwindu byly ručně doladěny designéry, nikoli vygenerovány jediným vzorcem. Tento nástroj vám dává srovnatelnou strukturu vygenerovanou z jakékoli barvy, kterou zvolíte, což je užitečné, pokud vaše základní barva není jedním z předvoleb Tailwindu.
Proč vypadá moje barva u dvou sousedních kroků téměř stejně?
To se může stát blízko velmi světlého nebo velmi tmavého konce škály, kde se vnímaná světlost mění pomaleji, než naznačuje číselné procento (známá vlastnost lidského vnímání barev, ne specifická pro tento nástroj). Volba menšího počtu kroků (7 místo 11) rozprostírá hodnoty světlosti více od sebe a snižuje počet téměř identických vzorníků.
Mohu tyto odstíny použít přímo jako vlastní CSS vlastnosti?
Ano — zkopírujte každý kód HEX a vložte jej do svých CSS proměnných (např. --color-brand-100 až --color-brand-900), přičemž pozici ve škále přizpůsobíte pojmenovací škále, kterou váš projekt používá.
Mám použít tento nástroj, nebo Mixér barev?
Pokud vytváříte světlejší a tmavší verze jedné barvy — hover stavy, jemná pozadí, ohraničení související s barvou značky — použijte tento generátor odstínů. Pokud naopak potřebujete barvu mezi dvěma různými barvami (řekněme krok mezi vaší primární modrou a sekundární oranžovou), použijte Mixér barev, který interpoluje RGB kanály dvou barev v libovolném poměru, místo aby měnil světlost jedné barvy.
Co se stane, když je moje základní barva už velmi světlá nebo velmi tmavá?
Základní barva vždy sedí ve středním řádku, přičemž tóny stoupají až k přibližně 95 % světlosti nad ní a odstíny klesají až k přibližně 10 % pod ní. Pokud je vaše základní barva již téměř bílá, tónová polovina škály se stlačí do úzkého rozsahu světlosti (téměř identické řádky), zatímco odstínová polovina se široce rozprostře — a naopak u velmi tmavé základní barvy. Pro nejrovnoměrněji rozloženou škálu začněte od verze vaší barvy se střední světlostí (zhruba 40-60 % světlosti).
Dokáže také generovat tóny (barvu smíchanou se šedou)?
Ne — tento nástroj mění pouze světlost při zachování pevné sytosti, což vytváří tóny a odstíny, ale ne barevné tóny smíchané se šedou. Pokud chcete tlumenější škálu, nejprve odsyťte svou základní barvu (vyberte její šedější verzi ve výběru barev) a z ní vygenerujte škálu; každý krok zdědí nižší sytost.