Генератар і выбар каляровага кода

Генераваць каляровыя коды, варыяцыі, гармоніі і правяраць каэфіцыенты кантраснасці.

Пераўтварэнне колераў

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

Тэхнічныя фарматы

Практычныя фарматы

Аналіз колеру

Сімулятар слепаты

Творчыя аспекты