Содержание

Палитра цветов html — Таблица безопасных цветов для фона сайта

Опубликовано: 08.11.2018 в категории: Полезное

Палитра цветов html в нижеприведенной таблице будет одинаково отображаться в независимо от цветовосприятия браузера, платформы или монитора, которое у всех различное.
Например, когда браузер не в состоянии правильно воспринять цвет, он пытается заменить этот цвет другим, иногда и близко непохожим на оригинал.
Все цвета являются «безопасными», то есть поддерживаются всеми браузерами. Хотя знающие люди утверждают, что все новые браузеры давно уже научились понимать все существующие цвета. Получается, что эта палитра цветов html актуальна лишь для старых браузеров.

Таблица «безопасных» цветов

255.255.204255.255.153255.255.102255.255.51255.255.0204.204.0
FFFFCCFFFF99FFFF66FFFF33FFFF00CCCC00
255. 204.102255.204.0255.204.51204.153.0204.153.51153.102.0
FFCC66FFCC00FFCC33CC9900CC9933996600
255.153.0255.153.51204.153.102204.102.0153.102.51102.51.0
FF9900FF9933CC9966CC6600996633663300
255.204.153255.153.102255.102.0204.102.51153.51.0102.0.0
FFCC99FF9966FF6600CC6633993300660000
255. 102.51204.51.0255.51.0255.0.0204.0.0153.0.0
FF6633CC3300FF3300FF0000CC0000990000
255.204.204255.153.153255.102.102255.51.51255.0.51204.0.51
FFCCCCFF9999FF6666FF3333FF0033CC0033
204.153.153204.102.102204.51.51153.51.51153.0.5151.0.0
CC9999CC6666CC3333993333990033330000
255. 102.153255.51.102255.0.102204.51.102153.102.102102.51.51
FF6699FF3366FF0066CC3366996666663333
255.153.204255.51.153255.0.153204.0.102153.51.102102.0.51
FF99CCFF3399FF0099CC0066993366660033
255.102.204255.0.204255.51.204204.102.153204.0.153153.0.102
FF66CCFF00CCFF33CCCC6699CC0099990066
255. 204.255255.153.255255.102.255255.51.255255.0.255204.51.153
FFCCFFFF99FFFF66FFFF33FFFF00FFCC3399
204.153.204204.102.204204.0.204204.51.204153.0.153
153.51.153
CC99CCCC66CCCC00CCCC33CC990099993399
204.102.255204.51.255204.0.255153.0.204153.102.153102.0.102
CC66FFCC33FFCC00FF9900CC996699660066
204.
153.255		153.51.204153.51.255153.0.255102.0.153102.51.102
CC99FF9933CC9933FF9900FF660099663366
153.102.204153.102.255102.0.204102.51.204102.51.15351.0.51
9966CC9966FF6600CC6633CC663399330033
204.204.255153.153.255102.51.255102.0.25551.0.15351.0.102
CCCCFF9999FF6633FF6600FF330099330066
153. 153.204102.102.255102.102.204102.102.15351.51.15351.51.102
9999CC6666FF6666CC666699333399333366
51.51.25551.0.25551.0.20451.51.2040.0.1530.0.102
3333FF3300FF3300CC3333CC000099000066
102.153.25551.102.2550.0.2550.0.2040.51.2040.0.51
6699FF3366FF0000FF0000CC0033CC000033
0. 102.2550.102.20451.102.2040.51.2550.51.1530.51.102
0066FF0066CC3366CC0033FF003399003366
153.204.25551.153.2550.153.255102.153.20451.102.1530.102.153
99CCFF3399FF0099FF6699CC336699006699
102.204.25551.204.2550.204.25551.153.2040.153.2040.51.51
66CCFF33CCFF00CCFF3399CC0099CC003333
153. 204.204102.204.20451.153.153102.153.1530.102.10251.102.102
99CCCC66CCCC339999669999006666336666
204.255.255153.255.255102.255.25551.255.2550.255.2550.204.204
CCFFFF99FFFF66FFFF33FFFF00FFFF00CCCC
153.255.204102.255.20451.255.2040.255.20451.204.2040.153.153
99FFCC66FFCC33FFCC00FFCC33CCCC009999
102. 204.15351.204.1530.204.15351.153.1020.153.1020.102.51
66CC9933CC9900CC99339966009966006633
102.255.15351.255.1530.255.15351.204.1020.204.1020.153.51
66FF9933FF9900FF9933CC6600CC66009933
153.255.153102.255.10251.255.1020.255.10251.153.510.102.0
99FF9966FF6633FF6600FF66339933006600
204. 255.204153.204.153102.204.102102.153.10251.102.510.51.0
CCFFCC99CC9966CC66669966336633003300
51.255.510.255.510.255.00.204.051.204.510.204.51
33FF3300FF3300FF0000CC0033CC3300CC33
102.255.0102.255.5151.255.051.204.051.153.00.153.0
66FF0066FF3333FF0033CC00339900009900
204. 255.153153.255.102102.204.0102.204.51102.153.5151.102.0
CCFF9999FF6666CC0066CC33669933336600
153.255.0153.255.51153.204.102153.204.0153.204.51102.153.0
99FF0099FF3399CC6699CC0099CC33669900
204.255.102204.255.0204.255.51204.204.153102.102.5151.51.0
CCFF66CCFF00CCFF33CCCC99666633333300
204. 204.102204.204.51153.153.102153.153.51153.153.0102.102.0
CCCC66CCCC33999966999933999900666600
255.255.255204.204.204153.153.153102.102.10251.51.510.0.0
FFFFFFCCCCCC999999666666333333000000

 

