CodeKitHubБұл құрал не істейді?
Реңк шкаласы — бір түстің әртүрлі жарықтық деңгейлеріндегі нұсқаларының қатары, ол UI дизайнында hover күйлері, өшірілген күйлер, жиектер мен брендтің түсіне қатысты болуы керек, бірақ онымен бірдей болмауы тиіс фондар үшін қолданылады.
Бұл құрал сіздің негізгі түсіңізді HSL форматына түрлендіреді, реңк пен қанықтықты тұрақты етіп сақтайды және жарықтықты шамамен 95%-дан (ақ түске жақын тон) 10%-ға дейін (қара түске жақын реңк) сатылап өзгертеді, ал сіздің бастапқы түсіңіз шкаланың ортасында өзінің табиғи орнында тұрады.
Оны неге пайдалану керек?
- Кез келген бір түстен дизайн жүйесі стиліндегі шкаланы (Tailwind-тің 50/100/200.../900 шкаласы сияқты) жасайды, тек бекітілген дайын палитрадан емес.
- Шкалаға қаншалықты егжей-тегжейлі болу керектігіне қарай 7, 9 немесе 11 қадамды таңдаңыз.
- Әрбір қадам дәл HEX кодын және жарықтық пайызын көрсетеді — көшіру үшін басыңыз.
- Реңк пен қанықтықты бүкіл шкала бойында тұрақты сақтайды, сондықтан барлық реңктер сұр түске ауытқымай, негізгі түске нақты қатысты болып көрінеді.
- Тегін, лезде және толығымен жергілікті түрде жұмыс істейді.
Оны қалай пайдалану керек
- Түс таңдағышты пайдаланып немесе HEX кодын теріп негізгі түсіңізді таңдаңыз.
- Шкалада қанша қадам қалайтыныңызды таңдаңыз (7, 9 немесе 11).
- Әрбір реңктің HEX кодын және жарықтық пайызын тікелей оның үлгісінен оқыңыз.
- HEX кодын көшіру үшін кез келген үлгіні басыңыз.
Мысал
Енгізу
#3B82F6 (орташа көк), 9 қадамНәтиже
ақ түске жақын тоннан (~95% жарықтық) қара түске жақын реңкке дейін (~10% жарықтық) 9 реңк, #3B82F6 өзі ортаңғы қадам ретінде орналасадыРеңк пен қанықтық барлық 9 қадамда тұрақты қалады — тек жарықтық өзгереді — сондықтан әрбір реңк бір түс тобының айқын бөлігі ретінде көрінеді.
Жиі қойылатын сұрақтар
Бұл Tailwind CSS түс шкалаларында қолданатын жүйемен бірдей ме?
Бұл дәл сол негізгі идея (тұрақты реңк/қанықтық, өзгермелі жарықтық), бірақ Tailwind-тің нақты палитрасының дәл көшірмесі емес — Tailwind-тің 50-900 шкалалары дизайнерлер қолымен реттелген, бір формуламен жасалмаған. Бұл құрал сіз таңдаған кез келген түстен жасалатын салыстырмалы құрылымды береді, бұл негізгі түсіңіз Tailwind-тің дайын нұсқаларының бірі болмаса пайдалы.
Неге менің түсім екі көрші қадамда бірдей болып көрінеді?
Бұл шкаланың өте ашық немесе өте күңгірт шеттерінде болуы мүмкін, мұнда қабылданатын жарықтық сандық пайызға қарағанда баяу өзгереді (бұл адамның түсті қабылдауының белгілі қасиеті, тек осы құралға тән емес). Аз қадам таңдау (11-дің орнына 7) жарықтық мәндерін бір-бірінен алшақтатып, бірдей сияқты үлгілерді азайтады.
Бұл реңктерді CSS айнымалылары ретінде тікелей пайдалана аламын ба?
Иә — әрбір HEX кодын көшіріп, оны CSS айнымалыларыңызға қойыңыз (мысалы, --color-brand-100-ден --color-brand-900-ге дейін), шкаладағы орынды жобаңыз қолданатын атау схемасына сәйкестендіріп.
Мен мұны пайдалануым керек пе, әлде Түс араластырғышын ба?
Егер бір түстің ашығырақ және күңгірттеу нұсқаларын жасап жатсаңыз — hover күйлері, бренд түсіне қатысты нәзік фондар мен жиектер — осы реңк генераторын пайдаланыңыз. Ал егер сізге екі түрлі түстің арасындағы түс керек болса (мысалы, негізгі көк пен қосымша қызғылт сары арасындағы қадам), Түс араластырғышын пайдаланыңыз, ол бір түстің жарықтығын өзгертудің орнына екі түстің RGB арналарын кез келген қатынаста интерполяциялайды.
Негізгі түсім қазірдің өзінде өте ашық немесе өте күңгірт болса не болады?
Негізгі түс әрқашан ортаңғы қатарда орналасады, тондар одан жоғары шамамен 95% жарықтыққа дейін көтеріледі, ал реңктер одан төмен шамамен 10%-ға дейін түседі. Егер негізгі түсіңіз ақ түске жақын болса, шкаланың тон жартысы тар жарықтық ауқымына сығылады (бірдей сияқты қатарлар), ал реңк жартысы кеңінен таралады — өте күңгірт негізгі түс үшін керісінше болады. Ең біркелкі бөлінген шкала үшін түсіңіздің орташа жарықтықтағы нұсқасынан бастаңыз (шамамен 40-60% жарықтық).
Ол тондарды да (сұр түспен араласқан түс) жасай ала ма?
Жоқ — бұл құрал тек жарықтықты өзгертеді, қанықтықты тұрақты сақтай отырып, бұл тондар мен реңктерді тудырады, бірақ түстің сұрланған нұсқаларын жасамайды. Егер сізге неғұрлым басылған шкала қажет болса, алдымен негізгі түсіңіздің қанықтығын төмендетіңіз (түс таңдағышта оның сұрлау нұсқасын таңдаңыз) және содан кейін шкаланы жасаңыз — әрбір қадам төмен қанықтықты мұраланады.