Генератор и избирач на кодови на бои

Генерирајте кодови на бои, варијации, хармонии и проверете ги соодносите на контрастот.

Конверзија на бои

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%.

Професионален совет: Користете нијанси за состојби на лебдење и сенки, а нијанси за светли делови и позадини.

Нијанси

Потемни варијации создадени со додавање црна боја на вашата основна боја.

Нијанси

Посветли варијации создадени со додавање бела боја на вашата основна боја.

Чести случаи на употреба

  • Состојби на компонентите на корисничкиот интерфејс (притисок на курсорот, активна, оневозможена)
  • Создавање длабочина со сенки и светли делови
  • Градење конзистентни системи на бои

Совет за дизајн на систем

Овие варијации ја формираат основата на кохезивна палета на бои. Експортирајте ги за да одржите конзистентност низ целиот ваш проект.

Комбинации на бои

Секоја хармонија има свое расположение. Користете хармонии за да смислите комбинации на бои што добро се вклопуваат.

Како да се користи

Кликнете на која било боја за да ја копирате нејзината хексадецимална вредност. Математички е докажано дека овие комбинации создаваат визуелна хармонија.

Зошто е важно

Хармониите на бои создаваат рамнотежа и евоцираат специфични емоции во вашите дизајни.

Комплемент

Боја и нејзината спротивна на тркалото со бои, +180 степени на нијанса. Висок контраст.

#ca4e4e
Најдобро за: Дизајни со висок ефект, повик за акција, логоа

Сплит-комплементарен

Една боја и две соседни на нејзиниот комплемент, +/-30 степени на нијанса од вредноста спротивна на главната боја. Задебелено како директно дополнување, но поразновидно.

Најдобро за: Живописни, но избалансирани распореди

Тријадичен

Три бои рамномерно распоредени по должината на тркалото на бои, секоја на растојание од 120 степени на нијанса. Најдобро е да дозволите една боја да доминира, а другите да се користат како акценти.

Најдобро за: Разиграни, енергични дизајни

Аналогно

Три бои со иста луминанса и сатурација со нијанси кои се соседни на тркалото за бои, на растојание од 30 степени една од друга. Мазни транзиции.

Најдобро за: Интерфејси инспирирани од природата, смирувачки

Монохроматски

Три бои од иста нијанса со вредности на луминанса +/-50%. Суптилно и рафинирано.

Најдобро за: Минималистички, софистицирани дизајни

Тетрадик

Два сета комплементарни бои, одделени со 60 степени на нијанса.

Најдобро за: Богати, разновидни шеми на бои

Принципи на теоријата на бои

Баланс

Користете една доминантна боја, поткрепете ја со секундарна и нагласувајте ја штедливо.

Контраст

Обезбедете доволен контраст за читливост и достапност.

Хармонија

Боите треба да работат заедно за да создадат унифицирано визуелно искуство.

Проверка на контраст на бои

Тестирајте ги комбинациите на бои за да се осигурате дека ги исполнуваат стандардите за пристапност на WCAG за читливост на текстот.

Боја на текстот
Боја на позадина
Контраст
Fail
Мал текст
✖︎
Голем текст
✖︎
WCAG стандарди
AA:Минимален сооднос на контраст од 4,5:1 за нормален текст и 3:1 за голем текст. Задолжителен за повеќето веб-страници.
AAA:Подобрен контрастен сооднос од 7:1 за нормален текст и 4,5:1 за голем текст. Препорачано за оптимална пристапност.

Сите се гениј. Но, ако судите риба според способноста да се качува на дрво, таа ќе го живее целиот живот верувајќи дека е глупава.

- Albert Einstein

Технички формати

Практични формати

Анализа на бои

Симулатор на слепило

Креативни аспекти