Как пользоваться палитрой цветов html

В таблице представлены 36 сочетаний составленных из шести оттенков трех основных цветов красного, зеленого и синего.
Над каждым цветом указаны два значения.
RGB — для создания цвета в графическом редакторе.
HEX — для обозначения палитры цвета HTML.
Прописывая цвет html в таблице стилей css, не забывайте ставить «#» перед обозначением цвета.

<p>Красный текст</p>

Красный текст

Читайте так-же как выровнять элементы с помощью display flex css
Всем удачи!

Таблица безопасных цветов – Дизайн та розробка сайту

Думаю, Вы знаете, что цветов очень много, и все могут быть использованы веб-мастерами. При верстке используют палитру в формате HEX или RGB. Любой из этих форматов способен вывести в html любой цвет, но иногда бывает такое, что браузер не увидит какой-то цвет и автоматически подберет ближайший безопасный.

Если Вы хотите, чтобы такое не случилось с посетителями Вашего сайта, то можете использовать цвета из таблицы ниже. HEX цвета выглядят как 6 цифр или букв перед которыми стоит Знак решетки, например — #ff3300 — оранжевый цвет. RGB — это три числа, разделенные точками. Каждое число это степень заливки трех основных цветов — Red, Green, Blue(красный, зеленый, синий). Например, тот же оранжевый будет иметь такой вот код — 255.51.0.

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

В общем пользуйтесь и радуйтесь :).

255.255.204255.255.153255.255.102255.255.51255.255.0204.204.0
FFFFCCFFFF99FFFF66FFFF33FFFF00CCCC00
      
255. 204.102255.204.0255.204.51204.153.0204.153.51153.102.0
FFCC66FFCC00FFCC33CC9900CC9933996600
      
255.153.0255.153.51204.153.102204.102.0153.102.51102.51.0
FF9900FF9933CC9966CC6600996633663300
      
255.204.153255.153.102255. 102.0204.102.51153.51.0102.0.0
FFCC99FF9966FF6600CC6633993300660000
      
255.102.51204.51.0255.51.0255.0.0204.0.0153.0.0
FF6633CC3300FF3300FF0000CC0000990000
      
255.204.204255.153.153255.102.102255.51.51255.0.51204. 0.51
FFCCCCFF9999FF6666FF3333FF0033CC0033
      
204.153.153204.102.102204.51.51153.51.51153.0.5151.0.0
CC9999CC6666CC3333993333990033330000
      
255.102.153255.51.102255.0.102204.51.102153.102.102102.51.51
FF6699FF3366FF0066CC3366996666663333
      
255. 153.204255.51.153255.0.153204.0.102153.51.102102.0.51
FF99CCFF3399FF0099CC0066993366660033
      
255.102.204255.0.204255.51.204204.102.153204.0.153153.0.102
FF66CCFF00CCFF33CCCC6699CC0099990066
      
255.204.255255.153.255255. 102.255255.51.255255.0.255204.51.153
FFCCFFFF99FFFF66FFFF33FFFF00FFCC3399
      
204.153.204204.102.204204.0.204204.51.204153.0.153153.51.153
CC99CCCC66CCCC00CCCC33CC990099993399
      
204.102.255204.51.255204.0.255153.0.204153. 102.153102.0.102
CC66FFCC33FFCC00FF9900CC996699660066
      
204.153.255153.51.204153.51.255153.0.255102.0.153102.51.102
CC99FF9933CC9933FF9900FF660099663366
      
153.102.204153.102.255102.0.204102.51.204102.51.15351.0.51
9966CC9966FF6600CC6633CC663399330033
      
204. 204.255153.153.255102.51.255102.0.25551.0.15351.0.102
CCCCFF9999FF6633FF6600FF330099330066
      
153.153.204102.102.255102.102.204102.102.15351.51.15351.51.102
9999CC6666FF6666CC666699333399333366
      
51.51.25551.0.25551. 0.20451.51.2040.0.1530.0.102
3333FF3300FF3300CC3333CC000099000066
      
102.153.25551.102.2550.0.2550.0.2040.51.2040.0.51
6699FF3366FF0000FF0000CC0033CC000033
      
0.102.2550.102.20451.102.2040.51.2550.51.1530. 51.102
0066FF0066CC3366CC0033FF003399003366
      
153.204.25551.153.2550.153.255102.153.20451.102.1530.102.153
99CCFF3399FF0099FF6699CC336699006699
      
102.204.25551.204.2550.204.25551.153.2040.153.2040.51.51
66CCFF33CCFF00CCFF3399CC0099CC003333
      
