Дизайн және түс

Түс түрлендіргіші

Түстерді HEX, RGB, HSL, CMYK, LAB және OKLCH арасында түрлендіріп, контрастты тексеріп, реңктер жасаңыз.

Түс таңдау

Жүгірткілер

Пішімдер

Кез келген пішімдегі түсті кез келген өріске қойыңыз.

#2563EB≈ royalblue

Реңктер

Түсіңіздің (★) айналасында 50-ден 950-ге дейінгі шкала. Таңдау үшін реңкті басыңыз.

Үйлесімдер

Қосымша

Ұқсас

Үштік

Бөлінген қосымша

Шаршы

Монохром

Контрастты тексеру

Түсіңіздегі мәтін (немесе мәтін ретіндегі түсіңіз). WCAG 2 бойынша контраст.

Ірі мәтін

Қазақ тілі — әдемі, бай және көркем тіл

5.17: 1

Қалыпты мәтінAAAAA
Ірі мәтінAAAAA
Белгішелер мен жиектерAA

Түс соқырлығы

Түсті көру қабілеті бұзылған адамдар түс пен мәтінді қалай көреді.

Код

Жобаңызға қоюға дайын.

:root {
  --brand: #2563EB;
  --brand-rgb: 37 99 235;
  --brand-oklch: oklch(54.61% 0.2152 262.9);
}

.brand {
  color: var(--brand);
}
Қалай қолдануға болады
  1. 1Шаршыдан түс таңдаңыз, оны экраннан немесе суреттен алыңыз не кез келген пішімдегі кодты қойыңыз.
  2. 2Барлық пішімдер бірден жаңарады: HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH және ең жақын CSS түс атауы.
  3. 3RGB, HSL немесе OKLCH жүгірткілерімен реттеп, мөлдірлікті беріңіз.
  4. 4Реңктерді (50–950) және үйлесімдерді қолданыңыз, мәтін контрастын (WCAG AA/AAA) тексеріп, түс соқырлығы бар адамдар түсті қалай көретінін қараңыз.
  5. 5Пішімді немесе CSS, Tailwind, SCSS, Swift, Android, Flutter не GLSL үшін дайын кодты көшіріңіз. Сілтеме түсті сақтайды, оны жіберуге болады.
Сұрақтар мен жауаптар
Қандай пішімдерді қоюға болады?
Кез келгенін дерлік: #f60, #ff6600, #ff660080, rgb(255 102 0), rgba(255, 102, 0, 0.5), hsl(), hsv(), hwb(), cmyk(), lab(), lch(), oklab(), oklch() және «tomato» сияқты CSS атаулары. Кез келген өріске қойыңыз.
OKLCH деген не және ол не үшін керек?
OKLCH түсті адам қалай көрсе, солай ашықтық, қанықтық және реңк арқылы сипаттайды. Тек ашықтықты өзгертсеңіз, түс «сол күйі» қалады — бұл реңктер жасауға өте ыңғайлы. Қазіргі браузерлер CSS-те oklch() түсінеді.
CMYK қалай есептеледі?
RGB-ден қарапайым формуламен, принтер профилінсіз. Бұл жақсы бастама, бірақ дәл басып шығару түстері үшін баспаханадан профилін сұраңыз.
Мәтінге қандай контраст керек?
WCAG 2 қалыпты мәтін үшін кемінде 4,5:1 (AA), ірі мәтін мен белгішелер үшін 3:1 талап етеді. AAA үшін 7:1 керек. «Түзету» түймелері талапқа сай келетін ең жақын мәтін түсін табады.
Реңктер қалай жасалады?
OKLCH-та түсіңіздің айналасында, ашықтығы Tailwind-тің 50-ден 950-ге дейінгі шкаласына жақын. Түсіңіз ең лайықты сатыны алады (жұлдызшамен белгіленген).
Түс алғанда суретім жүктеле ме?
Жоқ. Сурет тікелей браузерде ашылады және құрылғыңыздан шықпайды.