CodeKitHubKas ir šis rīks?
Toņu skala ir vienas krāsas variāciju virkne dažādos gaišuma līmeņos, ko izmanto lietotāja saskarnes dizainā tādām lietām kā hover stāvokļi, atspējoti stāvokļi, apmales un foni, kuriem jābūt saistītiem ar zīmola krāsu, nebūdami tai identiski.
Šis rīks pārvērš jūsu pamatkrāsu HSL formātā, saglabā toni un piesātinājumu fiksētu un maina gaišumu soļos no aptuveni 95% (gandrīz baltbalta nokrāsa) līdz aptuveni 10% (gandrīz melns tonis), turklāt jūsu oriģinālā krāsa atrodas savā dabiskajā vietā skalas vidū.
Kāpēc to izmantot?
- Ģenerē dizaina sistēmas stila skalu (līdzīgu Tailwind 50/100/200.../900 skalai) no jebkuras vienas krāsas, nevis tikai no fiksētas iepriekš noteiktas paletes.
- Izvēlieties 7, 9 vai 11 soļus atkarībā no tā, cik detalizēta skala jums nepieciešama.
- Katrs solis parāda precīzu HEX kodu un gaišuma procentu — noklikšķiniet, lai kopētu.
- Saglabā toni un piesātinājumu nemainīgu visā skalā, tāpēc visas nokrāsas skaidri izskatās saistītas ar pamatkrāsu, nevis pārvēršas pelēkā tonī.
- Bezmaksas, tūlītējs un pilnībā lokāls.
Kā to lietot
- Izvēlieties savu pamatkrāsu, izmantojot krāsu izvēlni vai ievadot HEX kodu.
- Izvēlieties, cik soļu vēlaties skalā (7, 9 vai 11).
- Nolasiet katras nokrāsas HEX kodu un gaišuma procentu tieši uz tās parauga.
- Noklikšķiniet uz jebkura parauga, lai kopētu tā HEX kodu.
Piemērs
Ievade
#3B82F6 (vidēji zila), 9 soļiIzvade
9 nokrāsas no gandrīz baltas nokrāsas (~95% gaišums) līdz gandrīz melnam tonim (~10% gaišums), turklāt #3B82F6 pats atrodas kā vidējais solisTonis un piesātinājums paliek nemainīgi visos 9 soļos — mainās tikai gaišums — tāpēc katra nokrāsa skaidri izskatās kā daļa no tās pašas krāsu saimes.
Biežāk uzdotie jautājumi
Vai tā ir tā pati sistēma, ko Tailwind CSS izmanto savām krāsu skalām?
Tā ir tā pati pamatideja (fiksēts tonis/piesātinājums, mainīgs gaišums), taču tā nav precīza Tailwind konkrētās paletes kopija — Tailwind 50-900 skalas dizaineri pielāgoja ar rokām, nevis ģenerēja ar vienu formulu. Šis rīks nodrošina salīdzināmu struktūru, ģenerētu no jebkuras jūsu izvēlētas krāsas, kas ir noderīgi, ja jūsu pamatkrāsa nav viena no Tailwind iepriekš noteiktajām.
Kāpēc mana krāsa divos blakus soļos izskatās gandrīz vienāda?
Tas var notikt pie ļoti gaišiem vai ļoti tumšiem skalas galiem, kur uztvertais gaišums mainās lēnāk, nekā liecina skaitliskais procents (tā ir zināma cilvēka krāsu uztveres īpašība, kas nav specifiska šim rīkam). Mazāka soļu skaita izvēle (7 nevis 11) izplata gaišuma vērtības tālāk viena no otras un samazina gandrīz identiskus paraugus.
Vai es varu izmantot šīs nokrāsas tieši kā CSS pielāgotās īpašības (custom properties)?
Jā — kopējiet katru HEX kodu un ielīmējiet to savos CSS mainīgajos (piem., no --color-brand-100 līdz --color-brand-900), saskaņojot skalas pozīciju ar to nosaukumu shēmu, ko izmanto jūsu projekts.
Vai man vajadzētu izmantot šo vai Krāsu jaucēju?
Ja veidojat vienas krāsas gaišākas un tumšākas versijas — hover stāvokļus, smalkus fonus, apmales, kas saistītas ar zīmola krāsu — izmantojiet šo toņu ģeneratoru. Ja tā vietā jums nepieciešama krāsa starp divām dažādām krāsām (piemēram, solis starp jūsu primāro zilo un sekundāro oranžo), izmantojiet Krāsu jaucēju, kas interpolē divu krāsu RGB kanālus jebkurā attiecībā, nevis maina vienas krāsas gaišumu.
Kas notiek, ja mana pamatkrāsa jau ir ļoti gaiša vai ļoti tumša?
Pamatkrāsa vienmēr atrodas vidējā rindā, nokrāsas palielinās virs tās līdz aptuveni 95% gaišumam, bet toņi samazinās zem tās līdz aptuveni 10%. Ja jūsu pamatkrāsa jau ir gandrīz balta, skalas nokrāsu puse tiek saspiesta šaurā gaišuma diapazonā (gandrīz identiskas rindas), bet toņu puse plaši izplešas — un otrādi ļoti tumšai pamatkrāsai. Vienmērīgākajai skalai sāciet ar vidēja gaišuma savas krāsas versiju (aptuveni 40-60% gaišums).
Vai tas var ģenerēt arī toņus (krāsu, kas sajaukta ar pelēku)?
Nē — šis rīks maina tikai gaišumu, saglabājot piesātinājumu fiksētu, kas rada nokrāsas un toņus, bet ne pelēkotas variācijas. Ja vēlaties klusinātāku skalu, vispirms samaziniet savas pamatkrāsas piesātinājumu (izvēlieties krāsu izvēlnē tās pelēcīgāku versiju) un ģenerējiet skalu no tās — katrs solis mantos zemāku piesātinājumu.