153. 204.204102.204.20451.153.153102.153.1530.102.10251.102.102
99CCCC66CCCC339999669999006666336666
      
204.255.255153.255.255102.255.25551.255.2550.255.2550.204.204
CCFFFF99FFFF66FFFF33FFFF00FFFF00CCCC
      
153.255.204102.255.20451. 255.2040.255.20451.204.2040.153.153
99FFCC66FFCC33FFCC00FFCC33CCCC009999
      
102.204.15351.204.1530.204.15351.153.1020.153.1020.102.51
66CC9933CC9900CC99339966009966006633
      
102.255.15351.255.1530.255.15351.204.1020. 204.1020.153.51
66FF9933FF9900FF9933CC6600CC66009933
      
153.255.153102.255.10251.255.1020.255.10251.153.510.102.0
99FF9966FF6633FF6600FF66339933006600
      
204.255.204153.204.153102.204.102102.153.10251.102.510.51.0
CCFFCC99CC9966CC66669966336633003300
      
51. 255.510.255.510.255.00.204.051.204.510.204.51
33FF3300FF3300FF0000CC0033CC3300CC33
      
102.255.0102.255.5151.255.051.204.051.153.00.153.0
66FF0066FF3333FF0033CC00339900009900
      
204.255.153153.255.102102.204.0102. 204.51102.153.5151.102.0
CCFF9999FF6666CC0066CC33669933336600
      
153.255.0153.255.51153.204.102153.204.0153.204.51102.153.0
99FF0099FF3399CC6699CC0099CC33669900
      
204.255.102204.255.0204.255.51204.204.153102.102.5151. 51.0
CCFF66CCFF00CCFF33CCCC99666633333300
      
204.204.102204.204.51153.153.102153.153.51153.153.0102.102.0
CCCC66CCCC33999966999933999900666600
      
255.255.255204.204.204153.153.153102.102.10251.51.510.0.0
FFFFFFCCCCCC999999666666333333000000
      

На этом все, спасибо за внимание. 🙂

50 красивых цветовых схем и шестнадцатеричных кодов CSS 2023

Веб-дизайн

Веб-дизайн может быть интересным! Особенно, когда у вас есть правильная цветовая гамма. Вот почему мы отобрали лучшие из 50 лучших эпических цветовых схем из дальних уголков…

Приблизительное время прочтения:   19 минут

Поделиться: 

Веб-дизайн может быть интересным!

Особенно, когда у вас есть правильная цветовая схема.

Вот почему мы выбрали 9 лучших из лучших.0012 50 эпических цветовых схем из дальних уголков Dribbble, Awwwards, Pinterest, Behance и парочки замечательных блогов.

После того, как вы закончите поиск цветовой палитры вашей мечты , ознакомьтесь с нашими статьями «Основы аналитики», «Основы SEO» и «Современные шрифты», чтобы продолжить делать свой веб-сайт потрясающим. И, конечно же, дайте нам знать, если мы когда-нибудь сможем помочь вам с нашими услугами по разработке веб-сайтов для малого бизнеса!

Один из самых крутых инструментов цветовой палитры Design, которые я видел в 2022 году — Happy Hues!

Содержание

13 новых цветовых схем веб-сайта на 2023 год

1. Минимальные цвета, Soft Beach by Duminda Perera

Ярко-синий: #5 1e2f5

Синий Зеленый: #9df9ef

Пыльно-белый: #edf756

Розовый песок: #ffa8B6

Темный песок: #a28089

да Перера

Ice Cold: #a0d2eb

Freeze Purple: #e5eaf5

Medium Purple: #d0bdf4

Purple Pain: #8458B3

Насыщенный фиолетовый: #a28089

3. Яркая сила Думинда Перера

Королева Ясс: #ff1d58

Сестра Сестра: #f75990

Корона Желтая: #fff685

Синий свет: #00DDFF

Brutal Blue: #0049B7

4.

Переосмыслить. Цветовая схема Sajon

Ярко-оранжевый: #ff1e00

Тускло-синий: #e8f9fd

Предупреждение/Выделение Зеленый: # 59ce8f

5. Цветовые схемы глобального благотворительного веб-сайта от Cuberto

Ярко-оранжевый номер 2: #f43a09

Дедушка Оранжевый: #ffb766

Серо-синий Зеленый: #c2edda

Live Green: #68d388

6. Цветовые схемы веб-сайта Banking and Finance от Juliene Renvoy y:

#5cbdb9

Тини Грини: #ebf6f5

7. Насыщенно-зеленый, синий и красный цвета

Ярко-зеленый: #beef00

Electric Red: #ff0028

Deep Green: 900 13 #657a00

Синяя сила: #1400c6

8. Белое пространство, коричневый, фиолетовый, желтый цвет схемы веб-сайта

Загар фона: #fceed1

Purple-y: #7d3cff 9000 3

Желтые перчатки: #f2d53c

Рыжий: #c80e13

9.

Темно-синий с подпалом – цветовая палитра

Песочный загар: #e1b382

Песочный загар Тень: #c8 9666

Ночная синяя: #2d545e

Night Blue Shadow: #12343b

