Меню

Цвета что такое hex code



Как работают hex-коды для обозначения цветов

Перевод статьи «How Hex Code Colors Work – and How to Choose Colors Without A Color Picker».

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

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

По мере накопления опыта вы начнете смотреть скорее на сами коды цветов, а не просто полагаться на редактор. Вы заметите, что выбираемые вами цвета обозначаются какими-то странными кодами, вроде #ff0000.

Это hex-коды цветов. Они — фундаментальная часть работы HTML и CSS. Если вы разберетесь в том, как они функционируют, это не только поможет вам сэкономить массу времени, но и позволит создавать более элегантный и надежный код, причем гораздо быстрее.

В этой статье я расскажу вам обо всем, что вам нужно знать о hex-кодировке цветов.

Что означает слово «hex»?

Для начала давайте разберем, что в термине «hex-код» означает слово «hex». В этом контексте «hex» — это сокращение слова «hexadecimal» (англ. «шестнадцатеричный»). Речь идет о шестнадцатеричной системе счисления, где основание чисел — 16, а не привычное нам 10 (в десятичной системе).

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

В шестнадцатеричной системе счисления используются те же цифры, что и в десятичной (0-9), а затем ряд продолжается буквами латинского алфавита. Таким образом, числа 10-15 представлены буквами A, B, C, D, E, F.

Почему для обозначения цветов стали использовать шестнадцатеричную систему счисления? Дело в том, что она естественным образом связана с двоичной системой, которую использует ваш компьютер.

Числа в двоичной системе часто представляются в виде степеней двойки, а 16 — это 2^4. В общем, конвертировать числа шестнадцатеричной системы в двоичные (и обратно) просто удобно. Но сейчас мы этим заниматься не будем.

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

Из каких компонентов состоит цвет?

Как шестнадцатеричные коды используются для обозначения RGB-цветов? (RGB — цветовая модель, описывающая способ кодирования цвета для цветовоспроизведения с помощью трёх цветов, которые принято называть основными. Сама аббревиатура RGB расшифровывается как red, green, blue — красный, зелёный, синий. — Прим. ред. Techrocks).

Каждый пиксель цветного монитора состоит из трех светящихся элементов красного, зелёного и синего цвета. Если рассмотрите экран в большом приближении, вы их увидите (если экран древний, слишком напрягаться не придется). Цвета, которые вы видите на экране, образуются благодаря управлению яркостью каждого из этих элементов.

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

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

(Кстати, для максимального значения число 255 выбрано не случайно, а из-за удобства использования. Диапазон 0-255 (включая 0 и 255), — это 256 значений, а 256 — это 2^8. Просто еще один факт, который знать не обязательно).

К этому моменту внимательные читатели могли уже понять, насколько просто работать с цветами, представленными в такой форме. Черный цвет представляется как RGB (0,0,0), а белый — RGB (255,255,255). Ну а зеленый, соответственно, — RGB (0,255,0).

Hex-кодировка цветов

Теперь, зная, что в принципе означают коды цветов, давайте посмотрим на hex-коды. Возьмем, к примеру, #ff0000, и попробуем разобраться, что этот код означает.

Посмотрите на таблицу перевода чисел из шестнадцатеричной системы в десятичную, и вы увидите, что «FF» — это 255 в десятичной системе.

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

Исходя из этого, вы можете понять, что #ff0000 — то же самое, что RGB (255,0,0). То есть, чистый красный. Аналогично, #ff00ff — это максимум красного и одновременно синего, а вместе они дают пурпурный (magenta).

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

Эта система также означает, что вам доступна очень широкая палитра цветов, потому что каждый компонент может иметь любое значение, от 0 до 255. Попробуйте прикинуть количество вариантов, и вы поймете, что вам доступны 16777216 цветов.

Читайте также:  Потолочный светильник черно белого цвета

Как использовать сокращенные обозначения цвета

Разобравшись с hex-кодами, вы можете начать использовать их в своих веб-проектах — вместо пипетки в программе для выбора цвета.

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

Поскольку HTML проектировался так, чтобы им было удобно пользоваться, он допускает использование сокращенной записи hex-кодов. Например, код чистого красного цвета #FF0000 можно сократить до #F00. Одна цифра для красного, одна для зеленого и одна для синего. Браузеры интерпретируют #FF0000 и #F00 одинаково.

Такая запись сокращает доступное количество цветов до примерно 4 тысяч, но ее применение дает некоторые преимущества.

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

Почему стоит использовать hex-коды

