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

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

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

HEX

#480607

Bulgarian Rose

HEX
#480607
HSL
359, 85, 15
RGB
72, 6, 7
XYZ
3, 2, 0
CMYK
0, 92, 90, 72
LUV
13,40,7
LAB
13, 30, 17
HWB
359, 2, 72

Варијации

Целта на овој дел е точно да се произведат нијанси (додадено чисто бело) и сенки (додадено чисто црно) на избраната боја во инкременти од 10%.

Про Совет: Користи сенки за hover состојби и сенки, нијанси за акценти и позадини.

Сенки

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

Нијанси

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

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

  • Состојби на UI компоненти (hover, активен, оневозможен)
  • Создавање длабочина со сенки и акценти
  • Изградба на конзистентни системи на бои

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

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

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

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

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

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

Зошто е важно

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

Комплемент

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

#480607
Најдобро за: Дизајни со висок импакт, CTA, логоа

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

Боја и две соседни на нејзиниот комплемент, +/-30 степени на нијанса од вредноста спротивна на главната боја. Смели како директен комплемент, но пофлексибилни.

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

Тријадни

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

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

Аналогни

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

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

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

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

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

Тетрадни

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

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

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

Баланс

Користи една доминантна боја, поддржи со секундарна и акцентирај умерено.

Контраст

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

Хармонија

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

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

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

Боја на текст
Боја на позадина
Контраст
1.00
Fail
Многу лошо
Мал текст
✖︎
Голем текст
✖︎
WCAG стандарди
AA:Минимален контрастен однос од 4.5:1 за нормален текст и 3:1 за голем текст. Потребно за повеќето веб-страници.
AAA:Подобрен контрастен однос од 7:1 за нормален текст и 4.5:1 за голем текст. Препорачано за оптимална пристапност.
Недоволен контраст за сите големини на текст - не ги исполнува WCAG стандардите.

Напреден проверувач на контраст

Фино прилагодување со лизгачи, повеќе прегледи и повеќе

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

- Albert Einstein

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

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

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

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

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