10. Цветовая гамма рыжевато-коричневого, розового и красного цветов

Ragin Beige: #fff5d7

Coral Pink: #ff5e6c

Желтый Слейт: #feb300

Pink Leaf: #ffaaab

11. Розовая, зеленая и фиолетовая цветовая схема веб-дизайна иллюстрации

Grassy Green: #9bc400

Purple Mountains Величество: #8076a3

Misty Mountain Pink: #f9c5bd

Factory Stone Purple: #7c677f

12. Яркий и красочный — схема на 2020 год

Зеленая линия деревьев: #478559

Фиолетовая базовая линия: # 161748

Розовый блик: #f95d9b

Блууотер бледный: #39a0ca

13.

Желтый, красный/розовый/оранжевый – яркая схема

9000 3

Желтый фон: #ffde22

Розовый / красный круг: #ff414e

Оранжевый кружок: #ff8928

Белый отложенный заказ: #ffffff

9003 3 Цветовые схемы веб-сайта 2019 года:

1. Вдохновение 70-х — современная цветовая палитра

Mountain Shadow Blue: #101357

Old Makeup Pink: #fea49f

Goldenrod Yellow: #fbaf08

Голубой колокольчик : #00a0a0

Bold 2019 Green: #007f4f

2. Lightning Blue Purple – Simple Web Color Palette

Lightning Blue: #51d0de

Пурпурная молния: #bf4aa8

Белая морщинка мозга: # d9d9d9

3. Синий металлик, фиолетовый, красный – Цветовая палитра веб-сайта

Blue Popsicle: #0f2862

Redline: #9e363a

Фиолетовая тень: #091f36

Серо-голубой лист: #4f5f76

4.

Абрикосовая лавина – Цветовые схемы веб-дизайна

Черника: #6B7A8F

90 002 Абрикос: #F7882F

Цитрус: #F7C331

Apple Core: #DCC7AA

5. Сильный контраст и надежность

Левый синий: #1561ad

Правый синий — приглушенный: #1c7 7ac

Сине-зеленый: #1dbab4

Красно-оранжевый: #fc5226

6. Цветовая палитра Classic Red Gold Website

Краснее, чем вы: #ff3a22

Goldi-lots: #c7af6b

Темное золото : #a4893d

Серебряный язык: #628078

7. Нежная и сочная цветовая схема паутины

Бледно-зеленый: #acb7 ae

Коричневые рубашки: #82716e

Tan Blonde: #e4decd

Blondey: #c2b490

8.

Фотографическая память

Green Mountain: #3d7c4 7

Голубая гора: #09868b

Голубой фон: #76c1d4

Бледно-серый край: #f7f7f7

9. Futuristic Lightbrite

Серо-серебристый: #bccbde

Синий световой меч: #c2dde6

Фиолетовый: #431c5d

Оранжевый: #e05915

Желто-коричневый: #cdd422

10. Ловец-хранитель Красный и фиолетовый 9003 6

Болезненный красный: #eb1736

35 лет Фиолетовый : #5252d4

Светло-фиолетовый градиент: #7575dd

Shadow Purple Red: #781a44

11. Сэндвич с пасхальным яйцом

Зеленый: #8bf0ba

Ironic Blues: #0e0fed

Blue Underling: #94f0f1

Pinky Ring: #f2b1d8

Яичные желтки: #ffdc6a

Ищете опытную команду веб-дизайнеров? Ниши веб-дизайна, которые мы обслуживаем: Сантехника, HVAC, юридическая фирма, финансовые услуги, строительство, медицина. Некоторые города, в которых мы обслуживаем клиентов: Чикаго, Нью-Йорк, Детройт, Даллас, Цинциннати.

Оригинальный набор цветовых схем сайта:

1. Интеллектуальная беззаботность

Голубо-зеленый: #6ed3cf

Мягкий фиолетовый: #9068be

9001 2 Tasty Eighties Grey: #e1e8f0

Насыщенный красный: #e62739

Найдено в цветовых палитрах Trendy Web от Awwwards

2. Extra Snug

French Laundry Blue: #3a4660

Comfortable Tan: #c9af98 9000 3

Персиковый крем: 9

3. Dark Horse 12 Ты желтый?!:

#feda6a

Серебряная лисица: #d4d4dc

Deep Matte Grey: #393f4d

Dark Slate: #1d1e22

Found on Vintage Rides Concept от Creativa Studio на Dribbble

9003 5 4. Сонные зеленые полосы

Simpler Lime Green: #7dce94

Dark Grey с потертостями: #3d3d3f

Vanilla Grey: #f6f5f3

Беловатый 90 013 : #f9f8fd

Найдено на веб-сайте The Jungle Book автором Watson D/G для Disney

5.

Драгоценные металлы

Розовое золото: #bd8c7d

Мягкое золото: #d1bfa7

Серебро: #8e8e90

Onyx:  #49494b

Найдено на KAE Branding от Socio Design

6. Европейские тела

Желтая рука: #fbf579

Lonely Blue: #005995

Станция ary Pink Red: #fa625f

Purpled:  #600473

Найдено на веб-сайте Inspiration by Mind Sparkle Mag

