CodeKitHubMis see tööriist on?
Toonide rida on ühe värvi variatsioonide seeria erinevatel heledustasemetel, mida kasutatakse kasutajaliidese disainis näiteks hõljutusolekute, keelatud olekute, äärejoonte ja taustade jaoks, mis peavad olema seotud brändivärviga, olemata sellega identsed.
See tööriist teisendab su baasvärvi HSL-i, hoiab tooni ja küllastuse fikseerituna ning muudab heledust umbes 95%-lt (peaaegu valge toon) kuni umbes 10%-ni (peaaegu must toon), kusjuures su algne värv paigutub oma loomulikku positsiooni rea keskele.
Miks seda kasutada?
- Genereerib disainisüsteemi stiilis rea (nagu Tailwindi 50/100/200.../900 skaala) mis tahes üksikust värvist, mitte ainult fikseeritud eelseatud paletist.
- Vali 7, 9 või 11 sammu olenevalt sellest, kui detailset rida vajad.
- Iga samm näitab oma täpset HEX-koodi ja heleduse protsenti — klõpsa kopeerimiseks.
- Hoiab tooni ja küllastuse kogu rea ulatuses konstantsena, nii et kõik toonid tunduvad selgelt seotud baasvärviga, mitte hallile kalduvana.
- Tasuta, kohene ja täielikult kohalik.
Kuidas kasutada
- Vali oma baasvärv värvivalija abil või sisestades HEX-koodi.
- Vali, mitu sammu soovid reas (7, 9 või 11).
- Loe iga tooni HEX-koodi ja heleduse protsenti otse selle näidiselt.
- Klõpsa mis tahes näidisel, et kopeerida selle HEX-kood.
Näide
Sisend
#3B82F6 (keskmine sinine), 9 sammuTulemus
9 tooni peaaegu valgest toonist (~95% heledus) kuni peaaegu musta toonini (~10% heledus), kusjuures #3B82F6 ise paikneb keskmise sammunaToon ja küllastus jäävad kõigi 9 sammu ulatuses fikseerituks — muutub ainult heledus —, nii et iga toon tundub selgelt kuuluvat samasse värvipere.
Korduma kippuvad küsimused
Kas see on sama süsteem, mida Tailwind CSS oma värviskaalade jaoks kasutab?
See on sama põhiidee (fikseeritud toon/küllastus, muutuv heledus), kuid mitte täpne koopia Tailwindi konkreetsest paletist — Tailwindi 50-900 skaalad on disainerite käsitsi häälestatud, mitte ühe valemi järgi genereeritud. See tööriist annab sulle võrreldava struktuuri, mis on genereeritud mis tahes valitud värvist, mis on kasulik siis, kui su baasvärv ei ole üks Tailwindi eelseadetest.
Miks minu värv näeb kahel kõrvutisel sammul peaaegu ühesugune välja?
See võib juhtuda rea väga heledate või väga tumedate äärte lähedal, kus tajutav heledus muutub aeglasemalt, kui numbriline protsent viitab (inimese värvitaju tuntud omadus, mitte selle tööriista eripära). Vähemate sammude valimine (7 selle asemel, et 11) laotab heleduse väärtused kaugemale üksteisest ja vähendab peaaegu identseid näidiseid.
Kas saan neid toone kasutada otse CSS-i kohandatud omadustena?
Jah — kopeeri iga HEX-kood ja kleebi see oma CSS-muutujatesse (nt --color-brand-100 kuni --color-brand-900), sobitades rea positsiooni su projekti kasutatava nimetamisskaalaga.
Kas peaksin kasutama seda või Color Mixerit?
Kui teed ühest värvist heledamaid ja tumedamaid versioone — hõljutusolekud, õrnad taustad, brändivärviga seotud äärejooned — kasuta seda toonide generaatorit. Kui vajad hoopis värvi kahe erineva värvi vahel (ütleme, sammu su põhilise sinise ja teisese oranži vahel), kasuta Color Mixerit, mis interpoleerib kahe värvi RGB-kanaleid mis tahes suhtega, mitte ei muuda ühe värvi heledust.
Mis juhtub, kui minu baasvärv on juba väga hele või väga tume?
Baasvärv asub alati keskmises reas, toonid muutuvad heledamaks kuni umbes 95% heleduseni selle kohal ja tumedamaks kuni umbes 10% heleduseni selle all. Kui su baasvärv on juba peaaegu valge, surutakse rea heleda poole toonid kitsasse heleduse vahemikku (peaaegu identsed read), samal ajal kui tumeda poole toonid levivad laialt — ja vastupidi väga tumeda baasvärvi puhul. Kõige ühtlasemalt jaotunud rea saamiseks alusta oma värvi keskmise heledusega versioonist (umbes 40-60% heledus).
Kas see suudab genereerida ka toone (värv seguga hallist)?
Ei — see tööriist muudab ainult heledust, hoides küllastuse fikseerituna, mis loob heledaid ja tumedaid toone, kuid mitte hallikaid toone. Kui soovid summutatumat rida, vähenda esmalt oma baasvärvi küllastust (vali värvivalijas selle halliim versioon) ja genereeri rida sellest; iga samm pärib madalama küllastuse.