Безопасные веб цвета » Инструменты вебмастера
Инструменты
Главная » Безопасные веб цвета
Когда было время 256-цветных мониторов применялась «безопасная палитра», конечно она применяется и сейчас. У безопасной палитры всего три главных цвета для смешивания — R G B и соответствуют значениям: 00, 33, 66, 99, CC, FF.
Вообще, цветовая палитра 6x6x6 является приоритетной при выборе цвета для фона или цвета шрифта.
Вашему вниманию представляется палитра «безопасных веб цветов», которые одинаково хорошо будут отображаться во всех браузерах и во всех оперативных системах.
| Имя цвета для HTML | Код для HTML | R G B |
|---|---|---|
Красные | ||
| IndianRed | CD 5C 5C | 205 92 92 |
| LightCoral | F0 80 80 | 240 128 128 |
| Salmon | FA 80 72 | 250 128 114 |
| DarkSalmon | E9 96 7A | 233 150 122 |
| LightSalmon | FF A0 7A | 255 160 122 |
| Crimson | DC 14 3C | 220 20 60 |
| Red | FF 00 00 | 255 0 0 |
| FireBrick | B2 22 22 | 178 34 34 |
| DarkRed | 8B 00 00 | 139 0 0 |
Розовые | ||
| Pink | FF C0 CB | 255 192 203 |
| LightPink | FF B6 C1 | 255 182 193 |
| HotPink | FF 69 B4 | 255 105 180 |
| DeepPink | 255 20 147 | |
| MediumVioletRed | C7 15 85 | 199 21 133 |
| PaleVioletRed | DB 70 93 | 219 112 147 |
Оранжевые | ||
| LightSalmon | FF A0 7A | 255 160 122 |
| Coral | FF 7F 50 | 255 127 80 |
| Tomato | FF 63 47 | 255 99 71 |
| OrangeRed | FF 45 00 | 255 69 0 |
| DarkOrange | FF 8C 00 | 255 140 0 |
| Orange | FF A5 00 | 255 165 0 |
Жёлтые | ||
| Gold | FF D7 00 | 255 215 0 |
| Yellow | FF FF 00 | 255 255 0 |
| LightYellow | FF FF E0 | 255 255 224 |
| LemonChiffon | FF FA CD | 255 250 205 |
| LightGoldenrodYellow | FA FA D2 | 250 250 210 |
| PapayaWhip | FF EF D5 | 255 239 213 |
| Moccasin | FF E4 B5 | 255 228 181 |
| PeachPuff | FF DA B9 | 255 218 185 |
| PaleGoldenrod | EE E8 AA | 238 232 170 |
| Khaki | F0 E6 8C | 240 230 140 |
| DarkKhaki | BD B7 6B | 189 183 107 |
Фиолетовые | ||
| Lavender | E6 E6 FA | 230 230 250 |
| Thistle | D8 BF D8 | 216 191 216 |
| Plum | DD A0 DD | 221 160 221 |
| Violet | EE 82 EE | 238 130 238 |
| Orchid | DA 70 D6 | 218 112 214 |
| Fuchsia | FF 00 FF | 255 0 255 |
| Magenta | FF 00 FF | 255 0 255 |
| MediumOrchid | BA 55 D3 | 186 85 211 |
| MediumPurple | 93 70 DB | 147 112 219 |
| BlueViolet | 8A 2B E2 | 138 43 226 |
| DarkViolet | 94 00 D3 | 148 0 211 |
| DarkOrchid | 99 32 CC | 153 50 204 |
| DarkMagenta | 8B 00 8B | 139 0 139 |
| Purple | 80 00 80 | 128 0 128 |
| Indigo | 4B 00 82 | 75 0 130 |
| SlateBlue | 6A 5A CD | 106 90 205 |
| DarkSlateBlue | 48 3D 8B | 72 61 139 |
Зелёные | ||
| GreenYellow | AD FF 2F | 173 255 47 |
| Chartreuse | 7F FF 00 | 127 255 0 |
| LawnGreen | 7C FC 00 | 124 252 0 |
| Lime | 00 FF 00 | 0 255 0 |
| LimeGreen | 32 CD 32 | 50 205 50 |
| PaleGreen | 98 FB 98 | 152 251 152 |
| LightGreen | 90 EE 90 | 144 238 144 |
| MediumSpringGreen | 00 FA 9A | 0 250 154 |
| SpringGreen | 00 FF 7F | 0 255 127 |
| MediumSeaGreen | 3C B3 71 | 60 179 113 |
| SeaGreen | 2E 8B 57 | 46 139 87 |
| ForestGreen | 22 8B 22 | 34 139 34 |
| Green | 00 80 00 | 0 128 0 |
| DarkGreen | 00 64 00 | 0 100 0 |
| YellowGreen | 9A CD 32 | 154 205 50 |
| OliveDrab | 6B 8E 23 | 107 142 35 |
| Olive | 80 80 00 | 128 128 0 |
| DarkOliveGreen | 55 6B 2F | 85 107 47 |
| 66 CD AA | 102 205 170 | |
| DarkSeaGreen | 8F BC 8F | 143 188 143 |
| LightSeaGreen | 20 B2 AA | 32 178 170 |
| DarkCyan | 00 8B 8B | 0 139 139 |
| Teal | 00 80 80 | 0 128 128 |
Синие | ||
| Aqua | 00 FF FF | 0 255 255 |
| Cyan | 00 FF FF | 0 255 255 |
| LightCyan | E0 FF FF | 224 255 255 |
| PaleTurquoise | AF EE EE | 175 238 238 |
| Aquamarine | 7F FF D4 | 127 255 212 |
| Turquoise | 40 E0 D0 | 64 224 208 |
| MediumTurquoise | 48 D1 CC | 72 209 204 |
| DarkTurquoise | 00 CE D1 | 0 206 209 |
| CadetBlue | 5F 9E A0 | 95 158 160 |
| SteelBlue | 46 82 B4 | 70 130 180 |
| LightSteelBlue | B0 C4 DE | 176 196 222 |
| PowderBlue | B0 E0 E6 | 176 224 230 |
| LightBlue | AD D8 E6 | 173 216 230 |
| SkyBlue | 87 CE EB | 135 206 235 |
| LightSkyBlue | 87 CE FA | 135 206 250 |
| DeepSkyBlue | 00 BF FF | 0 191 255 |
| DodgerBlue | 1E 90 FF | 30 144 255 |
| CornflowerBlue | 64 95 ED | 100 149 237 |
| MediumSlateBlue | 7B 68 EE | 123 104 238 |
| RoyalBlue | 41 69 E1 | 65 105 225 |
| Blue | 00 00 FF | 0 0 255 |
| MediumBlue | 00 00 CD | 0 0 205 |
| DarkBlue | 00 00 8B | |
| Navy | 00 00 80 | 0 0 128 |
| MidnightBlue | 19 19 70 | 25 25 112 |
Коричневые | ||
| Cornsilk | FF F8 DC | 255 248 220 |
| BlanchedAlmond | FF EB CD | 255 235 205 |
| Bisque | FF E4 C4 | 255 228 196 |
| NavajoWhite | FF DE AD | 255 222 173 |
| Wheat | F5 DE B3 | 245 222 179 |
| BurlyWood | DE B8 87 | 222 184 135 |
| Tan | D2 B4 8C | |
| RosyBrown | BC 8F 8F | 188 143 143 |
| SandyBrown | F4 A4 60 | 244 164 96 |
| Goldenrod | DA A5 20 | 218 165 32 |
| DarkGoldenrod | B8 86 0B | 184 134 11 |
| Peru | CD 85 3F | 205 133 63 |
| Chocolate | D2 69 1E | 210 105 30 |
| SaddleBrown | 8B 45 13 | 139 69 19 |
| Sienna | A0 52 2D | 160 82 45 |
| Brown | A5 2A 2A | 165 42 42 |
| Maroon | 128 0 0 | |
Белые | ||
| White | FF FF FF | 255 255 255 |
| Snow | FF FA FA | 255 250 250 |
| Honeydew | F0 FF F0 | 240 255 240 |
| MintCream | F5 FF FA | 245 255 250 |
| Azure | F0 FF FF | 240 255 255 |
| AliceBlue | F0 F8 FF | 240 248 255 |
| GhostWhite | F8 F8 FF | 248 248 255 |
| WhiteSmoke | F5 F5 F5 | 245 245 245 |
| Seashell | FF F5 EE | 255 245 238 |
| Beige | F5 F5 DC | 245 245 220 |
| OldLace | FD F5 E6 | 253 245 230 |
| FloralWhite | FF FA F0 | 255 250 240 |
| Ivory | FF FF F0 | 255 255 240 |
| AntiqueWhite | FA EB D7 | 250 235 215 |
| Linen | FA F0 E6 | 250 240 230 |
| LavenderBlush | FF F0 F5 | 255 240 245 |
| MistyRose | FF E4 E1 | 255 228 225 |
Серые | ||
| Gainsboro | DC DC DC | 220 220 220 |
| LightGrey | D3 D3 D3 | 211 211 211 |
| Silver | C0 C0 C0 | 192 192 192 |
| DarkGray | A9 A9 A9 | 169 169 169 |
| Gray | 80 80 80 | 128 128 128 |
| DimGray | 69 69 69 | 105 105 105 |
| LightSlateGray | 77 88 99 | 119 136 153 |
| SlateGray | 70 80 90 | 112 128 144 |
| DarkSlateGray | 2F 4F 4F | 47 79 79 |
| Black | 00 00 00 | 0 0 0 |
Информацию о домене, сервере, регистраторе домена можно узнать с помощью Whois сервиса
Категории
теория цвета для дизайна и иллюстрации
Цветовая палитра — это набор оттенков, которым могут пользоваться художники и дизайнеры для реализации замыслов.
Палитры могут иметь два способа реализации:
- цифровой — каждому оттенку дается свой код;
- физический — цвета напечатаны на карточках, в альбомах, нарисованы вручную на бумаге и т.д.
Палитра особенно важна для веб-дизайнеров, потому что при создании интерфейсов следует учитывать гармоничность подобранных цветовых сочетаний и их способность передать настроение и посыл бренда. Удачная работа с палитрой позволяет улучшить посещаемость сайта, а также побудить пользователей совершить покупки или оформить заказ на оказание услуг.
Пример использования дизайнером небольшой цветовой палитры для создания мудбордов от дизайнера Natalia Kononkova. ИсточникСодержание
- Кому и зачем нужна цветовая палитра
- Сколько цветов должно быть в палитре
- Как использовать цветовую палитру на сайте
- Как подобрать палитру
Художникам. Чтобы написать необычную картину, требуется множество оттенков для передачи объема, глубины, игры света и тени.
Художники-пейзажисты в своих работах могут использовать массу оттенков зеленого, голубого, синего, красного и коричневого цветов, чтобы показать фактуру предметов или явлений. Вспомните Айвазовского с его удивительными картинами – волны на них совсем как настоящие. Такого эффекта нельзя достигнуть, работая только с одним цветом.
Дизайнерам. Чтобы сделать интерфейсы приложений и сайтов интересными и дружелюбными, а проекты интерьеров и рекламные макеты — привлекательными и изящными. И если художник чаще всего передает на своих полотнах малейшие нюансы, то задача дизайнера, в большинстве случаев, состоит в том, чтобы сделать акцент на определенном предмете, сместить фокус внимания зрителя.
Использование ограниченной палитры в брендинге, автор Lemontoli. ИсточникСколько цветов должно быть в палитреЕсли речь идет о палитре художника, который пишет картину, то их количество не ограничено. Ведь для передачи замысла могут потребоваться как чистые цвета, так и их смеси.
Важно лишь, чтобы они сочетались между собой по температуре, тону и т.д. Подробнее об этом можно прочесть в статье «Цветовая гамма».
Если же речь заходит об оформлении сайта, то стоит опираться не только на основные маркетинговые правила, но и на научные исследования. Да-да, ученые решили заняться и этой сферой.
Исследование N. Faisal 2016. Специалисты NNGroup изучили влияние атрибутов веб-дизайна на лояльность пользователей и построение у них доверия к высокой неопределенности. В ходе эксперимента было изучено 112 различных сайтов, которые пользовались особой популярностью среди пользователей в 2000–2015 годах. Выяснилось, что половина всего объема сайтов имели однотонную цветовую палитру, а в качестве цветового решения для второй половины были выбраны всего два акцентных цвета. Аналитики пришли к выводу о том, что такие дизайнерские решения позволили создать единство в восприятии большинства пользователей, а также дали возможность людям не отвлекаться на яркие элементы, а оставаться сосредоточенными на контенте.
Исследование NNGroup 2015. Аналитики предложили фокус-группе оценить несколько версий сайта американской компании Sun Microsystems, которые отличались друг от друга только цветовыми решениями. Пользователи отметили, что если на яркой фоновой подложке представлена яркая фотография, то им сложно воспринимать информацию. Идеальный сайт имеет минималистичную цветовую схему.
Пример минималистичной палитры от компании Lamoda. ИсточникКак использовать цветовую палитру на сайтеМаксимально удобной для пользователя будет монохромная цветовая схема. Допускается делать ее контрастной или использовать для оформления несколько схожих между собой оттенков. Чтобы привлечь внимание пользователя, можно использовать контрастный яркий цвет. Например, чтобы выделить кнопку призыва к действию или определенный пункт меню.
В классической живописи палитра подбирается путем нанесения красок на белую пластинку, дощечку или лист бумаги. Художник обладает багажом знаний для подбора гармоничных сочетаний. Если же вы не можете похвастать высоким скиллом в этой сфере, рекомендуем воспользоваться автоматизированными сервисами. Они помогут сформировать цветовую палитру для сайта, если заказчик не предоставил брендбук и ТЗ с кодами конкретных оттенков. Не переживайте из-за отсутствия опыта: системы работают на основе популярных цветовых схем и подбирают гармоничные сочетания.
Вот некоторые из таких сервисов.
Adobe Color. Один из наиболее популярных ресурсов. Пользователю доступна функция загрузки на сайт картинки — система на основе полученного изображения формирует подборку оттенков для цветовой палитры. Данный сервис будет особенно полезен тем, кто по работе часто сталкивается с составлением мудбордов.
Colorhexa. Не только удобный сервис, но и обширная база данных, в которой можно найти практически любую информацию о цвете. Функционал Colorhexa точно придется по душе веб-разработчикам, а вот дизайнеры могут испытывать ряд трудностей в работе с ним: механика основана на сложении и вычитании, использовании кодов оттенков и различных цветовых пространств.
Colllor. Сервис лаконичен и очень прост в использовании. Достаточно выбрать только один цвет, чтобы ресурс выдал возможные способы его использования: градиенты, контрастные решения, сочетания с другими оттенками. Для каждого цвета прописан его код.
Пример сгенерированных палитр в Colllor для голубого цвета. ИсточникНайти другие сервисы в интернете можно по запросам «цветовой круг онлайн», «подбор цветов онлайн» и подобным.
ИСКРА —
неделя знакомства
с дизайн-профессиями
бесплатно
ИСКРА —
неделя знакомства
с дизайн-профессиями
7 дней, которые разожгут в вас искру интереса
к дизайну.
Получайте подарки каждый день,
знакомьтесь с востребованными профессиями
и выберите ту, которая подойдет именно вам.
разжечь искру
Цветовая палитра | Руководство по брендингу и айдентике университета
Обзор
Бренд университета использует как основную, так и дополнительную цветовую палитру для печатного и цифрового контента. Существуют специальные альтернативные версии Carolina Blue только для цифрового контента. Вторичная цветовая палитра должна использоваться с осторожностью в качестве акцентов на основной палитре. Каролина Блю является основным цветом Университета и должна использоваться не менее 10% во всех дизайнах.
Соблюдение следующих правил цветопередачи поможет создать целостное изображение и сохранить визуальный эффект идентичности.
Основная палитра
Дополнительные рекомендации см. в разделе Альтернативные веб-цвета ниже.
Carolina Blue
PMS 542
CMYK 60, 19, 1, 4
HEX #4B9CD3
RGB 75, 156, 211
Цифровые ссылки #007FAE
нав.
90, 10, 77
Hex #13294B
RGB 19, 41, 75
Черный
PMS Черный 3
CMYK 74, 52, 71, 90
Hex #151519
2 RGB
White
CMYK 0, 0, 0, 0
HEX #FFFFFF
RGB 255, 255, 255
СЕРЫЙ
PMS BLAC
HEX #F8F8F8
RGB 248, 248, 248
Вторичная палитра
Купольная медь
PMS 8920 (металлик)
Цвет Infinity Pan или фольга ПРИМЕЧАНИЕ 62:
. Не предназначен для цифрового использования.
Бассейн Сланец
PMS 5405
CMYK 68, 35, 17, 40
HEX #4F758B
RGB 79, 117, 139
Campus Sandstone
PMS 2309 AT 50%
CMYK 3, 8, 11, 110019
PMS 2309 в 50%
CMYK 3, 8, 11, 110019
PMS 2309 в 50%
CMYK 3, 8, 11, 110019
PMS 2309 в 50%
CMYK 3, 8, 11, 110019
PMX 2309. F4E8DD
RGB 244, 232, 221
Longleaf Pine
PMS 561
CMYK 84, 20, 58, 54
HEX #00594C
RGB 0, 89, 76
Azalea Pink
PMS 191
CMYK 0, 79, 36, 0
HEX #EF426F
RGB 239, 68, 111
Tile Teal
PMS 7466
CMYK 97, 0, 30, 0
HEX #00A5AD
RGB 0, 165, 173
Sunburst Yellow
PMS 1099999
Sunburst 9 PMS 1099999
.
100019
. HEX #FFD100 Davie Green
,
RGB 255, 209, 0
PMS 382
CMYK 28, 0, 100, 0
HEX #C4D600
RGB 196, 214, 0 Веб. это светлый цвет, и необходимо принимать дополнительные меры для людей со слабым зрением или дальтонизмом. При использовании, как указано ниже, альтернативные веб-цвета соответствуют требованиям доступности и делают наши веб-сайты более инклюзивными.
Предлагаемые ниже размеры шрифта основаны на Web Carolina Blue на белом фоне. Синий цвет гиперссылки следует использовать только на белом фоне. Используйте средство проверки цветового контраста WebAIM, чтобы проверить цветовой контраст выбранных вами цветовых комбинаций. Для получения дополнительной информации об использовании университетских цветов и специальных возможностей см. рекомендации и ресурсы на странице «Веб-сайты».
Web Carolina Blue
Hex #4B9CD3
RGB 75, 156, 211
ПРИМЕЧАНИЕ.
Используйте размер шрифта более 24 пикселей (или 19 пикселей).px и жирным шрифтом).
Гиперссылка Синий
Hex #007FAE
RGB 0, 127, 174
ПРИМЕЧАНИЕ. Используйте только на белом фоне.
Указания по использованию
Do- Используйте не менее 10 % цвета Carolina Blue для всех дизайнов.
- Обязательно используйте правильную разбивку цветов для конкретных целей.
- Используйте цвета из основной цветовой палитры в качестве основных цветов в дизайне.
- Используйте цвета из вторичной цветовой палитры только для акцентов.
- Убедитесь, что цветовой контраст текста и фона соответствует рекомендациям WCAG 2.1 AA для веб-дизайна и цифрового дизайна.
- Не используйте синий цвет Каролины в любом дизайне.
- Глазное яблоко или угадать определенный цвет.
- Использование цветов из вторичной цветовой палитры в качестве основных цветов.
Контактный телефон
Для получения дополнительной информации о цветовой палитре университета обращайтесь в отдел связи университета.
17 минималистичных цветовых палитр для вашего следующего дизайна
Иногда лучше меньше, да лучше. Особенно это актуально при выборе цветовой палитры марки .
Почему?
Цель фирменного стиля — продемонстрировать ценность и профессионализм вашего бизнеса. Хорошо продуманная айдентика повышает ваш опыт и работает со всеми другими активами бренда, чтобы привлечь ваших лучших клиентов.
Цветовые схемы являются важной частью головоломки дизайна бренда. Схема должна соответствовать образу бренда, который вы хотите создать.
Но дизайн бренда не должен быть сложным. На самом деле, некоторые из самых привлекательных брендов используют минималистский подход к дизайну, но они смелые и вдохновляющие. Вспомните Nike с черно-белым логотипом «shoosh» или цветовую палитру Apple.
ИЗОБРАЖЕНИЕ: минималистичный дизайн Nike SwooshApple привлекает разную аудиторию.
Минималистский дизайн упрощает создание четкого, профессионального бренда или веб-сайта. Есть еще несколько причин, по которым следует рассмотреть минималистскую цветовую палитру, среди них:
- Дизайн, который понравится широкой аудитории.
- Простой макет облегчает выделение важного содержимого.
- Стиль, скорее всего, останется неизменным, что снизит потребность в редизайне.
Но просто не всегда значит легко. В минималистичном дизайне есть нечто большее, чем кажется на первый взгляд.
Например, использование пробела крайне важно. Слишком много делает дизайн слабым, но слишком мало приводит к переполнению элементов, которые могут быть подавляющими. Требуется некоторая практика с интервалами, полями и отступами, чтобы понять, что работает хорошо.
Типографика — еще один способ повлиять на дизайн. Правильный выбор шрифта может превратить посредственный дизайн в запоминающийся.
Но этот пост посвящен цвету . Здесь я поделюсь некоторыми советами по использованию цветовой палитры в минималистичном дизайне. Я также дам вам 17 наших любимых палитр, которые вы можете использовать для своего следующего проекта по брендингу или дизайну веб-сайта.
Значение цветов в минималистском дизайне
Возможно, вы слышали о теории цвета — популярный термин в индустрии профессионального дизайна. Эта концепция относится к идее, что цвета имеют значение.
Например, в США белый цвет часто воспринимается как символ чистоты. Это делает его популярным выбором для свадебного дизайна и индустрии здравоохранения. Но в других местах по всему миру существует связь между белым цветом и смертью.
Красный, часто ассоциирующийся со страстью и энергией, часто используется в качестве цвета «призыва к действию» для веб-сайтов. Тем не менее, это также общий сигнал опасности. Таким образом, термин красный флаг .
Поскольку в минималистичной цветовой палитре меньше вариантов, каждый из них будет иметь большее влияние. Итак, выбирайте с умом.
Как выбрать цвета для вашего минималистского дизайна
Как вы хотите, чтобы люди воспринимали ваш бизнес?
При ответе на этот вопрос необходимо учитывать два соображения:
1. Тип бренда, который вы хотите создать.
2. С кем вы пытаетесь связаться (ваша аудитория).
Большинство компаний знают, кто является или будет их целевой аудиторией. Например, если женщины составляют большую часть целевой аудитории вашего бизнеса, вы, безусловно, захотите рассмотреть женские цветовые палитры. Оттенки розового, белого и серого для контраста могут быть хорошим выбором.
Некоторым компаниям нужен гендерно-нейтральный бренд, который понравится всем типам аудитории. В этом случае идеально подходит минималистский подход к дизайну.
Просматривая цветовые палитры в этом посте, обратите внимание на выделяющиеся цветовые схемы.
Затем, если вам нужна помощь в их сужении, рассмотрите возможность создания мудборда.
ПОДРОБНЕЕ: Как сделать доску настроения, гарантирующую потрясающий дизайн
Сколько цветов следует использовать?
В большинстве случаев я бы рекомендовал использовать не более трех цветов. Но часто бывает достаточно одного или двух. Назначьте один цвет в палитре в качестве основного или фонового цвета, а другой — для акцентов (выделения, призывов к действию, ссылок и т. д.).
Когда речь заходит об акцентных цветах, большинство людей думают о ярких цветах, таких как красный или зеленый. Но темные цвета тоже хорошо работают, в зависимости от дизайна.
Я буду использовать пример, чтобы проиллюстрировать использование цветовой палитры в концепции минималистского дизайна. (Обратите внимание, что в цветовых кодах используются шестнадцатеричные цвета.)
В первом примере я использовал белый для фона, Raven в качестве основного цвета и Cod Grey для акцентов.
Используя ту же палитру, этот рисунок сочетает черное фоновое изображение с белым и текстом Oslo Grey:
Вы можете создавать различные дизайны с помощью одной цветовой палитры. Экспериментируйте, пробуя разные комбинации, пока не найдете ту, которая вам понравится.
Часто бывает достаточно одного цвета. И обычно вам никогда не понадобится больше трех.
Я включил три цвета в каждую палитру, чтобы дать вам больше гибкости. Начните с выбора основного цвета, а затем того, который вы будете использовать для акцентов.
Пришло время провести ребрендинг вашего бизнеса?
Запишитесь на БЕСПЛАТНУЮ консультацию со специалистом по бренд-стратегии, чтобы узнать, как повысить конкурентоспособность и увеличить доход с помощью свежей идентичности бренда.
17 минималистичных цветовых палитр для вашего следующего дизайна
Вот некоторые цветовые палитры, которые нам нравятся. Мы также включили цветовые коды для справки.