7. Простые яркие акценты

Красное наложение: #cd5554

На фото коричневый: #91684a

Зеленые водоросли: #00c07f

Синий цвет наследия:  #313d4b

Найдено на веб-сайте Inspiration by Mind Sparkle Mag

Все еще хотите большего? Посмотрите удивительные вещи в журнале Mind Spark Mag и просмотрите удивительные примеры. Такая великолепная подборка современного, часто вдохновленного швейцарцами веб-дизайна.

Часть вторая. Наблюдения за взаимодействием и цветом в контексте

Элементы цвета важны не только в том, как они сочетаются с другими дополнительными оттенками, но также в количестве и размещении по отношению к этим другим цветам и в том, как они связаны к другим рисункам и фотографическим элементам рядом с ним и в других местах на веб-сайте. В этом разделе я буду делиться / курировать веб-сайты с красивыми цветовыми схемами, шестнадцатеричными кодами и просто кратким примечанием о том, почему используемый цвет работает в контексте.

8. Сине-красный

Темно-красный: #b11a21 – В наложении на плоском синем фоне фотографический фон придает глубину.

Светло-красный: #e0474c – Улыбающееся лицо, просвечивающее сквозь красный цвет, делает его поразительным.

Blue Beans: #7acfd6 — плоский синий контрастирует с фотографией за красным.

Светло-классный серый:  #f1f0ee — простой светло-серый цвет используется для придания глубины более позднему фрагменту фотографии, а белый — под ним.

Найдено на веб-сайте Inspiration by Mind Sparkle Mag

9. Солнечно и спокойно

Утреннее небо: #CAE4DB — Никогда не недооценивайте цветовую палитру, созданную с помощью фотографии, чтобы задать тон вашему дизайну.

Honey: #DCAE1D — В этом случае палитра устанавливается вместе с фотографией и потом вторит в подзаголовок.

Cerulean: #00303F — Cerulean невероятно стильный вариант черного или темно-серого цвета, если использовать его постоянно.

Туман:  #7A9D96 – Этот чистый, естественный цвет показан на фотографии, но его можно использовать и на нижнем блоке полной ширины или на кнопках.

Найдено на веб-сайте Inspiring Color Schemes от Canva

9. Темно-оранжевый

Темно-серый: #393939. Темный дизайн требует немного больше продуманности, но при правильном использовании может обеспечить много контраста.

Темно-оранжевый: #FF5A09 – Различные оттенки апельсина создают глубину и градиент, не заходя на совершенно новые цвета.

Светло-оранжевый: #ec7f37 — Использование иллюстративных элементов требует некоторой гибкости для естественной светлоты и темноты для контурирования объектов.

Оранжево-желтый:  #be4f0c. Использование цвета на цветовом круге может сделать палитру стильной, смелой и сдержанной.

Найден в великолепных цветовых схемах с помощью одного дополнительного пикселя

10. Скрипучий

Свежий: #4ABDAC — еще раз цвет, наложенный на фотографические элементы, придает стильный современный вид

Vermillion: #FC4A1A — Фигура на переднем плане вписана в контекст, при этом обращая внимание на то, как она дополняет общую структуру дизайна. На самом деле, можно даже предположить, что дизайн был ниже этой цифры.

Солнечный свет: #F7B733 — желтый служит только призывом к действию и выделяет важные части в этих резких выстрелах в голову.

Найдено на веб-сайте Inspiring Color Schemes от Canva

11. Базовый сине-зеленый

Старый надежный синий: #368cbf. Синий заслуживает доверия в психологии цвета, но убедитесь, что это оттенок со вкусом, как некоторые блюз слишком из коробки. Как и говорил мой учитель рисования с красками, вы всегда должны смешивать их перед нанесением на холст, иначе вы получите что-то похожее на то, что вы только что налили краски из коробки.

Акцентный зеленый цвет: #7ebc59– Корпоративный синий + Экологичный зеленый = Каждый веб-сайт. Но не забывайте об использовании общих цветовых схем только потому, что они распространены. Используйте знакомые цвета вместе, когда это помогает вам чувствовать себя заслуживающим доверия.

Dark Slate: #33363b — Разбивка пустого пространства более темным заголовком, нижним колонтитулом или полноразмерными разделами избавляет от слишком повторяющихся вещей.

Светло-серый: #eaeaea — это одна из самых распространенных цветовых схем на веб-сайте, особенно для технологических компаний. Вам это еще не надоело? Мне это нравится.

Найдено на бесплатных потрясающих темах WordPress от ColorLib

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

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

Эта концепция и тон также присутствуют на веб-сайтах, где используется только один цвет и различные оттенки этого цвета, что позволяет глазам отдохнуть и насладиться всем синим, зеленым или тремя оттенками фиолетового. Я также включу несколько монохромных + 1 цветовых схем , которые означают черный, белый, любые оттенки серого плюс еще один цвет, и он затенен. В каждом из этих сценариев действуют одни и те же общие принципы. Удалив все остальные цвета, за исключением нескольких избранных, вы можете улучшить совместную игру нескольких оставшихся цветов и усилить драматическое напряжение веб-сайта — если это сделано хорошо.

