Генератор на цветни кодове и пикери

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

Преобразуване на цветове

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
Най-добър за: Дизайн с висока степен на въздействие, CTAs, лога

Разделно-допълнителен

Един цвят и два съседни на него, +/-30 градуса оттенък от стойността, противоположна на основния цвят. Смело като прякото допълнение, но по-гъвкаво.

Най-добър за: Живи, но балансирани оформления

Триадичен

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

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

Аналогичен

Три цвята с еднаква яркост и наситеност, чиито нюанси са съседни на цветовото колело, на разстояние 30 градуса един от друг. Плавни преходи.

Най-добър за: Вдъхновени от природата, успокояващи интерфейси

Монохромен

Три цвята с един и същи оттенък със стойности на яркостта +/-50%. Фини и изтънчени.

Най-добър за: Минималистичен, изтънчен дизайн

Тетраден

Два набора от допълващи се цветове, разделени от 60 градуса на нюанса.

Най-добър за: Богати, разнообразни цветови схеми

Принципи на теорията на цветовете

Баланс

Използвайте един доминиращ цвят, подкрепете го с втори и акцентирайте пестеливо.

Контраст

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

Хармония

Цветовете трябва да работят заедно, за да създадат единно визуално изживяване.

Проверка на контраста на цветовете

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

Цвят на текста
Цвят на фона
Контраст
Fail
Малък текст
✖︎
Голям текст
✖︎
Стандарти WCAG
AA:Минимално съотношение на контраста от 4,5:1 за нормален текст и 3:1 за голям текст. Изисква се за повечето уебсайтове.
AAA:Подобрено съотношение на контраста от 7:1 за нормален текст и 4,5:1 за голям текст. Препоръчва се за оптимална достъпност.

Всеки е гений. Но ако съдите за рибата по това, че умее да се катери по дърво, тя цял живот ще вярва, че е глупава.

- Albert Einstein

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

Практически формати

Анализ на цветовете

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

Творчески аспекти