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

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

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

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

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

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

Анализа боја

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

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