В конце концов, если вы ставите перед собой такую ​​цель, дизайн веб-сайта сам по себе не продаст больше товаров. Объедините эти высококачественные стили с поисковой оптимизацией, чтобы получить больше потенциальных клиентов.

12. Старк Контраст

Грифель: #262626 – Повторяйте за мной, все оттенки серого не равны

Подержанный серый: #3f3f3f 

Беловатый: #f5f5f5 – Повторяйте за мной, все белые не равны

Светло-серый:  #dcdcdc

Found on One Page Love, создано Питером Тотом. 03

Найдено в книге веб-дизайна — 20 красивых портфолио , Работа Михаэля Шмида

14. Goldifox

Золотая пшеница: #a39274

Мягкая пшеница : #dfd8c8

9 0012 Темно-серый: #252523

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

15. Обновленный Minty

Новый: #4cb69f

Touch of Grey: #f5f5f5

Темно-фиолетовый: #201d3a – Не совсем Ч/Б+1 – Пурпурный оттенок в углу фотография

Найдено в Dapper Ink Джоэлом Ридом на Dribbble

16.

Синий + белый

Optimism Blue: #269ccc

Синие водоросли: #9ed2c5

Flat Grey: #7b7b7b

Найдено на fltdsgn.com

И еще пара веб-сайтов в оттенках серого, чтобы было совершенно ясно, что оттенки серого могут быть очень красивыми.

16. Экспериментальная простая фотография — квадратные разделения

Найдено на InspirationDE by Sam Thies

17. Плавающий объект, разделение угловых секций, простая редакционная типографика

Найдено на сайте flatdsgn.com Роланда и «Мы Не пластик’

18. Прямоугольник вокруг букв, креативный блок букв

Найдено на Behance, by Diana Polar

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

Часть четвертая – О взаимодействии типографики и цвета

Типографика, цвет, макет. Ни один из этих элементов не стоит отдельно ни в одной композиции, и разговор об одном без другого оставляет неполную картину. Всегда обращайте внимание на то, как характер вашей цветовой схемы веб-дизайна сочетается с вашими типографскими элементами. Шрифты должны выбираться вручную по их атрибутам, а не случайным образом.

19. Угольно-черный, золотой и много белого

Золотой верх: #d8ab4e

Золотой низ: #b48c36

Темно-серый: #040404

19Б. Сочетания шрифтов, дополняющие выбранные цвета — Gin Rough и Amiri

Gin Rough — от Fort Foundry, доступны на MyFonts — взяв высококачественный золотой градиент и соединив его с типографскими элементами очень преднамеренной формы, дизайнеры этого шрифта сайт сочетал в себе строгость и элегантность.

Amiri Rough – Доступен через Google Fonts – Великолепно выглядит в качестве отзыва или цитаты.

Найдено на сайте Web Design Inspiration for Gentlemen Barber Clubs (вам нужно увидеть сайт полностью) 3

Чистый темно-серый: #2e3830

Хаки: #e6dbc9

20B. Сочетание шрифтов, дополняющее выбор цвета — Futura Bold и Museo Slab

Futura Bold — классика и простота. Обычные похожие шрифты, такие как Gotham Black, Montserrat или Proxima Nova, могут дать вам похожий, но другой вкус. Тем не менее, шрифт Futura Bold будет полезен во многих ситуациях и хорошо сочетается с этой простой красной, серой и коричневой цветовой схемой в качестве заголовков в верхнем регистре.

Museo Slab – как вес 100 в цитате выше, так и текст абзаца (начертание шрифта: 400), Museo Slab обеспечивает удобочитаемость, будь то большой или маленький. Futura, Museo Slab поверх этих удобных простых цветов кажутся не обязательно классическими, но современными и оригинальными. Сдержанность как в выборе цвета, так и в типографике приводит к очень сплоченному ощущению, благодаря которому весь веб-сайт кажется интегрированным и фирменным.

21. Модные современные пастельные тона

Пастельно-персиковый: #dea6af

Небесно-голубой: #8c bcd0

Пастельно-розовый: #e6dbc9

21B. Сочетание шрифтов, дополняющее цвет Выбор – Калибр – Европейский дизайн Ketchup

Калибр  – Мне нравится внешний вид, который многие современные европейские веб-сайты получают с помощью этого зрелого, швейцарского шрифта. Он найдет гораздо больше применения в Америке, прежде чем он станет слишком популярным здесь. Приведенное ниже приложение без излишеств демонстрирует уверенность, с которой его используют многие европейские дизайнеры. Безупречно сыграно.

Дизайн, представленный на конкурсе CSS Design Awards — Купить шрифт Calibre

Независимо от того, какие цвета вы используете, ваш веб-сайт будет лучше, если на нем будет использован один или два очень хорошо продуманных шрифта. Поиск баланса между цветом и шрифтом не обязательно научен — он требует определенной поэтической ассоциации, но это не значит, что он полностью субъективен. Цвета могут быть либо диаметрально противоположными индивидуальности/личностям шрифта(ов), либо находиться в прямом соответствии с ними.

Несколько слов ободрения

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