Большинство конструкторов сайтов позволяют вводить hex-код вместо выбора цвета при помощи мыши. Такой подход имеет ряд преимуществ.

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

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

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

Дополнительные преимущества

Hex-коды применяются при работе с HTML, но не только. Практически все программы для работы с изображениями пользуются той же кодировкой. Таким образом, разобравшись, как работают hex-коды, вы получаете полезный и переносимый навык.

Источник

Теория цвета в цифрах

Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.

Основы

Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.

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

То есть величина чисел в парах означает количество цвета, проще говоря, если все числа максимальные, то в результате будет белый цвет — #FFFFFF, если числа минимальные, нули, то цвета нет, получается черный — #000000. Если изменять каждую пару, то получается: #FF0000 — самый яркий красный, #00FF00 — самый яркий зеленый и #0000FF — самый яркий синий. Соответственно, #00FFFF — самый яркий голубой, #FF00FF — самый яркий пурпурный и #FFFF00 — самый яркий желтый.

Распознавание цвета

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

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

Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы, кроме того, можно всегда произвести впечатление на коллег или клиентов, сказав «Ах, какой прекрасный оттенок бордового».

Можно также легко менять яркость, оттенок или насыщенность цвета, отредактировав лишь его шестнадцатеричный код. В первом примере ниже одна из пар меняется с шагом в 10%, при этом растет яркость цвета. Во втором примере яркость растет, но насыщенность падает:

Подчеркивание ссылок

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

  • Для темного текста на светлом фоне делаем ссылки ярче.
  • Для яркого текста на темном фоне делаем ссылки темнее.

Чтобы это работало, необходимо использовать тег span внутри каждого тега a, например:

Получившиеся ссылки легче читаются, т.к. подчеркивание не смешивается с символами. Однако добавлять span в каждую ссылку не очень рационально. Поэтому можно убрать подчеркивание ссылок, но при этом добавить border-bottom:

Читайте также:  Какого цвета полицейский свитер

Цвета контента

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

Уменьшение первых цифр в парах hex-кода повысит контрастность текста, а значит читабельность улучшится:

Редактирование фона

Легко управлять фоном, изменяя hex-код цвета:

  • #404040 — нейтральный
  • #504030 — теплее
  • #304050 — холоднее

Фон страницы визуально более чувствителен к изменениям цвета, чем контент. Поэтому можно легко сделать его теплее или холоднее, корректируя и вторую цифру в парах hex-кода. Например:

  • #404040 — нейтральный
  • #594039 — теплее
  • #394059 — холоднее

Подбор и комбинирование цветов

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

Источник

Цвета HTML

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

Значения цвета в HTML может быть задано одним из следующих способов.

  • RGB:
    в шестнадцатеричном коде (hex): #008800 или его сокращенном написании: #080 .
    в процентах: rgb(80%, 20%, 30%) ,
    числами от 0 до 255: rgb(240, 120, 10) .
  • По имени:
    Teal или teal (регистр значения не имеет).
  • HSL:
    в процентах: hsl(195, 60%, 40%) .
Стандарт W3C HTML 4.01 определяет имена 16 цветов:

Имя R G B H S L
white #ffffff 255, 255, 255 0°, 0%, 100%
silver #c0c0c0 192, 192, 192 0°, 0%, 75%
gray #808080 128, 128, 128 0°, 0%, 50%
black #000000 0, 0, 0 0°, 0%, 0%
red #ff0000 255, 0, 0 0°, 100%, 50%
maroon #800000 128, 0, 0 0°, 100%, 25%
fuchsia #ff00ff 255, 0, 255 300°, 100%, 50%
purple #800080 128, 0, 128 300°, 100%, 25%
lime #00ff00 0, 100, 0 120°, 100%, 50%
green #008000 0, 128, 0 120°, 100%, 25%
yellow #ffff00 255, 255, 0 60°, 100%, 50%
olive #808000 128, 128, 0 60°, 100%, 25%
aqua #00ffff 0, 255, 255 180°, 100%, 50%
teal #008080 0, 128, 128 180°, 100%, 25%
blue #0000ff 0, 0, 255 240°, 100%, 50%
navy #000080 0, 0, 128 240°, 100%, 25%

