Түс коды генераторы және таңдау құралы

Түс кодтарын, вариацияларды, гармонияларды жасаңыз және контраст қатынасын тексеріңіз.

Түсті түрлендіру

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Вариациялар

Бұл бөлімнің мақсаты таңдалған түстің реңктерін (таза ақ қосылған) және реңктерді (таза қара қосылған) 10% қадаммен дәл шығару болып табылады.

Кәсіби кеңес: Меңзерді жылжыту күйлері мен көлеңкелер үшін реңктерді, бөлектеу және фон үшін реңктерді пайдаланыңыз.

Көлеңкелер

Негізгі түске қара қосу арқылы жасалған қою вариациялар.

Реңктер

Негізгі түске ақ қосу арқылы жасалған жеңілірек нұсқалар.

Жалпы пайдалану жағдайлары

  • UI құрамдас күйлері (меңзерді апару, белсенді, өшірілген)
  • Көлеңкелер мен жарықтандыру арқылы тереңдікті жасау
  • Біркелкі түс жүйелерін құру

Дизайн жүйесінің кеңесі

Бұл вариациялар үйлесімді түстер палитрасының негізін құрайды. Бүкіл жобаңызда үйлесімділікті сақтау үшін оларды экспорттаңыз.

Түс комбинациялары

Әр гармонияның өз көңіл-күйі болады. Бірге жақсы жұмыс істейтін түс комбинацияларын ойлау үшін гармонияларды пайдаланыңыз.

Қалай пайдалануға болады

Он алтылық мәнін көшіру үшін кез келген түсті басыңыз. Бұл комбинациялар көрнекі үйлесімділік туғызатыны математикалық түрде дәлелденген.

Неліктен маңызды

Түс үйлесімдері тепе-теңдік жасайды және дизайндарыңызда ерекше эмоцияларды тудырады.

Толықтауыш

Түс және түс дөңгелегіндегі оған қарама-қарсы, реңктің +180 градусы. Жоғары контраст.

#ca4e4e
Ең жақсысы: Жоғары әсерлі дизайн, CTA, логотиптер

Бөлу-толықтауыш

Түс және оның қосымшасына іргелес екі, негізгі түске қарама-қарсы мәннен +/-30 градус реңк. Тікелей толықтауыш сияқты батыл, бірақ жан-жақты.

Ең жақсысы: Жанды, бірақ теңдестірілген макеттер

Үштік

Әрқайсысы бір-бірінен 120 градус реңктен тұратын түс дөңгелегі бойымен біркелкі орналасқан үш түс. Бір түстің басым болуына мүмкіндік беріп, қалғандарын екпін ретінде қолданған дұрыс.

Ең жақсысы: Ойын, жігерлі дизайн

Аналогты

Бір-бірінен 30 градус арақашықтықта түс дөңгелегінде іргелес орналасқан реңктермен бірдей жарықтық пен қанықтылықтың үш түсі. Тегіс ауысулар.

Ең жақсысы: Табиғатпен шабыттандырылған, тыныштандыратын интерфейстер

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

Жарықтық мәндері +/-50% болатын бірдей реңктің үш түсі. Нәзік және тазартылған.

Ең жақсысы: Минималистік, күрделі дизайн

Тетрадик

60 градус реңкпен бөлінген қосымша түстердің екі жиынтығы.

Ең жақсысы: Бай, әртүрлі түс схемалары

Түс теориясының принциптері

Баланс

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

Контраст

Оқуға және қол жетімділікке жеткілікті контрастты қамтамасыз етіңіз.

Гармония

Біртұтас визуалды тәжірибе жасау үшін түстер бірге жұмыс істеуі керек.

Түс контрастын тексеру құралы

Мәтінді оқуға арналған WCAG қолжетімділік стандарттарына сәйкес келетініне көз жеткізу үшін түс комбинацияларын тексеріңіз.

Мәтін түсі
Фон түсі
Контраст
Fail
Шағын мәтін
✖︎
Үлкен мәтін
✖︎
WCAG стандарттары
AA:Кәдімгі мәтін үшін 4,5:1 және үлкен мәтін үшін 3:1 ең аз контраст қатынасы. Көптеген веб-сайттар үшін қажет.
AAA:Қалыпты мәтін үшін 7:1 және үлкен мәтін үшін 4,5:1 күшейтілген контраст қатынасы. Оңтайлы қолжетімділік үшін ұсынылады.

Барлығы гений. Бірақ егер сіз балықты ағашқа өрмелеу қабілетіне қарай бағаласаңыз, ол оны ақымақ деп санап өмір бойы өтеді.

- Albert Einstein

Техникалық форматтар

Практикалық форматтар

Түс талдауы

Соқырлық симуляторы

Шығармашылық аспектілер