Содержание

Цвет | htmlbook.ru

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

Шестнадцатеричные цвета

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 6.1. Десятичные и шестнадцатеричные числа меньше 16
Десятичные0123456789101112131415
Шестнадцатеричные0123456789ABCDEF

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл.

 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 6.2. Десятичные и шестнадцатеричные числа больше 16
Десятичные16171819202122232425262728
Шестнадцатеричные101112131415161718191A1B1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.

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

<body bgcolor="#fa8e47">

Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

FA+8E+47=FA8E47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.

  • Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
  • Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
  • Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

Рис. 6.1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 6.2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зеленой и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.

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

Цвета по названию

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.

Табл. 6.3. Названия некоторых цветов
Имя цветаЦветОписаниеШестнадцатеричное значение
black Черный#000000
blue Синий#0000FF
fuchsia Светло-фиолетовый#FF00FF
gray Темно-серый#808080
green Зеленый#008000
lime Светло-зеленый#00FF00
maroon Темно-красный#800000
navy Темно-синий#000080
olive Оливковый#808000
purple Темно-фиолетовый#800080
red Красный#FF0000
silver Светло-серый#C0C0C0
teal Сине-зеленый#008080
white Белый#FFFFFF
yellow Желтый#FFFF00

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

По своему действию эти способы равны. В примере 6.1 показано, как установить цвет фона и текста веб-страницы.

Пример 6.1. Цвет фона и текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Цвета</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body bgcolor="teal" text="#ffffff">
  <p>Пример текста</p>
 </body>
</html>

В данном примере цвет фона задается с помощью атрибута bgcolor тега <body>, а цвет текста через атрибут text. Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal.

Коды и названия цветов в HTML

Skip to content

Опубликовано Автор: Николай Короткин

Коды и названия цветов в HTML (справочник основных цветов с примерами)