Самое главное, чтобы ваши дизайны служили цели, для которой они предназначены — что они действуют . Потратив некоторое время на запуск проектов с цветовой схемой, отвечающей эмоциональным потребностям основной демографической группы, вы настраиваете их на успех. На самом базовом уровне это означает, что веб-сайты для мужчин не должны быть фиолетовыми, так как статистически это их наименее предпочтительный цвет. Вы также не хотели бы делать медицинский веб-сайт черным, поскольку он ассоциируется со смертью, или давать очень легкую и воздушную желтую цветовую схему для серьезной темы, чтобы это не намекало на легкомыслие.

В самом остром смысле намерение в цветовой схеме веб-дизайна означает передачу голоса бренда, эмоциональной привлекательности,  иногда быть открытым для вещей, ранее изученных другими (зеленый для экологического проекта, синий для технологического проекта, красный для спорт и агрессия) и следовать своим инстинктам, погружаясь с головой в то, что действительно подходит для этого конкретного рынка. Величайшие дизайнеры тоже гадали и пробовали что-то новое. Присоединяйтесь, впитайте то, что уже есть на конкретном рынке, на котором представлен продукт или услуга. Затем посмотрите на наиболее визуально привлекательные и эффективные проекты на всех рынках и попробуйте свои силы. После того, как вы попробуете некоторые предварительно смешанные шестнадцатеричные цветовые схемы, перечисленные выше или где-либо еще, — смешайте свои собственные.

[bctt tweet=»«Величайшие дизайнеры тоже гадали и попытались создать что-то новое».»]

Признайте свои скрытые способности, доверьтесь своим творческим инстинктам и не бойтесь марать руки.

Часть пятая – Что такое современная цветовая палитра?

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

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

22. Цветовая палитра Sleek Modern

Темно-синий/фиолетовый: #111c30

Темно-розовый Макияж: #9a4d55 9000 3

Comfortable Couch Beige: #80756b

23. Приглушенный модерн Цветовая палитра

Tiny Sweet Blue: #b5e9e9

Creamy Light Tan: #fef6dd

Pinkie Pie: #ffe1d0

Yellow Horse: 9 0013 #fff1b5

Зеленый значок: #dcf3d0

24. Свежая современная цветовая палитра

Deep Purple: #1d1145

Trapper Keeper Green: #0db4b9

Pink Boot: # f2a1a1

Современный розовый рюкзак: #e76d89

25. Земная современная цветовая палитра

Красные ветки:  #de493c

Зеленые деревья: #608074

Blue/Green Mist: #daefd9

26.

Ржавая современная цветовая палитра

Темно-ржавый красный:  #c1432e

Серебряный головной убор: #4b6777

Ржавое золото: #ce9e62

9 0002 Черный для контраста: #2c2c2c

5 лучших цветовых схем веб-сайта Генераторы для начала работы

Очевидно, что есть из чего выбрать, когда дело доходит до цветов, которые вы выбираете для своего веб-сайта. К счастью для вас, несколько отличных онлайн-генераторов цветовых схем могут помочь вам найти идеальный вариант для вас.

Цвета плоского пользовательского интерфейса 

С помощью простой функции копирования одним нажатием вы можете вставлять шестнадцатеричные коды в существующие цветовые схемы, которые у них уже есть.

Color Supply 

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

Кулеры

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

Генератор палитр

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

Paletton 

Еще один инструмент, позволяющий настраивать цвета с широкими возможностями настройки; Paletton — отличное приложение для расширения вашего репертуара цветовых схем.

62 процента опрошенных предприятий заявили, что считают, что дизайн веб-сайта следует обновлять каждые 2-3 года!  Источник: Hook Agency

Часто задаваемые вопросы о цветовых схемах веб-сайтов

Какой цвет лучше всего подходит для веб-сайта?

Синий, безусловно, самый безопасный выбор, так как наибольшее количество людей считают его фаворитом (35%). Однако ясно, что если все ваши конкуренты используют синий цвет, может иметь смысл «дифференцировать» ваше предложение и бренд. Цвета вашего бренда должны быть привлекательными, и «белое пространство» является важной частью этого. Убедитесь, что вы оставляете место для элементов, которые вы включаете, имеете контраст между текстом и фоном и не перегружаете посетителя — пытаясь быть слишком ярким или новым только ради новизны.

Сколько цветов должно быть на сайте?

Учтите, что 51% брендов выбирают монохромные логотипы, 39% используют двухцветные, и только 19% компаний выбирают полноцветные логотипы. Помимо фотографий, 1-, 2- и 3-цветные веб-сайты, кажется, легче сделать хорошо, чем пытаться сделать веб-сайт с радугой цветов. При этом если у вас есть профессиональный дизайнер, Microsoft и Google, очевидно, считают, что работать с большим количеством цветов полезно, так как они используют как минимум 4 сплошных цвета в своем дизайне.

Почему мне стоит подумать о найме профессионального дизайнера веб-сайтов?

