CodeKitHubŠto je ovaj alat?
Ljestvica nijansi je niz varijacija jedne boje na različitim razinama svjetline, koja se koristi u dizajnu korisničkog sučelja za stanja poput hover stanja, onemogućenih stanja, obruba i pozadina koje se trebaju povezati s brend bojom, a da nisu identične njoj.
Ovaj alat pretvara vašu osnovnu boju u HSL, zadržava nijansu i zasićenost fiksnima, te mijenja svjetlinu od otprilike 95% (skoro bijeli ton) do otprilike 10% (skoro crna nijansa), pri čemu se vaša izvorna boja nalazi na svojoj prirodnoj poziciji na sredini ljestvice.
Zašto ga koristiti?
- Generira ljestvicu u stilu dizajnerskog sustava (poput Tailwindove ljestvice 50/100/200.../900) iz bilo koje pojedinačne boje, a ne samo iz fiksne unaprijed određene palete.
- Odaberite 7, 9 ili 11 koraka ovisno o tome koliko detaljnu ljestvicu trebate.
- Svaki korak prikazuje svoj točan HEX kod i postotak svjetline — kliknite za kopiranje.
- Zadržava nijansu i zasićenost konstantnima kroz cijelu ljestvicu, tako da se sve nijanse čitaju kao jasno povezane s osnovnom bojom umjesto da se pretvaraju u sivu.
- Besplatno, trenutno i potpuno lokalno.
Kako ga koristiti
- Odaberite osnovnu boju pomoću birača boja ili unosom HEX koda.
- Odaberite koliko koraka želite u ljestvici (7, 9 ili 11).
- Pročitajte HEX kod i postotak svjetline svake nijanse izravno na njezinom uzorku.
- Kliknite bilo koji uzorak da biste kopirali njegov HEX kod.
Primjer
Ulaz
#3B82F6 (srednje plava), 9 korakaIzlaz
9 nijansi od skoro bijelog tona (~95% svjetline) do skoro crne nijanse (~10% svjetline), pri čemu je #3B82F6 pozicioniran kao srednji korakNijansa i zasićenost ostaju fiksni kroz svih 9 koraka — mijenja se samo svjetlina — tako da se svaka nijansa čita kao jasan dio iste obitelji boja.
Često postavljana pitanja
Je li ovo isti sustav koji Tailwind CSS koristi za svoje ljestvice boja?
Riječ je o istoj temeljnoj ideji (fiksna nijansa/zasićenost, promjenjiva svjetlina), ali ne o točnoj replici Tailwindove specifične palete — Tailwindove ljestvice od 50 do 900 ručno su fino podešene od strane dizajnera, a ne generirane jednom formulom. Ovaj alat daje usporedivu strukturu generiranu iz bilo koje boje koju odaberete, što je korisno kada vaša osnovna boja nije jedna od Tailwindovih unaprijed određenih boja.
Zašto moja boja izgleda gotovo isto u dva susjedna koraka?
To se može dogoditi blizu vrlo svijetlih ili vrlo tamnih krajeva ljestvice, gdje se percipirana svjetlina mijenja sporije nego što sugerira brojčani postotak (poznato svojstvo ljudske percepcije boja, ne nešto specifično za ovaj alat). Odabir manje koraka (7 umjesto 11) razdvaja vrijednosti svjetline dalje jedne od drugih i smanjuje gotovo identične uzorke.
Mogu li ove nijanse izravno koristiti kao CSS prilagođena svojstva?
Da — kopirajte svaki HEX kod i zalijepite ga u svoje CSS varijable (npr. --color-brand-100 do --color-brand-900), uskladivši poziciju u ljestvici s bilo kojom shemom imenovanja koju vaš projekt koristi.
Trebam li koristiti ovo ili Mikser boja?
Ako izrađujete svjetlije i tamnije verzije jedne boje — hover stanja, suptilne pozadine, obrube koji se odnose na brend boju — koristite ovaj generator nijansi. Ako umjesto toga trebate boju između dvije različite boje (recimo, korak između vaše primarne plave i sekundarne narančaste), koristite Mikser boja, koji interpolira RGB kanale dviju boja u bilo kojem omjeru umjesto mijenjanja svjetline jedne boje.
Što se događa ako je moja osnovna boja već vrlo svijetla ili vrlo tamna?
Osnovna boja uvijek se nalazi u srednjem redu, s tonovima koji se penju do otprilike 95% svjetline iznad nje i nijansama koje se spuštaju do otprilike 10% ispod nje. Ako je vaša osnovna boja već gotovo bijela, polovica ljestvice s tonovima se komprimira u uzak raspon svjetline (gotovo identični redovi) dok se polovica s nijansama široko rasprostire — i obrnuto za vrlo tamnu osnovnu boju. Za najravnomjernije raspoređenu ljestvicu, počnite od verzije vaše boje srednje svjetline (otprilike 40-60% svjetline).
Može li generirati i tonove (boja pomiješana sa sivom)?
Ne — ovaj alat mijenja samo svjetlinu zadržavajući zasićenost fiksnom, što proizvodi tonove i nijanse, ali ne i prigušene tonove sa sivom. Ako želite prigušeniju ljestvicu, prvo desaturirajte svoju osnovnu boju (odaberite njezinu sivkastiju verziju u biraču boja) i generirajte ljestvicu iz nje; svaki korak naslijedit će nižu zasićenost.