Идеи на тему «Цветовые палитры» () цветовые палитры, палитра, цветовые схемы

Примеры хороший сочетаний цветов

Ниже приведены отличные примеры сочетаний цветов, данные сочетания вы можете использовать при разработке веб-сайта, приложения, а также создания интерьера.

#ffbcbc
#b7efcd
#99d8d0
#363636
#fbe6d4
#fecb89
#ffa931
#b9ac92
#336d88
#1d1b38
#e79cc2
#f6bed6
#e4f9ff
#0fabbc
#12cad6
#fa1616
#e1ffc2
#c7e2b2
#89c9b8
#092532
#ff4301
#fa7d09
#4a3f35
#2f2519
#e84a5f
#ff847c
#feceab
#99b898
#4f8a8b
#ea907a
#ffcb74
#f4f6ff
#07031a
#4f8a8b
#fbd46d
#f4f6ff
#e79c2a
#5a3d55
#3ca59d
#a2de96
#ffbd69
#f37121
#c70039
#111d5e
#fbfd8a
#87dfd6
#01a9b4
#086972
#eebb4d
#d6efc7
#96bb7c
#184d47
#9bdeac
#f7f5dd
#e2979c
#e7305b
#e36387
#f2aaaa
#a6dcef
#ddf3f5
#436f8a
#438a5e
#bac964
#f7fbe1
#f6def6
#e5cfe5
#cfe5cf
#cff6cf
#6a197d
#ffa5b0
#e0dede
#f5f5f5
#204051
#3b6978
#84a9ac
#e7dfd5
#17706e
#fb7813
#f7f7ee
#b6eb7a
#900c3f
#fc9d9d
#ffcac2
#ccafaf
#f4ebc1
#a0c1b8
#709fb0
#726a95
#e8ead3
#fbd46d
#ff9c71
#654062
#222831
#393e46
#32e0c4
#eeeeee
#10375c
#127681
#f3c623
#f4f6ff
#aacdbe
#f4f7c5
#fbc687
#ea907a
#000000
#cf7500
#f0a500
#f4f4f4
#07031a
#4f8a8b
#b1b493
#ffcb74
#bbf1c8
#80bdab
#342b38
#ff9595
#0a97b0
#4cd3c2
#f54291
#faeee7
#abc2e8
#dbc6eb
#d1eaa3
#efee9d
#35d0ba
#ffcd3c
#ff9234
#d92027
#fe8a71
#f6cd61
#3da4ab
#0e9aa7
#e84a5f
#ff847c
#feceab
#99b898
#fce8d5
#ffd3e1
#0a97b0
#1b6ca8
#ee91bc
#efb960
#edf492
#a8df65
#bb596b
#f96d80
#ff9a76
#ffc4a3
#679b9b
#aacfcf
#d291bc
#ffcbcb
#e5e5e5
#f8b24f
#ea9a96
#303960
#7c3c21
#ec823a
#f9c49a
#e8e4e1
#f17808
#e71414
#12947f
#2fc4b2
#e4e4e4
#8ccbbe
#3797a4
#fcf876
#d92027
#f37121
#f4ea8e
#5fdde5
#edf4f2
#f5a31a
#d32626
#79d70f
#562349
#ad6989
#ffa299
#fee2b3
#f1ebbb
#b5076b
#5c2a9d
#45046a
#f5a7a7
#f9d89c
#82c4c3
#bc658d
#fdcb9e
#3f3f44
#cceabb
#f7f7f7
#ee8572
#d4f3ef
#abf0e9
#63b7af
#007892
#ff427f
#fc8210
#ffd8a6
#def4f0
#74d4c0
#d9455f
#9a1f40
#ffdcb4
#c060a1
#6a097d
#00005c
#f6eedf
#f57b51
#d63447
#ffd31d
#b4f2e1
#ffe9c5
#fa9191
#eb6383
#ffe2bc
#ffb367
#ffe277
#58b4ae
#e19999
#f5a8a8
#fab7b7
#dddddd
#00a1ab
#00263b
#6f0000
#ff5200
#faf2f2
#f3e1e1
#f1d1d1
#7d5a5a
#581c0c
#ca5116
#f9b384
#f1e3cb
#e43f5a
#1b1b2f
#1f4068
#162447
#f40552
#fc7e2f
#c3edea
#f8f3eb
#6886c5
#ffacb7
#ffe0ac
#f9f9f9
#d8c593
#708160
#dd7631
#bb3b0e
#ff926b
#ffc38b
#fff3cd
#4d3e3e
#888888
#f0f0f0
#ffffff
#ffe8df
#f0daa4
#eaac9d
#b49c73
#565d47
#dae1e7
#00909e
#27496d
#142850
#06623b
#649d66
#f6d743
#f6f578
#fcbf1e
#40bad5
#035aa6
#120136
#862a5c
#f4a548
#f6d198
#7ebdb4
#26191b
#584153
#af8baf
#f6acc8
#024249
#16817a
#fa744f
#f79071
#ececec
#c1a57b
#30475e
#222831
#100303
#95389e
#43d8c9
#f7f7f7
#ea9085
#ffa372
#512b58
#2c003e
#ffecc7
#fdd998
#f5b971
#85a392
#ececec
#f2a365
#30475e
#222831
#eff3c6
#77d8d8
#4cbbb9
#0779e4
#d8345f
#e58a8a
#ccafaf
#588da8
#000000
#cf7500
#f0a500
#dbdbdb
#ff5733
#c70039
#900c3f
#511845
#8566aa
#6983aa
#8ec6c5
#f4f4f4
#ffbd69
#ff6363
#543864
#202040
#97e5ef
#fff0f5
#f8e1f4
#efa8e4
#937d14
#d2c6b2
#eae7d9
#442727
#b9ebcc
#f2a51a
#ea6227
#342ead
#dd2c00
#ff5722
#b2ebf2
#00bcd4
#b7efcd
#4cd3c2
#363636
#ffbcbc
#8db1ab
#cee397
#f2ed6f
#f4e04d
#f8eeee
#aeefec
#f78259
#eb4559
#e7d39f
#fb7b6b
#d7385e
#522d5b
#d8b9c3
#827397
#4d4c7d
#363062
#10375c
#844685
#f3c623
#faf4ff
#679b9b
#aacfcf
#fde2e2
#ffb6b6
#ffeb99
#a4c5c6
#d4ebd0
#856c8b
#5a3f11
#9c5518
#ef962d
#faf4f4
#00a8cc
#005082
#000839
#ffa41b
#698474
#ffd3b6
#fcf8f3
#ffaaa5
#ff7272
#ffb385
#fae7cb
#ffd31d
#f1e7b6
#fe346e
#400082
#00bdaa
#cae8d5
#84a9ac
#3b6978
#204051
#18b0b0
#116979
#dee3e2
#de7119
#d9bf77
#d8ebb5
#639a67
#2b580c
#f19292
#cbe2b0
#fcf7bb
#f6d186
#fbc490
#cd8d7b
#687466
#084177
#ccf0e1
#f8fab8
#f8dc88
#f76a8c
#c2f0fc
#ffffff
#ffb0cd
#ffd1bd
#231903
#7d5e2a
#9dc6a7
#d1f5d3
#be79df
#fbcffc
#ffffff
#cff1ef
#ffac41
#ff1e56
#323232
#000000
#235952
#ffc8bd
#ffebd9
#ecfbfc
#d2fafb
#fe346e
#512b58
#2c003e
#98d6ea
#bae5e5
#f5fcc1
#f3d1f4
#ffe2ff
#efb1ff
#7f78d2
#481380
#f67575
#ffa34d
#d4f8e8
#1eb2a6
#ffd868
#f8615a
#b80d57
#721b65
#f3ecb8
#f5cab3
#a8d3da
#b590ca
#790c5a
#cc0e74
#e6739f
#ffb2a7
#d1cebd
#f6eedf
#f57b51
#d63447
#424874
#a6b1e1
#dcd6f7
#f4eeff
#fafba4
#eca0b6
#a1e6e3
#d7fffd
#eab9c9
#ad62aa
#4a47a3
#413c69
#7a4d1d
#216353
#75daad
#edffea
#ffaaa5
#ffd3b6
#dcedc1
#a8e6cf
#ffa372
#ed6663
#0f4c81
#1b262c
#e8f044
#dc2ade
#323edd
#4d089a
#fff591
#a3f7bf
#05dfd7
#f35588
#f3d4d4
#fc9d9d
#ea728c
#4f3961
#9de3d0
#baf1a1
#e8f9e9
#f688bb
#e9e1cc
#ea9085
#d45079
#6e5773
#f6eec7
#ffb6b9
#f4dada
#beebe9
#cfd186
#5b8c5a
#596157
#552244
#ffbd69
#fe346e
#b21f66
#381460
#30475e
#ba6b57
#f1935c
#e7b2a5
#527318
#899857
#feb72b
#ffe75e
#8ac6d1
#ffe3ed
#fffdf9
#beebe9
#fff2e5
#ffd5ab
#eb9788
#b7472a
#512b58
#2a7886
#79bac1
#f1f3f4
#df7861
#ecb390
#ecdfc8
#fcf8e8
#50bda1
#e85f99
#f18867
#65587f
#6c567b
#c06c84
#f67280
#f8b195
#9818d6
#ff5151
#ffa41b
#ededed
#ff2e63
#ff9d9d
#ffc2c2
#010a43
#00a8cc
#0c7b93
#27496d
#142850
#29c7ac
#c02739
#84142d
#54123b
#81f5ff
#a0ffe6
#ffffdd
#ffd5e5
#88e1f2
#ffd082
#ff7c7c
#21243d
#fdba9a
#f64b3c
#c81912
#42240c
#ecce6d
#b0a160
#434e52
#5b8c85
#a9fffd
#9399ff
#ff80b0
#ffc7c7
#6f5a7e
#cd6684
#ff677d
#ffae8f
#feb377
#f7e8f0
#f1c6de
#eab0d9
#fd2eb3
#fb8d62
#fdd365
#61d4b3
#c295d8
#e4a3d4
#f1c6d3
#fce2db
#633a82
#72b5b7
#40e0d0
#f1fcfc
#ce0f3d
#ea7ad7
#dab8f3
#deddfa
#678a74
#f7c5a8
#ffeadb
#ffbaba
#ffe196
#d8b5b5
#ec7373
#05dfd7
#706c61
#e1f4f3
#ffffff
#333333
#e9b2bc
#f3dfe3
#f1f9f9
#e1f2fb
#6a8caf
#75b79e
#a7e9af
#eef9bf
#b9cced
#f6e7e6
#fbf4f9
#f6e5f5
#21bf73
#b0eacd
#f9fcfb
#fd5e53
#faafff
#bbcfff
#f0efef
#192965
#e9e2d0
#ea9085
#d45d79
#6e5773
#655c56
#94d3ac
#ccedd2
#effcef
#96d1c7
#f5c3bc
#e89da2
#c9485b
#63b7af
#347474
#35495e
#ee8572
#ff5d6c
#fbceb5
#deff8b
#8cba51
#d15a7c
#ee8972
#f7d695
#f6eec7
#f8c3af
#fea5ad
#ea9abb
#be8abf
#f5eaea
#7fcd91
#5b5656
#4d4646
#f6eec9
#fed39f
#fe8761
#af460f
#fddb3a
#d5c455
#ede59a
#f6f4e6
#ff8364
#ffb677
#5f6caf
#edf7fa
#40bfc1
#f5f0e3
#ff6f5e
#f0134d