Согласно последним рекомендациям W3C, применение элементов и атрибутов HTML для указания цвета (к примеру: style=»color: #0000ff;» ) устарело, и в качестве альтернативы предложено использовать каскадные таблицы стилей — CSS.

Имена цветов CSS, SVG.

В отличие от Html, в котором стандартными являются 16 цветов, спецификации CSS и SVG, определяют более расширенный список имен, состоящий из 147 названий. Однако, несмотря на наличие в списке сто сорока семи наименований, оригинальные значения имеют только 138, так как все серые цвета могут быть указаны как через «a», так и через «e» (grAy или grEy), а fuchsia и aqua имеют альтернативные имена: magenta и cyan соответственно (последние не поддерживаются HTML 4.01).

Приведенная ниже таблица представляет имена цветов и их значения в HSL и HEX. При использовании имен, следует помнить, что синтаксис SVG отличается от HTML и CSS: атрибут fill, к примеру, применяется как к цвету текста (color), так и объекта (background-color), а stroke используются для задания контура (обводки) элемента.

Имя R G B H S L
white #ffffffhex 0°, 0%, 100%
ivory #fffff0hex 60°, 100%, 97%
lightyellow #ffffe0hex 60°, 100%, 94%
yellow #ffff00hex 60°, 100%, 50%
snow #fffafahex 0°, 100%, 99%
floralwhite #fffaf0hex 40°, 100%, 97%
lemonchiffon #fffacdhex 54°, 100%, 90%
cornsilk #fff8dchex 48°, 100%, 93%
seashell #fff5eehex 25°, 100%, 97%
lavenderblush #fff0f5hex 340°, 100%, 97%
papayawhip #ffefd5hex 37°, 100%, 92%
blanchedalmond #ffebcdhex 36°, 100%, 90%
mistyrose #ffe4e1hex 6°, 100%, 94%
bisque #ffe4c4hex 33°, 100%, 88%
moccasin #ffe4b5hex 38°, 100%, 86%
navajowhite #ffdeadhex 36°, 100%, 84%
peachpuff #ffdab9hex 28°, 27%, 100%
gold #ffd700hex 51°, 100%, 50%
pink #ffc0cbhex 350°, 100%, 88%
lightpink #ffb6c1hex 351°, 100%, 86%
orange #ffa500hex 39°, 100%, 50%
lightsalmon #ffa07ahex 17°, 100%, 74%
darkorange #ff8c00hex 33°, 100%, 50%
coral #ff7f50hex 16°, 100%, 66%
hotpink #ff69b4hex 330°, 100%, 71%
tomato #ff6347hex 9°, 100%, 64%
orangered #ff4500hex 16°, 100%, 50%
deeppink #ff1493hex 328°, 100%, 54%
magenta, fuchsia #ff00ffhex 300°, 100%, 50%
red #ff0000hex 0°, 100%, 50%
oldlace #fdf5e6hex 39°, 85%, 95%
lightgoldenrodyellow #fafad2hex 60°, 80%, 90%
linen #faf0e6hex 30°, 67%, 94%
antiquewhite #faebd7hex 34°, 78%, 91%
salmon #fa8072hex 6°, 93%, 71%
ghostwhite #f8f8ffhex 240°, 100%, 99%
mintcream #f5fffahex 150°, 100%, 98%
whitesmoke #f5f5f5hex 0°, 0%, 96%
beige #f5f5dchex 60°, 56%, 91%
wheat #f5deb3hex 39°, 77%, 83%
sandybrown #f4a460hex 28°, 87%, 67%
azure #f0ffffhex 180°, 100%, 97%
honeydew #f0fff0hex 120°, 100%, 97%
aliceblue #f0f8ffhex 208°, 100%, 97%
khaki #f0e68chex 54°, 77%, 75%
lightcoral #f08080hex 0°, 79%, 72%
palegoldenrod #eee8aahex 55°, 67%, 80%
violet #ee82eehex 300°, 76%, 72%
darksalmon #e9967ahex 15°, 72%, 70%
lavender #e6e6fahex 240°, 67%, 94%
lightcyan #e0ffffhex 180°, 100%, 94%
burlywood #deb887hex 34°, 57%, 70%
plum #dda0ddhex 300°, 47%, 75%
gainsboro #dcdcdchex 0°, 0%, 86%
crimson #dc143chex 348°, 83%, 47%
palevioletred #db7093hex 340°, 60%, 65%
goldenrod #daa520hex 43°, 74%, 49%
orchid #da70d6hex 302°, 59%, 65%
thistle #d8bfd8hex 300°, 24%, 80%
lightgray, lightgrey #d3d3d3hex 0°, 0%, 83%
tan #d2b48chex 34°, 44%, 67%
chocolate #d2691ehex 25°, 75%, 47%
peru #cd853fhex 30°, 59%, 53%
indianred #cd5c5chex 0°, 53%, 58%
mediumvioletred #c71585hex 322°, 81%, 43%
silver #c0c0c0hex 0°, 0%, 75%
darkkhaki #bdb76bhex 56°, 38%, 58%
rosybrown #bc8f8fhex 0°, 25%, 65%
mediumorchid #ba55d3hex 288°, 59%, 58%
darkgoldenrod #b8860bhex 43°, 89%, 38%
firebrick #b22222hex 0°, 68%, 42%
powderblue #b0e0e6hex 187°, 52%, 80%
lightsteelblue #b0c4dehex 214°, 41%, 78%
paleturquoise #afeeeehex 180°, 65%, 81%
greenyellow #adff2fhex 84°, 100%, 59%
lightblue #add8e6hex 195°, 53%, 79%
darkgray, darkgrey #a9a9a9hex 0°, 0%, 66%
brown #a52a2ahex 0°, 59%, 41%
sienna #a0522dhex 19°, 56%, 40%
yellowgreen #9acd32hex 80°, 61%, 50%
darkorchid #9932cchex 280°, 61%, 50%
palegreen #98fb98hex 120°, 93%, 79%
darkviolet #9400d3hex 282°, 100%, 41%
mediumpurple #9370dbhex 260°, 60%, 65%
lightgreen #90ee90hex 120°, 73%, 75%
darkseagreen #8fbc8fhex 120°, 25%, 65%
saddlebrown #8b4513hex 25°, 76%, 31%
darkmagenta #8b008bhex 300°, 100%, 27%
darkred #8b0000hex 0°, 100%, 27%
blueviolet #8a2be2hex 271°, 76%, 53%
lightskyblue #87cefahex 203°, 92%, 76%
skyblue #87ceebhex 197°, 71%, 73%
gray, grey #808080hex 0°, 0%, 50%
olive #808000hex 60°, 100%, 25%
purple #800080hex 300°, 100%, 25%
maroon #800000hex 0°, 100%, 25%
aquamarine #7fffd4hex 160°, 100%, 75%
chartreuse #7fff00hex 90°, 100%, 50%
lawngreen #7cfc00hex 91°, 100%, 4%
mediumslateblue #7b68eehex 249°, 80%, 67%
lightslategray, lightslategrey #778899hex 210°, 14%, 53%
slategray или slategrey #708090hex 210°, 13%, 50%
olivedrab #6b8e23hex 80°, 61%, 35%
slateblue #6a5acdhex 248°, 54%, 58%
dimgray, dimgrey #696969hex 0°, 0%, 41%
mediumaquamarine #66cdaahex 160°, 51%, 60%
rebeccapurple #663399hex 270°, 50%, 40%
cornflowerblue #6495edhex 219°, 79%, 66%
cadetblue #5f9ea0hex 182°, 26%, 50%
darkolivegreen #556b2fhex 82°, 39%, 30%
indigo #4b0082hex 275°, 100%, 26%
mediumturquoise #48d1cchex 178°, 60%, 55%
darkslateblue #483d8bhex 249°, 39%, 39%
steelblue #4682b4hex 207°, 44%, 49%
royalblue #4169e1hex 225°, 73%, 57%
turquoise #40e0d0hex 174°, 72%, 57%
mediumseagreen #3cb371hex 147°, 50%, 47%
limegreen #32cd32hex 120°, 61%, 50%
darkslategray, darkslategrey #2f4f4fhex 180°, 25%, 25%
seagreen #2e8b57hex 147°, 50%, 36%
forestgreen #228b22hex 120°, 61%, 34%
lightseagreen #20b2aahex 177°, 70%, 41%
dodgerblue #1e90ffhex 210°, 100%, 56%
midnightblue #191970hex 240°, 64%, 27%
aqua, cyan #00ffffhex 180°, 100%, 50%
springgreen #00ff7fhex 150°, 100%, 50%
lime #00ff00hex 120°, 100%, 50%
mediumspringgreen #00fa9ahex 157°, 100%, 49%
darkturquoise #00ced1hex 181°, 100%, 41%
deepskyblue #00bfffhex 195°, 100%, 50%
darkcyan #008b8bhex 180°, 100%, 27%
teal #008080hex 180°, 100%, 25%
green #008000hex 120°, 100%, 25%
darkgreen #006400hex 120°, 100%, 20%
blue #0000ffhex 240°, 100%, 50%
mediumblue #0000cdhex 240°, 100%, 40%
darkblue #00008bhex 240°, 100%, 27%
navy #000080hex 240°, 100%, 25%
black #000000hex 0°, 0%, 0%
Читайте также:  Ноутбук темно синего цвета

Для получения информации о других цветах и значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.

Источник