Безопасные веб цвета » Инструменты вебмастера
Главная » Безопасные веб цвета
Когда было время 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 | FF 14 93 | 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 | 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 | 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 |
| MediumAquamarine | 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 | 0 0 139 |
| 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 | 210 180 140 |
| 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 | 80 00 00 | 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 |
Если случилось так, что ваш компьютер не доступен и необходимо отладить Java скрипт, то можете воспользоваться JavaScript редактором онлайн, который подсвечивает синтаксис в языке JavaScript
Категории
Цветовая палитра в web-дизайне — IT-course
Предыдущая Сколько можно заработать на вёрстке сайтов 10 ноября 2020Оптимизация цветовой палитры в веб-дизайне
Причиной сокращения количества цветов в изображении является уменьшение размера файла.
Небольшой размер файла предполагает увеличение скорости передачи пакетов данных. Приходится иногда пожертвовать качеством картинки ради достижения оптимальной скорости передачи данных в Интернете. Можно выбрать из стандартных палитр или создать свою собственную. Не забывайте: чем меньше используемый набор оттенков, тем меньше соответственно размер файла.
Выбор цвета в web
Из всего множества выбираем только определенные цвета — те, что принадлежат так называемой Web-безопасной палитре. Стандартные тона будут корректно отображаться в браузере. Web-безопасная цветовая гамма состоит из 216 вариантов, которые поддерживаются как операционной системой Mac, так и Windows. Из-за того, что этот набор является общим для обеих операционных систем, его использование в своей графике, позволяет не волноваться за качество отображения картинки. Например, при создании работы, содержащей только четыре цвета, стоит их брать из Web-безопасной палитры. В противном случае есть риск, что браузер использует для отображения похожих оттенков два совершенно других варианта из Web-безопасного перечня, и возникнет эффект пуантилизма.
Однако это явление быстро исчезает, поскольку большинство современных мониторов способны воспроизводить значительно больше 256 тонов.
Понятие битовой глубины
С уменьшением цветового разнообразия графики, сокращается ее битовая глубина, т.е. количество вычислительных мощностей для ее обработки. При необходимости можно использовать 24-битовое изображение с миллионами цветов, в то время как 8-битовое работает только с 256 цветами. Что произойдет, если максимально оптимизировать страницу и использовать менее 256 оттенков? Какая в этом случае будет битовая глубина?
Все наиболее известные программы для создания Web-графики позволяют сократить цветовую схему изображения с миллионов оттенков до лишь небольшого количества. Однако, если это сделано, то назад дороги нет. После принятие новых настроек рабочего поля, эти цвета ушли навсегда. Во избежание потери красок при создании Web-графики нужно работать с максимальной битовой глубиной, сохраняя исходные файлы отдельно от окончательных изображений.
Перед экспортом графики для Web-страницы последнее действие, которое надо осуществить, — это сократить цветовую гамму до 256 или менее цветов.
После понимания принципа битовой глубины изображения и ее связи с количеством оттенков, можно приступать к выбору типа палитры для своего проекта. Не стоит забывать, что кроме использования стандартных вариаций, возможно создать и свою собственную. Но только 216 цветов на 8-битовом мониторе будут отображаться одинаково и без сглаживания во всех Web-браузерах. Какую бы цветовую гамму вы ни выбрали, попытайтесь включить в нее как можно больше из этих 216 цветов, если целью стоит максимальная оптимизация графического дизайна.
Возможно, вас заинтересуют наши курсы по веь-дизайну, гдк вы сможете освоить вопросы работы с цветом и изображениями на более высоком уровне:
Компьютерные курсы web-дизайна в Москве для начинающих
Курсы по HTML и CSS. Верстка сайтов
Адаптивная верстка сайтов на Bootstrap
Следующая Скидки на компьютерные курсыВсе новости
веб-цветовая палитра | Руководство по бренду университета
Приведенные ниже цвета предназначены для цифровых экранных материалов.
Были предоставлены как значения RGB, так и коды HEX. Все дисплеи разные, поэтому на разных устройствах могут быть небольшие различия.
Пожалуйста, ознакомьтесь с разделом «Использование цвета в Интернете», чтобы ознакомиться с рекомендациями по использованию цвета на веб-сайтах.
Основные цвета
ШЕСТИГР.
500000
Р-80
Г-0
Б-0
HEX
FFFFFF
R-255
G-255
B-255
Дополнительные цвета
HEX
3C0000
R-60
G-0
B-0
HEX
003C71
R-0
G-60
B-113
Шестигранник
5B6236
Р-91
Г-98
Б-54
HEX
744F28
R-116
G-79
B-40
HEX
998542
R-153
G-133
B-66
HEX
D6D3C4
R-214
G-210
B-196
HEX
f6f6f6
R-246
G-246
B-246
HEX
eaeaea
R-234
G-234
B-234
HEX
d1d1d1
R-209
G-209
B-209
HEX
a7a7a7
R-167
G-167
B-167
HEX
707070
R-112
G-112
B-112
HEX
3e3e3e
R-62
G-62
B-62
HEX
333333
R-51
G-51
B-51
HEX
202020
R-32
G-32
B-32
HEX
141414
R-20
G-20
B-20
HEX
000000
R-0
G-0
B-0
Акцентные цвета (использовать экономно)
ШЕСТИГР.
FCE300
Р-252
Г-227
Б-0
Шестигранник E4002B
Р-228
Г-0
Б-43
Шестнадцатеричный 732F2F
Р-115
Г-47
Б-47
Цветовые пропорции
Основная цветовая палитра является основой общей цветовой схемы. У Эгги Марун всегда должно быть сильное присутствие. Вторичные цвета используются в меньшей пропорции и никогда не должны подавлять основные цвета. Акцентные цвета используются в небольших количествах, чтобы выделить или сбалансировать элементы композиции.
Палитра функций
Эти цвета следует использовать только для веб-функций, перечисленных ниже.
Цвета звеньев
HEX
006483
R-0
G-100
B-131
Дополнительные состояния при наведении
ШЕСТИГР. 004362
Р-0
Г-67
Б-98
См. перо Ссылки от TAMU MarComm (@tamumarcomm) на КодПене.
Сообщения об ошибках и успехах
Шестнадцатеричный 3ed488
Р-0
Г-67
Б-98
Шестнадцатеричный E4002B
Р-228
Г-0
Б-43
См.
перо
Коллекция кнопок от TAMU MarComm (@tamumarcomm)
на КодПене.
Цветовая палитра — фирменный стиль и бренд
Основная палитра
Синий и белый
Подпись UB сине-белого цвета восходит к 1886 году, через 40 лет после основания Медицинской школы. Медицинский факультет в то время перевязывал свои дипломы белыми лентами. Когда Фармацевтическая школа готовилась к выпуску первого класса, она стремилась отличиться и вместо этого использовала голубые ленты. По мере появления других факультетов и увеличения числа студентов возникла необходимость в создании символики университетского духа. Ленты дипломов были восприняты как характерное цветовое сочетание, не конфликтующее с лентами других университетов. Наши синий и белый претерпели множество итераций за последние 130 с лишним лет, но они существуют и по сей день, представляя Университет в Буффало на самом высоком уровне.
UB Blue*
CMYK: 100/53/0/0
PMS: 2935
RGB: 0/91/187
HEX: #005bbb
9 0239 Hayes Hall White
CMYK: 0/0 /0/0
PMS: белый
RGB: 255/255/255
HEX: #ffffff
Дополнительная палитра
Поддерживающие цвета
Хотя наша цветовая система монохромная хроматический, мы понимаем, что в некоторых случаях необходимо использовать другие цвета. Для этих обстоятельств мы разработали этот набор вторичных цветов.
Эти цвета следует использовать время от времени и с осторожностью. Ни при каких обстоятельствах ни один из них не должен стать преобладающим цветом для школы, центра, института или кафедры.
* Цвета, отмеченные звездочкой, подходят для использования в тексте на белом фоне в Интернете.
Посмотреть все доступные сочетания текста и цветов
Letchworth Autumn
CMYK: 0/72/70/0
PMS: 7416
RGB: 229/106/84
HEX: #e56a54
Solar Strand
CMYK: 0/19/89/0
PMS: 123
RGB: 255/199/44
HEX: #ffc72c 9000 3
Зеленый Greiner
CMYK: 10 /0/95/0
PMS: 396
RGB: 235/236/0
HEX: #ebec00
Lake LaSalle
CMYK: 66/0/39/0
PMS: 326 5
RGB: 0/166 /156
HEX: #00a69c
Capen Brick*
CMYK: 8/92/100/33
PMS: 484
RGB: 153/0/0
HEX: #9
Bronze Buffalo
CMYK: 9/35/98/30
PMS: 1255
RGB: 173/132/31
HEX: #ad841 f
Олмстед Грин
CMYK: 56 /2/78/5
PMS: 7489
RGB: 109/160/75
HEX: #6da04b
Niagara Whirlpool*
CMYK: 96/9/32/29
P МС: 7474
RGB: 0/ 101/112
HEX: #006570
Victor E.
Blue
CMYK: 67/2/0/0
PMS: 298
RGB: 47/159/208
HEX: #2f9fd0
Harriman Blue*
CMYK: 100/30/19/76
PMS: 3035
RGB: 0/47/86
HEX: #002f 56
Бэрд Пойнт
CMYK: 5/11/8/12
PMS: 434
RGB: 228/228/228
HEX: #e4e4e4
Таунсенд Грей*
CMYK: 30/22/17/57 9 0010 ПМС: ХОЛОДНЫЙ СЕРЫЙ 9
RGB: 102/102/102
HEX: #666666
Нельзя использовать никакие значения, кроме перечисленных на этой странице. Оттенки и оттенки этих цветов не допускаются.
Загрузка цветовой палитры
Этот загружаемый файл состоит из наших основных и дополнительных цветовых палитр CMYK, PMS и RGB/HEX, упакованных в файл ASE для вашего удобства. При разработке фирменного контента загрузите эти цветовые палитры, чтобы убедиться в правильности значений цветов.
Примечание. Файлы Adobe Swatch Exchange (ASE) используются для сохранения набора цветов, к которым можно получить доступ через палитру образцов в большинстве программ Adobe Creative Suite.
ASE Цветовые палитры:
Загрузить Zip
Совместимо только с программами Adobe Creative Suite
Университет Буффало стремится обеспечить цифровую доступность для людей с ограниченными возможностями. Мы постоянно улучшаем пользовательский интерфейс для всех и применяем соответствующие стандарты доступности, чтобы обеспечить равный доступ для всех пользователей. Если у вас возникли трудности с доступом к контенту или услугам на этом веб-сайте, или если у вас есть предложения по улучшению взаимодействия с пользователем, обращайтесь по адресу:
University Communications по адресу [email protected] или 716-645-6969
Цифровая цветовая палитра
Когда зрители сталкиваются с UB в цифровом мире м, наша специальная палитра делает его постоянным опытом.
Наши зрители обычно впервые знакомятся с UB в цифровом виде, задолго до того, как столкнутся с ним лично.
Чтобы вдумчиво перевести наш бренд для наших цифровых коммуникаций, мы создали специальные веб-значения для нашей цветовой палитры, используя варианты HEX и RGB, перечисленные ниже. Они были оптимизированы для цифрового использования и никоим образом не должны изменяться.
Посмотреть все доступные комбинации текста и цветов
Обеспечить высокую контрастность
Обратите особое внимание на использование светло-серого, оранжевого и желтого цветов. Проверьте уровни контрастности с помощью инструмента цветового контраста WAVE.
Дизайн для доступности
Мы хотим, чтобы наши сообщения находили отклик у любой аудитории, поэтому внимательно относитесь к выбору цветовых комбинаций для цифровых коммуникаций. Наша цифровая цветовая палитра была оптимизирована для соответствия Закону об американцах-инвалидах (ADA) — закону о равных возможностях для людей с ограниченными возможностями — так что она визуально эффективна и функционально полезна.
Не полагайтесь только на цвет
Поскольку некоторые пользователи могут переопределять цвета страницы, цвет не должен быть единственным способом передачи информации.