Clew

Басты бетҚұралдарҚолжетімді палитра генераторы

Қолжетімді палитра генераторы фирмалық түстен

Фирмалық түсті енгізіп, OKLCH қабылдау кеңістігінде құрылған 50-ден 900-ге дейінгі он қадамдық шкала алыңыз. Әр қадамның ақ және қара мәтінмен контрасы көрінеді, палитра WCAG AA-дан өтетін қадам жұптарын тізеді, ал нәтиже CSS айнымалыларына, Tailwind конфигіне немесе дизайн-токендерге экспортталады.

● Тегін, тіркелусізЖаңартылды:

HEX, rgb(), hsl() немесе oklch().
Латынша, айнымалы атауларына: --brand-500.
Автоматты режимде ашықтығы ең сәйкес қадамға қойылады; бар жүйеге сәйкестендіру үшін 500 немесе 600-ді бекітуге болады.

—

 

Бренд қадамы— 
Ақ мәтінмен AA— 
Қара мәтінмен AA— 
Ішкі AA жұптары— 
Палитра қадамдары және олардың ақ пен қарамен контрасы
ТокенТүсOKLCH Ақ мәтінҚара мәтінAPCA Lc А / Қ

AA-дан (4,5:1) өтетін мәтін мен фон жұптары

Фон қадамы → оның үстіне мәтін ретінде қоюға болатын сол палитраның қадамдары.

    
    
    Әдіс. Қадамдар фирмалық түс пен шкала шеттері арасында OKLCH ашықтығы бойынша тең таралады (50 үшін L ≈ 97,5 %, 900 үшін ≈ 25 %); реңк өзгермейді, хрома аққа қарай азаяды, sRGB қамтуынан тыс түстер сыйғанша хромасын жоғалтады. Контраст — WCAG 2.2 коэффициенті, жоғары дөңгелектенбейді.
    
  
    

    

    Барлығы браузеріңізде есептеледі — енгізген деректеріңіз ешқайда жіберілмейді.
    Қалай пайдалану керек
    

    1. Фирмалық түсті енгізіңізБрендбуктан HEX қойыңыз немесе түс таңдағыштан алыңыз. Генератор ашықтығы сәйкес қадамды тауып, жоғарыда ашық, төменде күңгірт тондарды құрады.
    2. Контраст кестесін тексеріңізӘр қадам үшін ақ және қара мәтінмен контраст көрсетіледі. «AA» — қалыпты мәтін үшін 4,5:1, «Ірі» — тек ірі мәтін мен интерфейс элементтері үшін 3:1.
    3. Мәтін мен фон жұбын таңдаңызЖұптар тізімі әр фонда мәтін ретінде қай қадамдарды қолдануға болатынын көрсетеді — мысалы, ақпараттық жолақ үшін 50 фондағы 700 мәтін.
    4. ЭкспорттаңызCSS айнымалыларын, Tailwind конфигін, JSON немесе W3C дизайн-токендерін таңдап, палитраға ат беріп, кодты жобаға көшіріңіз.
    Неге реңктерді OKLCH-та құрған дұрыс
    Түсті ашық не күңгірт ету үшін оны sRGB-де ақпен не қарамен араластыру немесе HSL-дегі L-ді өзгерту ең оңай. Екі тәсіл де біркелкі емес шкала береді. HSL ашықтығы қабылдауға сәйкес емес: 50 %-дағы сары 50 %-дағы көктен әлдеқайда ашық көрінеді, сондықтан «бірдей» қадам әр реңкте мүлде басқа контраст береді. sRGB-де ақпен араластыру реңкті жылжытады: көк күлгінге, қызыл қызғылтқа ауады.
    

    OKLCH — Бьорн Оттоссон 2020 жылы жариялаған OKLab кеңістігінің цилиндрлік түрі; қазір CSS Color Level 4-тің бөлігі. Ол дизайнерге маңызды үш параметрді бөледі:
    

    oklch(L C H)