ПримерRGB-кодЭквивалентное названиеНазвание цвета
#000000blackЧерный
#000080navyТемно-синий
#00008BdarkblueТемно-голубой
#0000CDmediumblueУмеренно-голубой
#0000FFblueГолубой
#006400darkgreenТемно-зеленый
#008000greenЗеленый
#008080tealЧайный
#008B8BdarkcyanТемный циан
#00BFFFdeepskyblueТемный небесно-синий
#00CED1darkturquoiseТемно-бирюзовый
#00FA9AmediumspringgreenУмеренный синевато-серый
#00FF00limeИзвестковый
#00FF7FspringgreenВесенний зеленый
#00FFFFaquaСиний
#191970midnightblueНочной синий
#1E90FFdodgerblueТускло-васильковый
#20B2AAlightseagreenСветлый морской волны
#228B22forestgreenЛесной зеленый
#2E8B57seagreenМорской волны
#2F4F4FdarkslategrayТемный синевато-серый
#32CD32limegreenЗеленовато-известковый
#3CB371mediumseagreenУмеренный морской волны
#40E0D0turquoiseБирюзовый
#4169E1royalblueКоролевский голубой
#4682B4steelblueГолубовато-стальной
#483D8BdarkslateblueТемный серовато-синий
#48D1CCmediumturquoiseУмеренно-бирюзовый
#4B0082indigoИндиго
#556B2FdarkolivegreenТемно-оливковый
#5F9EA0cadetblueБлеклый серо-голубой
#6495EDcornflowerblueВасильковый
#66CDAAmediumaaquamarineУмеренно-аквамариновый
#696969dimgrayТускло-серый
#6A5ACDslateblueСеровато-синий
#6B8E23olivedrabТускло-коричневый
#708090slategrayСиневато-серый
#778899lightslategrayСветлый синевато-серый
#7B68EEmediumslateblueУмеренный серовато-синий
#7CFC00lawngreenЗеленой травы
#7FFF00chartreuseФисташковый
#7FFFD4aquamarineАквамарин
#800000maroonОранжево-розовый
#800080purpleПурпурный
#808000oliveОливковый
#808080grayСерый
#87CEEBskyblueНебесно-голубой
#87CEFAlightskyblueСветлый небесно-синий
#8A2BE2bluevioletСветло-фиолетовый
#8B0000darkredТемно-красный
#8B008BdarkmagentaТемный фуксин
#8B4513saddlebrownСтарой кожи
#8FBC8FdarkseagreenТемный морской волны
#9370DBmediumpurpleУмеренно-пурпурный
#9400D3darkvioletТемно-фиолетовый
#98FB98palegreenБледно-зеленый
#9932CCdarkorchidТемно-орхидейный
#9ACD32yellowgreenЖелто-зеленый
#9CEE90lightgreenСветло-зеленый
#A0522DsiennaОхра
#A52A2AbrownКоричневый
#A9A9A9darkgrayТемно-серый
#ADD8E6lightblueСветло-голубой
#ADFF2FgreenyellowЖелто-зеленый
#AFEEEEpaleturquiseБледно-бирюзовый
#B0C4DElightsteelblueСветло-стальной
#B0E0E6powderblueТуманно-голубой
#B22222firebrickОгнеупорного кирпича
#B8860BdarkgoldenrodТемный красно-золотой
#BA55D3mediumorchidУмеренно-орхидейный
#BC8F8FrosybrownРозово-коричневый
#BDB76BdarkkhakiТемный хаки
#C0C0C0silverСеребристый
#C71585mediumvioletredУмеренный красно-фиолетовый
#CD5C5CindianredЯрко-красный
#CD853FperuКоричневый
#D2691EchocolateШоколадный
#D2B48CtanЖелтовато-коричневый
#D3D3D3lightgrayСветло-серый
#D8BFD8thistleЧертополоха
#DA70D6orchidОрхидейный
#DAA520goldenrodКрасного золота
#DB7093plaevioletredБледный красно-фиолетовый
#DC143CcornsilkМалиновый
#DCDCDCfainsboroСветлый серо-фиолетовый
#DDA0DDplumСливовый
#DEB887burlywoodСтарого дерева
#E0FFFFlightcyanСветлый циан
#E6E6FAlavenderБледно-лиловый
#E9967AdarksalmonТемный оранжево-розовый
#EE82EEvioletФиолетовый
#EEE8AApalegoldenrodБледно-золотой
#F08080lightcoralСветло-коралловый
#F0E68CkhakiХаки
#F0F8FFaliceBlueБлекло-голубой
#F0FFF0honeydewСвежего меда
#F0FFFFazureЛазурь
#F4A460sandybrownРыже-коричневый
#F5DEB3wheatПшеничный
#F5F5DCbeigeБежевый
#F5F5F5whitesmokeБелый дымчатый
#F5FFFAmintcreamМятно-кремовый
#F8F8FFghostwhiteТуманно-белый
#FA8072salmonОранжево-розовый
#FAEBD7antuqueWhiteАнтичный белый
#FAF0E6linenЛьняной
#FDF5E6oldlaceБедра испуганной нимфы
#FF00FFfuchsiaФуксия
#FF1493deeppinkТемно-розовый
#FF4500orangeredКрасно-оранжевый
#FF6347tomatoТоматный
#FF69B4hotpinkЯрко-розовый
#FF7F50coralКоралловый
#FF8C00darkorangeТемно-оранжевый
#FFA07AlightsalmonСветлый оранжево-розовый
#FFA500orangeОранжевый
#FFB6C1lightpinkСветло-розовый
#FFC0CBpinkРозовый
#FFD700goldЗолотой
#FFDAB9peachpuffПерсиковый
#FFDEADnavajowhiteГрязно-серый
#FFE4B5moccasinБолотный
#FFE4C4bisqueБисквитный
#FFE4E1mistyroseТуманно-розовый
#FFEBCDblanchedalmondСветло-кремовый
#FFEFD5papayaawhipДыни
#FFF0F5lavenderblushБледный розово-лиловый
#FFF5EEseashellМорской пены
#FFF8DCcornsilkСлоновой кости
#FFFACDlemonchiffonЛимонный
#FFFAF0floralwhiteЦветочно-белый
#FFFAFAsnowСнежный
#FFFF00yellowЖелтый
#FFFFE0lightyellowСветло-желтый
#FFFFF0ivoryСлоновой кости
#FFFFFFwhiteБелый

Posted in HTML/xHTML, Верстка сайта and tagged HTML, цвет.

Как читать шестнадцатеричные коды цветов — шестнадцатеричный цвет

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

Что такое шестнадцатеричный код?

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

Что означают цифры и буквы в шестнадцатеричном коде?

