Негізгі мазмұнға өту

Түс Таңдағыш және Палитра Генераторы — тегін

Түстерді таңдау, HEX/RGB/HSL арасында түрлендіру және үйлесімді палиттер жасау.

Жүктелгеннен кейін офлайн жұмыс істейді
HEX
HSV
h217°
s76%
v96%
тек көрсету

RGB

r
g
b

HSL

H
S
L

Басқа форматтар

HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)

WCAG контрасты

Ең жақын атаулы түс: dodgerblue · Мұнда қара мәтінді оқу оңайырақ (5,71:1)

Ақ түсінің мәтіні3,68:1AA үлкен
Қара түсінің мәтіні5,71:1AA
#ffffff түсіндегі мәтін3,68:1AA үлкен

Реңктер мен ашықтықтар (50–950)

Түс палитрасы

Толықтыра түйе

#3b82f6
#f6af3c

Триадталық

#3b82f6
#f63c83
#83f63c

Аналогты

#3ce0f6
#3b82f6
#523cf6

Монохроматты

#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd

Жиі қолданылуы

  • Түс Таңдамасы Веб ДизайнынаСіздің веб-сайтыңыз үшін түстерді таңдаңыз және құрыңыз — HEX, RGB және HSL мәндерін және ойдағы палитраларын алыңыз.
  • Түс Таңдамасы БрендтеудіңСіздің брендінің түс палитрасын құрыңыз — негіздігінің, екіндігінің және басым түстерін таңдаңыз бір-біріне сәйкес жұмыс істейтін.
  • Түс Таңдамасы Әлеуметтік ОртасыныңӘлеуметтік орта ұтылуына, оймақтарына және профиль дизайндарына түс өндіпалитрасын құрыңыз.
  • Түс Таңдамасы Басу ДизайнынаБасылған құрамдарға түстерді таңдаңыз — парақтарға, іскерлік карталарына, брошюралярға — дәл түс өндігенінің.
  • Түс Таңдамасы ҰсынымдарынаСлайд түс сміметасын дизайнды — оқылу мәтін түстерін, графикалау палитраларын және ынамдық басым тондарын таңдаңыз.

Қалай жұмыс істейді

Барлығы толығымен браузеріңізде қолмен жазылған түрлендіру математикасы арқылы жұмыс істейді — түс кітапханасы жоқ, серверге барып-келу жоқ. Түсті браузердің нативті түс кірісі немесе EyeDropper API арқылы таңдайсыз, құрал оны алты форматқа лезде түрлендіреді, сонымен қатар WCAG контраст қатынастарын есептейді және үйлесімдік палитраларын жасайды.

  1. 1
    Нативті API арқылы түс кірісі
    Түсті браузердің кірістірілген <input type="color"> виджеті арқылы таңдайсыз, немесе — Chromium негізіндегі браузерлерде — EyeDropper API экраныңыздағы кез келген пиксельді алуға мүмкіндік береді. Екі жол да жалғыз шындық көзі болатын он алтылық жолды қайтарады.
  2. 2
    Қолмен жазылған формат түрлендірулері
    Құрал он алтылық мәнді RGB, HSL, HSV, CMYK және OKLCH-ке өз математика функциялары арқылы түрлендіреді (сыртқы кітапхана жоқ). OKLCH түрлендіруі sRGB арналарын сызықтандырады, OKLab куб-түбір матрицасын қолданады, содан кейін хрома мен реңк бұрышын шығарады — заманауи CSS Color Level 4 шығысына сай.
  3. 3
    WCAG контраст қатынасын есептеу
    Салыстырмалы жарықтылық WCAG 2.x формуласын пайдаланып сызықтандырылған RGB арналарынан есептеледі. Содан кейін құрал таза ақ пен таза қараға қарсы контраст қатынастарын есептейді және оларды WCAG шектеріне (3:1, 4.5:1, 7:1) сай AA-үлкен, AA, AAA немесе Сәтсіз деп белгілейді.
  4. 4
    Үйлесімдік палитрасын жасау және жергілікті сақтау
    Комплементарлы, триадалық, аналогтық және монохромды үлгілер HSL реңкі мен жарықтылық мәндерін математикалық түрде айналдыру немесе қадамдау арқылы алынады. Сақталған палитралар браузеріңіздегі localStorage-ке жазылады — ешнәрсе құрылғыңыздан шықпайды.

Байланысты құралдар

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