CodeKitHubČo je tento nástroj?
Rad odtieňov je séria variácií jednej farby na rôznych úrovniach jasu, používaná v celom UI dizajne pre veci ako hover stavy, deaktivované stavy, okraje a pozadia, ktoré musia súvisieť so značkovou farbou bez toho, aby s ňou boli identické.
Tento nástroj prevedie vašu základnú farbu na HSL, zachová odtieň a sýtosť pevné a mení jas približne od 95 % (takmer biely tón) až po približne 10 % (takmer čierny odtieň), pričom vaša pôvodná farba je umiestnená na svojej prirodzenej pozícii uprostred radu.
Prečo ho používať?
- Generuje rad v štýle dizajnového systému (ako škála 50/100/200.../900 Tailwind) z akejkoľvek jednotlivej farby, nielen z pevnej prednastavenej palety.
- Vyberte si 7, 9 alebo 11 krokov podľa toho, ako jemný rad potrebujete.
- Každý krok zobrazuje presný HEX kód a percento jasu — kliknutím skopírujete.
- Zachováva odtieň a sýtosť konštantné počas celého radu, takže všetky odtiene pôsobia jasne súvisiaco so základnou farbou namiesto toho, aby smerovali k šedej.
- Zadarmo, okamžité a plne lokálne.
Ako sa používa
- Vyberte si základnú farbu pomocou výberu farieb alebo zadaním HEX kódu.
- Vyberte si, koľko krokov chcete v rade (7, 9 alebo 11).
- Prečítajte si HEX kód a percento jasu každého odtieňa priamo na jeho vzorke.
- Kliknutím na ľubovoľnú vzorku skopírujete jej HEX kód.
Príklad
Vstup
#3B82F6 (stredná modrá), 9 krokovVýstup
9 odtieňov od takmer bieleho tónu (~95 % jasu) po takmer čierny odtieň (~10 % jasu), pričom samotná farba #3B82F6 je umiestnená ako stredný krokOdtieň a sýtosť zostávajú pevné vo všetkých 9 krokoch — mení sa iba jas — takže každý odtieň jasne pôsobí ako súčasť rovnakej farebnej rodiny.
Časté otázky
Je toto rovnaký systém, aký používa Tailwind CSS pre svoje farebné škály?
Je to rovnaká základná myšlienka (pevný odtieň/sýtosť, premenlivý jas), ale nie presná replika špecifickej palety Tailwind — škály 50-900 Tailwind boli ručne doladené dizajnérmi, nie generované jediným vzorcom. Tento nástroj vám dáva porovnateľnú štruktúru generovanú z akejkoľvek farby, ktorú si vyberiete, čo je užitočné, keď vaša základná farba nie je jednou z prednastavených hodnôt Tailwind.
Prečo moja farba vyzerá na dvoch susedných krokoch takmer rovnako?
To sa môže stať blízko veľmi svetlých alebo veľmi tmavých koncov radu, kde sa vnímaný jas mení pomalšie, než naznačuje číselné percento (známa vlastnosť ľudského vnímania farieb, nie špecifická pre tento nástroj). Výber menšieho počtu krokov (7 namiesto 11) rozprestrie hodnoty jasu ďalej od seba a znižuje takmer identické vzorky.
Môžem tieto odtiene použiť priamo ako vlastné CSS vlastnosti?
Áno — skopírujte každý HEX kód a vložte ho do svojich CSS premenných (napr. --color-brand-100 až --color-brand-900), pričom pozíciu v rade zosúlaďte s akoukoľvek škálou pomenovania, ktorú váš projekt používa.
Mám použiť tento nástroj alebo Color Mixer?
Ak vytvárate svetlejšie a tmavšie verzie jednej farby — hover stavy, jemné pozadia, okraje súvisiace so značkovou farbou — použite tento generátor odtieňov. Ak namiesto toho potrebujete farbu medzi dvoma rôznymi farbami (napríklad krok medzi vašou primárnou modrou a sekundárnou oranžovou), použite Color Mixer, ktorý interpoluje RGB kanály dvoch farieb v akomkoľvek pomere namiesto toho, aby menil jas jednej farby.
Čo sa stane, ak je moja základná farba už veľmi svetlá alebo veľmi tmavá?
Základná farba je vždy v strednom riadku, pričom tóny stúpajú až na približne 95 % jasu nad ňou a odtiene klesajú až na približne 10 % pod ňou. Ak je vaša základná farba už takmer biela, tónová polovica radu sa stlačí do úzkeho rozsahu jasu (takmer identické riadky), zatiaľ čo odtieňová polovica sa rozprestrie širšie — a naopak pri veľmi tmavej základnej farbe. Pre najrovnomernejšie rozložený rad začnite so strednou verziou jasu vašej farby (približne 40-60 % jasu).
Dokáže generovať aj tóny (farbu zmiešanú so šedou)?
Nie — tento nástroj mení iba jas, pričom sýtosť zostáva pevná, čo produkuje tóny a odtiene, ale nie šedé tóny. Ak chcete tlmenejší rad, najprv znížte sýtosť základnej farby (vyberte si jej sivšiu verziu vo výbere farieb) a generujte rad z nej; každý krok zdedí nižšiu sýtosť.