Генератар і Selector de color

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

Канверсія колераў

HEX

#b400ff

Electric Violet

HEX
#b400ff
HSL
282, 100, 50
RGB
180, 0, 255
XYZ
37, 17, 96
CMYK
29, 100, 0, 0
LUV
48,51,-122
LAB
48, 88, -81
HWB
282, 0, 0

Варыяцыі

Мэта гэтага раздзела - дакладна стварыць адценні (дададзены чысты белы) і цёмныя адценні (дададзены чысты чорны) твайго выбранага колеру з крокам у 10%.

Прафесійны савет: Выкарыстоўвай цёмныя адценні для станаў навядзення і ценяў, адценні для падсветак і фонаў.

Цёмныя адценні

Цямнейшыя варыяцыі, створаныя шляхам дадання чорнага да твайго базавага колеру.

Адценні

Светлыя варыяцыі, створаныя шляхам дадання белага да твайго базавага колеру.

Агульныя выпадкі выкарыстання

  • Стан кампанентаў UI (навядзенне, актыўны, адключаны)
  • Стварэнне глыбіні з дапамогай ценяў і падсветак
  • Пабудова паслядоўных каляровых сістэм

Савет па дызайнерскай сістэме

Гэтыя варыяцыі складаюць аснову згуртаванай каляровай палітры. Экспартуй іх, каб захаваць паслядоўнасць ва ўсім праекце.

Каляровыя камбінацыі

Кожная гармонія мае свой настрой. Выкарыстоўвай гармоніі для генерацыі каляровых камбінацый, якія добра спалучаюцца.

Як выкарыстоўваць

Націсні на любы колер, каб скапіяваць яго значэнне Hex. Гэтыя камбінацыі матэматычна даказаны для стварэння візуальнай гармоніі.

Чаму гэта важна

Каляровыя гармоніі ствараюць баланс і выклікаюць пэўныя эмоцыі ў тваіх дызайнах.

Дапаўненне

Колер і яго процілегласць на каляровым коле, +180 градусаў адценка. Высокі кантраст.

#b400ff
Лепш за ўсё для: Высокаэфектыўныя дызайны, 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

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

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

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

Сімулятар каляровай слепаты

Крэатыўныя аспекты