Правило очень простое и звучит так:

60% — пространства предназначено для основного цвета / цвета области;30% — это вторичный / поддерживающий цвет;10% — акцент и сопровождающий цвет.

Можно использовать эти пропорции, чтобы найти правильный баланс при подборе и сочетании цветов, не превращая пользовательский интерфейс в красочную смесь.

Считается, что эти пропорции приятны человеческому глазу, потому что они позволяют легко воспринимать дизайн UI и общую композицию экрана.

Пример, для лучшего помимания правила «60–30–10»:

Бонусный совет:

Также можно применять цвета в другом порядке, и это все равно будет работать.

Заключение

Подводя итог всему сказанному о цветах UI, можно прийти к трем основными принципами с Material design, которые можно использовать в своей работе

Последовательность

Цвет должен применяться во всем пользовательском интерфейсе последовательно и соответствовать бренду, который он представляет.

Определенность

Цвет должен создавать различие между элементами, с достаточным контрастом между ними.

Намеренность

Цвета следует применять целенаправленно, чтобы передать смысл разными способами, например отношениями между элементами и степенями иерархии.

Найти свои белые и черные цвета.

Единственное правило здесь — это не использовать абсолютно белый или черный цвет.

Абсолютный черный цвет и белый цвет могут утомлять глаза при чтении или выполнении действий. Белый ( #FFF ) имеет 100% яркость цвета, а черный (#000) — 0%. Такая неравномерность создает интенсивный контраст, к которому человеческим глазам труднее адаптироваться при навигации и чтении.

Избегайте использование чисто черного ли белого цвета, особенно на больших площадях. Лучше всего использовать ограниченую палитру оттенков серого, которая состоит из нейтральных черных цветов с добавлением белых оттенков, например:

Определение основных цветов.

Первичный цвет — это первое с чем стоит определиться.

Основной цвет чаще всего отображается на экранах и используется, чтобы указать пользователям на основные действия пользовательского интерфейса (UI). В идеале должно быть от 1 до 3 основных цветов, которые легко ассоциируются с конкретным брендом или продуктом.

Знание своей аудитории

Ключ к хорошему UX — понимание своей аудитории.

Цвет играет здесь важную роль, так как выбор влияет на чувства и эмоции пользователя при взаимодействии с продуктом.

  • Кто ваша целевая аудитория?
  • Сколько им лет?
  • Какая специализация у вашего продукта?
  • Какие эмоции вы хотите, чтобы ваш бренд вызвал?

Эти вопросы могут и должны повлиять на выбор, поэтому не стоит терять их, выбирая палитру UI и обсуждая свой выбор с командой.

Использование семантических цветов, для выделения важной информации.

Семантические цвета — это цвета, используемые для понимания пользователя информации об успехе, ошибке, предупреждении.

Семантические цвета используют:

  • Чтобы выделить жизненно важный статус пользовательского интерфейса, положительную или предупреждающую информацию;
  • Для проверки текстовых полей или элементов управления, таких как переключатели, чекбоксы;
  • Для быстрой визуальной обратной связи, например нового сообщения в приложении.

Личные советы

От себя бы я еще добавил пару советов при создании палитры.

1. Тестируйте сразу альтернативную версию темной темы. Вам необязательно ее создавать для всего проекта. Возьмите пару экранов, сделайте темную версию и убедитесь в том, что ваша палитра сбалансирована и отлично работает как в светлом так и в темном варианте.

2. Пытайтесь, по возможности, минимизировать количество оттенков. Чем меньше цветов — тем проще будет при разработке.

3. Используйте OPACITY для оттенков. Вам не обязательно на каждый оттенок создавать отдельный цвет. Если эту функцию может выполнить «прозрачность» — используйте ее. Кроме этого, если правильно использовать прозрачность, вам и вовсе не надо будет менять цвет в светлой и темной теме. Он и там и там, будет смотреться хорошо. Добавляйте альтернативные варианты цвета с OPACITY в UI Kit, для общего понимания и удобства.

4. Дайте цвету созреть. Иногда, при создании палитры я пару дней даю ей созреть. Я создаю и сохраняю макеты и пару дней подряд открываю их с периодичностью на телефоне. Делаю это в разных сценариях: сразу после пробуждения, на солнце, ночью перед сном. Подобные действия позволяют мне определить, не является ли цвет слишком разрежающим, ярким или наоборот блеклым. Когда, я убеждаюсь в том, что мне цвет нравится во всех сценариях, то продолжаю с ним работать.

👌 Бонус: 6 полезных инструментов для работы с цветом, о которых вы могли не знать.

Перевод на русский: Komarov.Design / Алина Остапенко

. Автор: .

⚡ Если тебе понравился этот материал, ты можешь подписаться на мой / / / / . Там ты найдешь больше интересных материалов о дизайне.