Выбрать цветовую схему сложно, но в дизайне веб-сайта есть гораздо более сложные проблемы, которые могут выиграть от помощи опытного дизайнера. Профессиональные веб-дизайнеры перепробовали сотни способов и поняли, какие методы работают, а какие нет. В идеале, если вы работаете с такой командой, как Hook Agency, они также проводят A/B-тестирование веб-сайтов, вносят изменения на основе аналитики и знают, как сделать ваш сайт легко найти в Google.

Вы открыли секретный люк во внутреннюю работу Интернета! 😉

Мы знаем, как делать удивительные вещи, такие как это очень классное дополнение FAQ к нашему списку здесь, в Google. Мы знаем, как управлять вашим веб-сайтом в Google с помощью практики, называемой «Поисковая оптимизация», поэтому, помимо цветовых схем веб-сайта, мы знаем, как ПРИВЛЕЧАТЬ БИЗНЕС с помощью трафика Google. Если вы хотите работать с профессиональной командой веб-дизайнеров, отправьте нам сообщение по адресу [email protected]!

Еще одна тактика, которую мы используем для оптимизации ранжирования, — это нечто, называемое взаимосвязью. Так что, если вы когда-нибудь задавались вопросом, кто самый сексуальный мужчина в Миннесоте, или хотели прочитать руководство по поисковой оптимизации для сантехников, прочтите их!

VisiBone Web Design Color References

Эти каталоги цветов помогут вам сделать наиболее осознанный выбор при разработке веб-сайтов.

«Это будет
стать в-
незаменим!»
Анжела Л.

«У него
помог мне
безмерно.»
Кэролин А.

«Это не
только визуально
привлекательный
но составляет
это так просто
найти всего
право
цветов.»
Нэнси С.


VisiBone Color
Карточка, ISBN
096782639X


В каждом продукте: Все 216 стандартных цветов сгруппированы по оттенку. Трогательные цветовые чипы имеют одинаковый оттенок . Шестнадцатеричный код цвета HTML и десятичный код цвета RGB показаны на каждой цветовой пластине. Для наиболее точного соответствия цветам экрана компьютера использовался специальный 8-цветный процесс печати .

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Цвет
Плакат
18 x 24 дюйма

Оригинал цвет-
расположение колес,
симметричное по оттенку
каждая серия затенения
по прямой линии
ДОБАВИТЬ В КОРЗИНУ
15 $

КРУПНЫЙ ПЛАН…

«…потрясающе
произведение ИСКУССТВА.» 
Дил С.

«
веб-мастера постер первый
один я видел
это действительно составляет
смысл всего этого
безумие!»
Марк П.

«…использовать почти
ежедневно»
Шелли Г.

«… лучшая сеть
эталонный инструмент I
нужно на сегодняшний день.»
Джейсон Б.


VisiBone Color
Плакат, ISBN
0967826306

 Цвет
Карта
18 x 24 дюйма

Самый большой цвет,
самая большая печать
макет образцов,
цветовая слепота
ссылка
ДОБАВИТЬ В КОРЗИНУ
15 $

КРУПНЫЙ ПЛАН…


«Не только
диаграмма
скрасить
стены моего
офис его
содержание составляет
за отличный
быстро
ссылка.»
Пат Г.

«Они очень
привлекательный и
полезно и
всегда получай
комментарии
из
редакторы и
художники-графики».
Susan B.


VisiBone Color
Диаграмма, ISBN
0967826322

 Цвет 
Таблица килограммов
18 x 24 дюйма

«Небезопасный»
цветовая схема!
1068 коды
(только десятичные числа,
подробнее)
много пастельных тонов и
земля оттенки
для паутины и
графический дизайн
ДОБАВИТЬ В КОРЗИНУ
15 $

КРУПНЫЙ ПЛАН. ..

«Это отличный
график и я буду
получить много
использовать из него.
Дэниел Дж.

«Это
самый красивый
ТАБЛИЦА ЦВЕТОВ
У меня когда-либо было
ВИДИМЫЙ!!!!
я уже
играть с ним
но в основном я
рассматриваю
обрамление!»
Лесли Д.

Мы (один раз
снова) поражен
качество
визибоне
товары!
Джон Б.

Цвет
Подушка
8,1 x 8,1 дюйма

квадратный
коврик для мыши
,
образцы
макет
ДОБАВИТЬ В КОРЗИНУ
15 $

КРУПНЫЙ ПЛАН…


«…всего
что я
и мой
визуально-
ориентированный
совместная работа
керс
нужно.»
Марка
К.

«выглядит
отлично!»
Чат
К.

«трепет-
немного!»
L@rrry

Цвет
Шестиугольник
8,1 x 9,4 дюйма

шестигранник
мышь
коврик

ДОБАВИТЬ В КОРЗИНУ
15 $

КРУПНЫЙ ПЛАН. ..


«…подарок
для веб-
мастер,
а он
был должным образом
впечатлен!»
Mikel S.

«У меня есть
сказать
[шестнадцатеричный]
колодка выглядит
отличный»
Хуанита С.

«отлично!
я могу
верю
как круто
это…»
Диего Л.

См. также:

Книга браузера
16-страничный
шпаргалка

Таблица стран

Найти страны по номеру
имя, код, телефон
или местоположение.