Шестнадцатеричные коды цветов начинаются со знака решетки или хэштега (#) и сопровождаются шестью буквами и/или цифрами. Первые две буквы/цифры относятся к красному цвету, следующие две — к зеленому, а последние две — к синему. Значения цвета определяются значениями от 00 до FF (вместо от 0 до 255 в RGB).

Числа используются, когда значение равно 1-9. Буквы используются, когда значение выше 9. Например:

  • А=10

  • В=11

  • С=12

  • Д=13

  • Е=14

  • F=15

Чтобы получить шестнадцатеричный цвет, выполните следующие три шага:

  1. Умножьте первое число на 16.

  2. Умножьте второе число на 1.

  3. Сложите две суммы вместе.

Понимание Hex в RGB для контекста

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

Что такое цветовые коды RGB?

В цветовой системе RGB цвета представлены следующим образом: (третье число). Число 0 означает отсутствие представления цвета, а 255 означает максимально возможную концентрацию цвета.

Итак, в приведенном выше примере вы получаете максимально яркий красный цвет без присутствия зеленого или синего. Если бы вам нужен был только зеленый, вы бы использовали RGB(0, 255, 0), а для синего — RGB(0, 0, 255). Для других цветов вы будете использовать комбинацию цветовых значений, чтобы добиться желаемого результата.

Разница между шестнадцатеричными цветовыми кодами и кодами RGB

Поняв, что означают числа в шестнадцатеричных цветовых кодах, вы сможете лучше предсказать, какой цвет вы можете увидеть. Между использованием шестнадцатеричного или RGB-цвета нет большой разницы, за исключением того, что в CSS можно также добавить альфа-значение, так что у вас действительно будет цвет RGBA.

Это может быть очень полезно, если вы хотите управлять непрозрачностью цвета. Добавление альфа-значения к вашему RGB, безусловно, является одним из самых простых способов изменить непрозрачность.

Как читать шестнадцатеричные коды цветов

Как только вы действительно поймете RGB, вы можете двигаться дальше и научиться читать шестнадцатеричные коды. Это действительно очень просто, если вы знаете формулу. Как упоминалось выше, значения 1-9 указаны в числовом виде. Однако для значений 10 и выше цифры заменяются буквами. Итак, А=10, В=11, С=12 и так далее.

Теперь, чтобы вычислить шестнадцатеричное число, есть три быстрых шага (как указано выше):

  1. Умножьте первое число (или преобразованное число из буквы) на 16.

  2. Умножить второе число (или преобразованное число из буквы) на 1.

  3. Сложите эти две суммы, чтобы получить одно значение.

Пример расчета шестнадцатеричного цветового кода

Например, шестнадцатеричное число для числа 83 на самом деле 131. Мы приходим к такому выводу:

  1. Умножение 8 в 83 на 16 (8×16=128).

  2. Умножение 3 в 83 на 1 (3×1=3).

  3. Складываем две суммы вместе (128+3=131).

Другой способ представить это так:

(8×16) + (3×1) = 131

Работа с буквами — это та же концепция. Например, FF = 255, потому что вы умножаете число, представляющее F (15), на 16, а затем умножаете число, представляющее второе F (15), на 1. Затем сложите две суммы вместе, чтобы получить 255. Признайте, что число 255 такое же, как число RGB 255, которое является ярко-красным.

Если вы не хотите выполнять расчеты в уме, используйте инструмент преобразования RGB в HEX.

Оценка шестнадцатеричных кодов в реальном мире

Как только вы поймете числа, вы сможете предсказать, как будет выглядеть цвет, основываясь на значениях интенсивности красного, зеленого и/или синего. Итак, если вы знаете, что максимальный красный цвет без зеленого или синего равен #FF0000, то вы можете мысленно немного изменить значения, чтобы получить оценку для другого цвета.

Другой пример шестнадцатеричного кода цвета — #7DD0D7, что дает вам зеленовато-синий цвет.

Общие преобразования Hex в RGB

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

  • Красный = #FF0000 = RGB(255, 0, 0)

  • Зеленый = #008000 = RGB(1, 128, 0)

  • Синий = #0000FF = RGB(0, 0, 255)

 

  • Белый = #FFFFFF = RGB(255,255,255)

  • Цвет слоновой кости = #FFFFF0 = RGB(255, 255, 240)

  • Черный = #000000 = RGB(0, 0, 0)

  • Серый = #808080 = RGB(128, 128, 128)

  • Серебро = #C0C0C0 = RGB(192, 192, 192)

 

  • Желтый = #FFFF00 = RGB(255, 255, 0)

  • Фиолетовый = #800080 = RGB(128, 0, 128)

  • Оранжевый = FFA500 = RGB(255, 165, 0)

  • Бордовый = #800000 = RGB(128, 0, 0)

  • Фуксия = #FF00FF = RGB(255, 0, 255)

 

  • Салатовый = #00FF00 = RGB(0, 255, 0)

  • Цвет морской волны = #00FFFF = RGB(0, 255, 255)

  • Бирюзовый = #008080 = RGB(0, 128, 128)

  • Олива = #808000 = RGB(128, 128, 0)

  • Темно-синий = #000080 = RGB(0, 0, 128)

Найдите другие шестнадцатеричные коды цветов или выберите цвет HTML и получите его совпадающее имя и коды.

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

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

Выбрав цветовую схему, вы можете:

  • Создать коллаж

  • Исследование и создание градиента

  • Проверить контрасты

  • Настройка оттенка, насыщенности, яркости и температуры

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

Но прежде чем выбрать палитру, запомните следующие советы по цветовому дизайну:

  • Учитывайте контекст.

  • См. цветовой круг.

  • Выберите монохроматическую, триадную или разделенную комплементарную цветовую схему.

  • Не ограничивайтесь пресетами.

Часто задаваемые вопросы о шестнадцатеричных кодах цветов

Мы знаем, что у вас есть еще вопросы о шестнадцатеричных цветах, поэтому мы создали этот краткий раздел часто задаваемых вопросов.

Что означает «гекс»?

Hex — это сокращение от Hexa, что в переводе с греческого означает шесть.

Когда мне следует конвертировать шестнадцатеричный формат в RGB (или наоборот)?

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

Как получить шестнадцатеричный код цвета для цвета изображения?

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

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

Как изменить шестнадцатеричный цвет в Adobe Illustrator?

Чтобы изменить шестнадцатеричный цвет в Adobe Illustrator, выполните следующие действия:

  1. В новом документе Illustrator нажмите F6.

  2. Дважды щелкните поле обводки или заливки в окне «Цвет».

  3. Дважды щелкните внутри поля рядом с #.

  4. Введите в поле новый шестнадцатеричный код цвета.

  5. Нажмите OK.

Шестнадцатеричные инструменты цвета в этом руководстве

В этом руководстве мы предоставили вам множество полезных инструментов, поэтому они снова собраны в одном месте:

  • Инструмент для преобразования шестнадцатеричного формата в RGB

  • Цветовые коды HTML

  • Другая таблица цветовых кодов HTML

  • Инструмент цветовой палитры

  • Советы по цветовому оформлению

  • Палитра цветов

  • Шестнадцатеричный инструмент цвета CSS

Обертывание шестнадцатеричных цветовых кодов

Чтобы подвести итог, вот несколько напоминаний:

  • Типы цветов Hex и RGB предназначены для использования на экране при разработке веб-сайтов.

  • В CSS можно добавить альфа-значение для управления непрозрачностью цвета.

  • Для бренда ключевое значение имеет постоянство цвета.

  • Всегда стремитесь узнать больше о своей работе, просматривая ресурсы и посещая курсы, предлагаемые Pluralsight!

140 HTML-цветов с кодами HEX, RGB и именами

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

Используя цветовой код RGB или HEX в HTML, вы можете изменить цвет текста, фона, URL-адреса, шрифта, таблицы или всей страницы.

Цвета в HTML

Значение для свойство color можно задать тремя основными способами:

  • по названию цвета, например, красный , зеленый , синий
  • по шестнадцатеричному числу: от #000000 до #ffffff
  • по коду цвета в палитре RGB: от rgb (0, 0, 0) до rgb(255, 255, 255)

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

Стандартный набор цветов HTML состоит из 140 различных значений. Если вам нужен цвет, который там не представлен, вам нужно будет использовать шестнадцатеричный формат (код HEX) или RGB.

HEX-коды цветов в HTML

HEX-код всегда начинается с # , за которым следует 3-байтовое шестнадцатеричное число (всего 6 цифр). Каждый байт отвечает за интенсивность одного из трех основных цветов: первый отвечает за интенсивность красного, второй — зеленого, а третий — синего:

Значение 00 — самая низкая интенсивность, FF — самая высокая. Например, чтобы получить белый цвет, нужно «смешать» три основных цвета с максимальной интенсивностью: #FFFFFF . Для получения черного цвета интенсивность всех цветов должна быть минимальной: #000000 .

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

No related posts.