L — қабылданатын ашықтық, 0 % (қара) пен 100 % (ақ) аралығы
C — хрома, түстің қанықтығы (0 — сұр, sRGB түстері шамамен 0,32-ге жетеді)
H — реңк бұрышы, градуспен
    

    L түстің көзге қаншалықты ашық көрінетінін бейнелейді, сондықтан L бойынша тең қадамдар кез келген реңкте біркелкі шкала береді, ал ақ пен қарамен контраст қадамнан қадамға болжамды өзгереді. Сол себепті Tailwind CSS v4 стандартты палитрасын OKLCH-та сипаттайды.
    

    Генератор шкаланы қалай құрады
    

      

    1. Фирмалық түс OKLCH-қа аударылып, эталон ашықтығы ең жақын қадамға (немесе сіз таңдаған қадамға) қойылады. Оның HEX мәні дәл сақталады.
      2. 

    2. Ашық қадамдар фирмалық түс пен L ≈ 97,5 % (50-қадам) арасында, күңгірт қадамдар фирмалық түс пен L ≈ 25 % (900-қадам) арасында L бойынша тең таралады.
      3. 

    3. Реңк өзгермейді. Хрома ашық шетке қарай азаяды — толық қанықтағы өте ашық тондар улы көрінеді — ал күңгірт шетке қарай ең көбі үштен бірге төмендейді.
      4. 

    4. sRGB қамтуынан тыс түс L мен H сақталып, хромасы азайту арқылы қайтарылады — CSS Color 4 ұсынымы бойынша.
      5. 

    5. Әр HEX арнаға 8 битке дейін дөңгелектенеді, ал контраст кодқа түсетін дөңгелектенген мән бойынша есептеледі.
      6. 

    Контраст бағандарын қалай оқу керек
    Кесте әр қадам үшін таза ақ (#fff) және таза қара (#000) мәтінмен WCAG 2.2 контраст коэффициентін көрсетеді:
    

      

    • AA — кемінде 4,5:1: негізгі мәтінге, жазуларға және сілтемелерге жарайды.
      • 

    • Ірі — 3:1 мен 4,5:1 аралығы: тек 24 px-тен (жуан 18,66 px-тен) бастап мәтінге және иконка, жиек, фокус жиегі сияқты мәтіндік емес элементтерге (WCAG 1.4.11).
      • 

    • Жоқ — 3:1-ден төмен: тек безендіру, мәтін емес.
      • 

    

    L = 0,2126 · R_lin + 0,7152 · G_lin + 0,0722 · B_lin
контраст = (L_ашық + 0,05) / (L_күңгірт + 0,05)
    

    Қадамдар қабылданатын ашықтыққа бағынатындықтан, көп реңкте нәтиже ұқсас: ақ мәтін AA-дан 600–900 қадамдарында, қара мәтін 50–500-де өтеді. Екеуімен бірдей іс жүзінде ештеңе өтпейді: ақпен де, қарамен де бір мезгілде 4,5:1 тек салыстырмалы жарықтылықтың өте тар аралығында (0,175–0,183) мүмкін. Сондықтан дизайн-жүйелерде ақ мәтінді негізгі батырмаларды 600 немесе 700-ге жасайды, ал 400–500-ді құю, график және ірі мәтін үшін қалдырады.
    

    APCA бағаны ақ және қара мәтін үшін WCAG 3 жобасындағы ашықтық контрастын (Lc) көрсетеді. 75-тен жоғары — негізгі мәтінге жайлы, 60-тан жоғары — интерфейс жазуларына, 45-тен жоғары — тақырыптарға. APCA әзірге стандарт емес: оны WCAG 2.2-ден өткен нұсқалар арасында таңдау үшін қолданыңыз.
    

    Палитра ішіндегі жұптар
    

    Тонды интерфейстерде — ақпараттық жолақтарда, таңдалған жолдарда, тегтерде, онбординг кеңестерінде — сол реңктің ашық қадамына күңгірт қадам қойылады. Жұптар тізімі әр фон үшін мәтіннің қай қадамдары 4,5:1 беретінін көрсетеді. Бағдар: арасы бес және одан көп қадам (50 мен 600, 100 мен 700) әдетте өтеді, көршілес қадамдар ешқашан өтпейді.
    Палитраны дизайн-жүйеде қалай қолдану керек
      

    • Мәнге емес, рөлге қарай атаңыз. Шкаланы --brand-50 … --brand-900 ретінде экспорттап, үстіне рөлдерді тағайындаңыз: --color-primary: var(--brand-600), --color-primary-text: var(--brand-700), --color-info-bg: var(--brand-50). Бренд өзгерсе, бір ғана тізімді түзетесіз.
      • 

    • Рұқсат етілген жұптарды жазып қойыңыз. Қай мәтін қадамын қай фонға қоюға болатынын құжаттаңыз, сонда ешкім асығыста 100 фонға 400 мәтін қоймайды.
      • 

    • Қараңғы тақырып — жеке сәйкестендіру. Сол шкаланы кері бағытта қолданыңыз — ашық қадамдар мәтінге, күңгірттері беттерге — және жұптарды қайта тексеріңіз: WCAG 2-ден өткен күңгірт жұптар әлі де солғын көрінуі мүмкін, APCA мұны жақсырақ көрсетеді.
      • 

    • Күйлерге де контраст керек. Hover мен басылған күй әдетте бір қадам күңгірттенеді; фокус жиегіне айналадағы фонмен 3:1 керек.
      • 

    • Семантикалық түстер (сәтті, ескерту, қате) дәл солай, әрқайсысы бір базалық түстен құрылады. Сары мен ашық жасыл тек ашық қадамдарда танылады, онда ақ мәтін өтпейді — олардың үстіне күңгірт мәтін қойыңыз.
      • 

    

    Жеке жұпты, соның ішінде палитрадан тыс түстерді немесе жартылай мөлдір қабаттарды тексеру үшін түс контрастын тексеру құралын пайдаланыңыз.
    Дереккөздер
      

    1. Ottosson B. A perceptual color space for image processing, 2020 — OKLab және OKLCH кеңістіктері, түрлендіру матрицалары.
      2. 

    2. W3C. CSS Color Module Level 4 — oklch() жазбасы және хроманы азайту арқылы қамтуға келтіру.
      3. 

    3. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — 1.4.3, 1.4.6 және 1.4.11 критерийлері, салыстырмалы жарықтылық және контраст коэффициенті.
      4. 

    4. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g — Lc мәндері.
      5. 

    5. W3C Design Tokens Community Group. Design Tokens Format Module, жоба — токен экспортындағы $type және $value құрылымы.
      6. 

    Жиі қойылатын сұрақтар
    

    Палитрадағы 50-ден 900-ге дейінгі сандар нені білдіреді?
    Бұл бір реңктің ашықтық қадамдары, оларды Material Design мен Tailwind CSS танымал етті: 50 — ең ашық тон, 900 — ең күңгірт, ал 500 не 600 әдетте фирмалық түске жақын. Сандар — өлшем емес, атау, сондықтан кез келген қадамды реттеуге болады.
    Неге реңктерді HSL-де емес, OKLCH-та құрған жөн?
    OKLCH ашықтығы қабылданатын жарықтылыққа сәйкес келеді, ал HSL ашықтығы — жоқ: HSL ашықтығы бірдей сары мен көк мүлде басқаша көрінеді және басқа контраст береді. OKLCH-тағы тең қадамдар кез келген реңкте біркелкі және ашықтағанда реңкі ауытқымайтын шкала береді.
    Ақ фондағы мәтінге палитраның қай қадамын алу керек?
    Кестеде аққа қарсы кемінде 4,5:1 беретін бірінші қадамды. Бұл генератордың палитраларында әдетте 600, өйткені қадамдар қабылданатын ашықтыққа бағынады; HSL негізіндегі палитраларда сары, лайм және көгілдір жиі 800 не одан күңгірт қадамды қажет етеді. Ірі мәтін мен иконкаларға 3:1 жеткілікті, сондықтан бір қадам ашығырағы да жарауы мүмкін.
    Неге ешбір қадам ақ пен қара мәтінмен бірдей өтпейді?
    Ақпен де, қарамен де бір мезгілде 4,5:1 алу үшін түстің салыстырмалы жарықтылығы 0,175 пен 0,183 аралығында болуы керек — бұл аралық соншалықты тар, палитра қадамдары оған іс жүзінде түспейді. Бұл қалыпты жағдай: күңгірт қадамдарда ақ мәтін, ашық қадамдарда күңгірт мәтін қолданыңыз.
    Фирмалық түсім палитрада дәл болады ма?
    Иә. Фирмалық түс ашықтығы ең сәйкес келетін қадамда немесе сіз таңдаған қадамда дәл HEX мәнін сақтайды, қалған қадамдар оның айналасында құрылады.
    Экспортты Tailwind CSS-ке қалай қосуға болады?
    Tailwind v3 үшін «Tailwind конфигі» экспортын tailwind.config.js ішіндегі theme.extend.colors бөліміне қойып, bg-brand-600 сияқты кластарды қолданыңыз. Tailwind v4 үшін CSS айнымалыларын экспорттап, @theme блогының ішінде --color-brand-600 деп атын өзгертіңіз.
    «Өнім дизайны» бөлімінде тағы
    

    Тақырып бойынша
    Түс контрастын тексеруТипографиялық шкала генераторыТултип пен турды оқу уақытыБарлық құралдар
    Әсері сандардан көрінетін турлар, тултиптер мен чек-парақтар.
    

    Clew-ды тегін байқап көруҚалай жұмыс істейдіМәңгі тегін тариф · банк картасы қажет емес
    

    Турлар, попаптар және ЖИ дәуіріндегі онбординг
    

    Қадам саны, мәтін ережелері мен метрикалары бар 7 паттерн, ЖИ нені өзгертеді және жариялау алдындағы чек-лист. PDF, 2 бет. Ішінде не бар →
    

    

    


    

    

    


    Нұсқаулық ағылшын тілінде.