Hex код как выглядит
Перейти к содержимому

Hex код как выглядит

  • автор:

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

В HTML с помощью специального кода можно изменить цвет текста, фона, ссылки, шрифта, таблицы или всей страницы.

Цвет в HTML

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

  • по названию цвета: red , green , blue , gold , olive , magenta , cyan , brown и так далее
  • по шестнадцатеричному значению (hexadecimal number): от #000000 до #ffffff
  • по коду цвета в RGB палитре: от rgb(0, 0, 0) до rgb(255, 255, 255)

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

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

HEX код для цвета в HTML

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

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

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

— Точно. Для получения красного цвета нужно байту, отвечающий за красный цвет установить максимальное значение, а для остальных — минимальное: ##FF0000 .

— Тогда для зеленого HEX код будет таким: #00FF00.

RGB палитра HTML цветов

В RGB палитре цвет добавляется по такому же, принципу: задается интенсивность красного (red), зеленого (green) и синего (blue) цветов. От сюда и аббревиатура RGB. Только интенсивность указываться здесь числами 0 от 225, где 0 — самая низкая интенсивность, 225 — самая высокая. Для примера, зеленый цвет будет выглядеть следующим образом: rgb(0, 225, 0) ;

Все эти значения подходят и для других ситуаций, где нужен цвет, например в background-color .

Таблица из 140 HTML цветов с названиями и кодами (строка, HEX, rgb)

В этой таблице все HTML цвета у которых есть английское название и HTML код. Если ты хочешь стать FULL STACK JS разработчиком — регистрируйся бесплатно на мой курс по веб программированию

Цвет Название HTML Код HEX код RGB код
бордовый maroon #800000 (128,0,0)
темно-красный darkred #8B0000 (139,0,0)
коричневый brown #A52A2A (165,42,42)
кирпичный firebrick #B22222 (178,34,34)
малиновый crimson #DC143C (220,20,60)
красный red #FF0000 (255,0,0)
томатный tomato #FF6347 (255,99,71)
коралловый coral #FF7F50 (255,127,80)
индийский красный indianred #CD5C5C (205,92,92)
светлый коралл lightcoral #F08080 (240,128,128)
темный лосось darksalmon #E9967A (233,150,122)
лосось salmon #FA8072 (250,128,114)
светлый лосось lightsalmon #FFA07A (255,160,122)
оранжево-красный orangered #FF4500 (255,69,0)
темно-оранжевый darkorange #FF8C00 (255,140,0)
оранжевый orange #FFA500 (255,165,0)
золотой gold #FFD700 (255,215,0)
темно-золотой darkgoldenrod #B8860B (184,134,11)
золотистый goldenrod #DAA520 (218,165,32)
бледно-золотой palegoldenrod #EEE8AA (238,232,170)
темный хаки darkkhaki #BDB76B (189,183,107)
хаки khaki #F0E68C (240,230,140)
оливковый olive #808000 (128,128,0)
желтый yellow #FFFF00 (255,255,0)
желто-зеленый yellowgreen #9ACD32 (154,205,50)
темно-оливковый darkolivegreen #556B2F (85,107,47)
оливково-зеленый olivedrab #6B8E23 (107,142,35)
салатовый lawngreen #7CFC00 (124,252,0)
шартрез chartreuse #7FFF00 (127,255,0)
зелено-желтый greenyellow #ADFF2F (173,255,47)
темно-зеленый darkgreen #006400 (0,100,0)
зеленый green #008000 (0,128,0)
зеленый лес forestgreen #228B22 (34,139,34)
лайм lime #00FF00 (0,255,0)
зеленый лайм limegreen #32CD32 (50,205,50)
светло-зеленый lightgreen #90EE90 (144,238,144)
бледно-зеленый palegreen #98FB98 (152,251,152)
темно-зеленое море darkseagreen #8FBC8F (143,188,143)
средне-весенний зеленый mediumspringgreen #00FA9A (0,250,154)
весенний зеленый springgreen #00FF7F (0,255,127)
зеленое море seagreen #2E8B57 (46,139,87)
средний аквамарин mediumaquamarine #66CDAA (102,205,170)
средне-зеленое море mediumseagreen #3CB371 (60,179,113)
светло-зеленое море lightseagreen #20B2AA (32,178,170)
темно-серый darkslategray #2F4F4F (47,79,79)
бирюзовый teal #008080 (0,128,128)
темно-голубой darkcyan #008B8B (0,139,139)
вода aqua #00FFFF (0,255,255)
голубой cyan #00FFFF (0,255,255)
светло-голубой lightcyan #E0FFFF (224,255,255)
темно-бирюзовый darkturquoise #00CED1 (0,206,209)
бирюзовый turquoise #40E0D0 (64,224,208)
средне-бирюзовый mediumturquoise #48D1CC (72,209,204)
бледно-бирюзовый paleturquoise #AFEEEE (175,238,238)
аквамарин aquamarine #7FFFD4 (127,255,212)
синий порошок powderblue #B0E0E6 (176,224,230)
кадетский синий cadetblue #5F9EA0 (95,158,160)
стальной синий steelblue #4682B4 (70,130,180)
васильковый cornflowerblue #6495ED (100,149,237)
темно-голубой deepskyblue #00BFFF (0,191,255)
синеватый dodgerblue #1E90FF (30,144,255)
светло-синий lightblue #ADD8E6 (173,216,230)
небесный skyblue #87CEEB (135,206,235)
светло-небесный lightskyblue #87CEFA (135,206,250)
полуночно-синий midnightblue #191970 (25,25,112)
флот navy #000080 (0,0,128)
темно-синий darkblue #00008B (0,0,139)
средне-синий mediumblue #0000CD (0,0,205)
синий blue #0000FF (0,0,255)
королевский синий royalblue #4169E1 (65,105,225)
сине-фиолетовый blueviolet #8A2BE2 (138,43,226)
индиго indigo #4B0082 (75,0,130)
темно-грифельный синий darkslateblue #483D8B (72,61,139)
грифельно-синий slateblue #6A5ACD (106,90,205)
средне-грифельно синий mediumslateblue #7B68EE (123,104,238)
средне-фиолетовый mediumpurple #9370DB (147,112,219)
темно-пурпурный darkmagenta #8B008B (139,0,139)
темно-фиолетовый darkviolet #9400D3 (148,0,211)
темная орхидея darkorchid #9932CC (153,50,204)
средняя орхидея mediumorchid #BA55D3 (186,85,211)
фиолетовый purple #800080 (128,0,128)
чертополох thistle #D8BFD8 (216,191,216)
слива plum #DDA0DD (221,160,221)
лиловый violet #EE82EE (238,130,238)
фуксия fuchsia #FF00FF (255,0,255)
орхидея orchid #DA70D6 (218,112,214)
средне-фиолетовый красный mediumvioletred #C71585 (199,21,133)
бледно-фиолетовый красный palevioletred #DB7093 (219,112,147)
темно-розовый deeppink #FF1493 (255,20,147)
ярко-розовый hotpink #FF69B4 (255,105,180)
светло-розовый lightpink #FFB6C1 (255,182,193)
розовый pink #FFC0CB (255,192,203)
антично-белый antiquewhite #FAEBD7 (250,235,215)
бежевый beige #F5F5DC (245,245,220)
бисквит bisque #FFE4C4 (255,228,196)
бланшированный миндаль blanchedalmond #FFEBCD (255,235,205)
пшеничный wheat #F5DEB3 (245,222,179)
кукурузный шелк cornsilk #FFF8DC (255,248,220)
лимонный шифон lemonchiffon #FFFACD (255,250,205)
светло-золотой желтый lightgoldenrodyellow #FAFAD2 (250,250,210)
светло-желтый lightyellow #FFFFE0 (255,255,224)
коричневое седло saddlebrown #8B4513 (139,69,19)
сиенна sienna #A0522D (160,82,45)
шоколадный chocolate #D2691E (210,105,30)
перу peru #CD853F (205,133,63)
песочно-коричневый sandybrown #F4A460 (244,164,96)
крепкое дерево burlywood #DEB887 (222,184,135)
загар tan #D2B48C (210,180,140)
розово-коричневый rosybrown #BC8F8F (188,143,143)
мокасины moccasin #FFE4B5 (255,228,181)
белый навахо navajowhite #FFDEAD (255,222,173)
персиковый peachpuff #FFDAB9 (255,218,185)
туманная роза mistyrose #FFE4E1 (255,228,225)
лавандовый lavenderblush #FFF0F5 (255,240,245)
белье linen #FAF0E6 (250,240,230)
старое кружево oldlace #FDF5E6 (253,245,230)
папайа papayawhip #FFEFD5 (255,239,213)
морская ракушка seashell #FFF5EE (255,245,238)
мятный крем mintcream #F5FFFA (245,255,250)
серый шифер slategray #708090 (112,128,144)
светло-серый шифер lightslategray #778899 (119,136,153)
светло-стальной голубой lightsteelblue #B0C4DE (176,196,222)
лавандовый lavender #E6E6FA (230,230,250)
цветочно-белый floralwhite #FFFAF0 (255,250,240)
синяя алиса aliceblue #F0F8FF (240,248,255)
призрачно-белый ghostwhite #F8F8FF (248,248,255)
медовая роса honeydew #F0FFF0 (240,255,240)
слоновая кость ivory #FFFFF0 (255,255,240)
лазурный azure #F0FFFF (240,255,255)
снежный snow #FFFAFA (255,250,250)
черный black #000000 (0,0,0)
тускло-серый dimgray #696969 (105,105,105)
серый gray #808080 (128,128,128)
темно-серый darkgray #A9A9A9 (169,169,169)
серебристый silver #C0C0C0 (192,192,192)
светло-серый lightgray #D3D3D3 (211,211,211)
гейнсборо gainsboro #DCDCDC (220,220,220)
белый дым whitesmoke #F5F5F5 (245,245,245)
белый white #FFFFFF (255,255,255)

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

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

Основы

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

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

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

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

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

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

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

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

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

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

  • Для темного текста на светлом фоне делаем ссылки ярче.
  • Для яркого текста на темном фоне делаем ссылки темнее.
a < text-decoration:underline;color:#aaaaff; >a span

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

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

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

h1, p

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

h1 < color: #797979; >p

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

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

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

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

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

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

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

Использованный материал и полезное чтиво
  • Статья The Code Side Of Color на сайте Smashing Magazine
  • HTML Colors на W3C
  • Работа с цветом: полезные инструменты, книги, статьи для веб-дизайнеров на Хабре
  • html-color-codes.com

Как работают 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-значение может выглядеть так: 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-коды, вы получаете полезный и переносимый навык.

Цветовые коды HTML – HEX, RGB, RGBA, HSL и HSLA

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

Цвета HTML

Цвета HTML – это цвета, используемые для отображения веб-страниц в Интернете. Они тесно связаны с методами описания и определения этих цветов с использованием соответствующих цветовых кодов. Например, цвета HTML могут быть указаны как общепринятые английские имена цветов или с помощью значений HEX, триплетов RGB, значений HSL, RGBA и HSLA.

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

HTML-имена цветов

W3C спецификация имен цветов различает базовые и расширенные цвета. 16 основных цветов: цвет морской волны, черный, синий, фуксия, серый, зеленый, салатовый, темно-бордовый, темно-синий, оливковый, фиолетовый, красный, серебристый, бирюзовый, белый и желтый. Современные браузеры поддерживают 147 имен цветов HTML.

На рисунке показаны 16 основных цветов с кодами HEX и RGB:

Текст “16 основных цветов HTML с кодами HEX и RGB”

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

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

Цвета RGB

RGB (Red, Green, Blue) – это аддитивная цветовая модель, которая описывает, как любой цвет кодируется с помощью трех основных. Это основа цвета, отображаемого светом на экранах телевизоров, компьютерах, сканерах изображений, видеопроекторах, цифровых камерах и мобильных устройствах.

Текст “Цвета RGB как аддитивная цветовая модель”

Значения R, G и B представляют собой интенсивность (в диапазоне от 0 до 255) соответственно красного, зеленого и синего компонентов определяемого цвета. То есть ярко-синий цвет можно определить как (0,0,255), красный – как (255,0,0), ярко-зеленый – (0,255,0), черный – (0,0,0), а белый – ( 255 255 255). RGB – популярная модель цветового кода в фотографии, телевидении и компьютерной графике. Поскольку существует 256 различных вариантов количества для каждого цвета. Таким образом, всего может быть 256^3 = 16 777 216 различных цветов RGB. Смешивание этих трех цветов даст вам цветовой код RGB, представленный, например, как этот RGB(125,50,210).

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

Text “Куб RGB как графическая модель для представления цветовой системы RGB”

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

HEX-коды являются наиболее часто используемыми цветовыми кодами. HEX-коды представляют собой трехбайтовые шестнадцатеричные числа (шесть переменных). Шестизначный номер цвета состоит из трех групп по две цифры, которые определяют количество красного, зеленого и синего в аддитивном цвете. Каждая шестнадцатеричная пара из двух цифр может иметь значение от 00 до FF. Это дает более 16 миллионов возможных цветов.

Код выражается следующим образом: #RRGGBB, где каждое из двузначных значений представляет собой диапазон каждого из трех цветов (Red, Green, Blue), с помощью которого вы выбираете окончательное значение, представляющее каждый цвет. Например, #00FF00 отображается зеленым, потому что для зеленого компонента установлено максимальное значение (FF), а для остальных установлено значение 00.

Цвета RGBA

Цветовые значения RGBA(Red, Green, Blue, Alpha) являются расширением цветовых значений RGB с альфа-каналом, определяющим непрозрачность цвета. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный». Например, rgba(255, 0, 0) отображается как чистый красный цвет, rgba(255, 0, 0, 0,5) отображается как красный цвет с непрозрачностью 50%.

На рисунке показаны значения RGBA названия цвета «YellowGreen» с разной прозрачностью:

Text “Значения RGBA названия цвета “YellowGreen”, с разной прозрачностью”

Для значения RGBA, в отличие от значений RGB, нет шестнадцатеричной записи.

Цвета HSL

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

На рисунке показана трехмерная графическая интерпретация модели HSL (а), изображение взято с сайта commons.wikimedia.org/wiki/. На рисунке (b) показана двухмерная графическая интерпретация модели HSL для значения яркости 50%.

Текст “Цветовая модель HSL”

HSL – это представление цветовой модели RGB в цилиндрических координатах. Оттенок (Hue) определяет основной цвет. Оттенок – это практически любой цвет на цветовом круге; это градус на цветовом круге от 0 до 360. Итак, 0 – красный, 120 – зеленый, 240 – синий. Насыщенность (Saturation) – это интенсивность или чистота цвета. Она определяет, насколько ярким будет цвет. Ноль процентов – серый, а 100 процентов – полностью насыщенный цвет. Яркость (Lightness) – это количество яркости или света в цвете. Яркость определяет, насколько черный или белый оттенок имеет цвет. Например, 50 процентов яркости — это «нормальный цвет», который не имеют оттенка, ноль процентов – полностью черный, а 100 процентов – полностью белый цвет.

Примеры цветов HSL

В таблице ниже представлен один оттенок. Красный цвет был выбран из цветового круга. Оттенок (Hue)=0. Ось X таблицы представляет насыщенность (Saturation) (100%, 75%, 50%, 25%, 0%). Ось Y представляет Lightness. 50% – это «нормально».

Текст “Примеры HSL: набор разных цветов для Hue=0, Red”

Цвета HSLA

Цветовые значения HSLA(Hue, Saturation, Lightness, Alpha) являются расширением цветовых значений HSL с альфа-каналом, определяющим непрозрачность цвета. Значение цвета HSLA указывается с оттенком, насыщенностью, яркостью и альфа-каналом, где параметр альфа определяет непрозрачность. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный». Например, hsla(0, 100%, 50%, 1) отображается чисто красным, hsla(0, 100%, 50%, 0,5) отображается красным с непрозрачностью 50%:

Текст “Цветовые коды HSLA для красного с разной непрозрачностью”

Заключение

Цвета HTML можно определить по имени, значениям RGB, RGBA, HEX, HSL или HSLA и применить к фону или тексту в документах HTML.

На рисунке ниже показано, как указать бирюзовый цвет по имени, значениям RGB, RGBA, HEX, HSL и HSLA:

Текст “Цвет бирюзового цвета представлен именем, значениями HEX, RGB, RGBA, HSL и HSLA”

Aspose.HTML предлагает бесплатную онлайн-программу Color Wheel Picker, которая позволяет создавать наборы цветов в цветовом коде HEX. Вы можете использовать это бесплатное онлайн-приложение, чтобы найти цветовые гармонии, используя правила сочетания цветов, но также важно экспериментировать с цветом. Color Wheel Picker предлагает отличный способ поэкспериментировать с цветом и самостоятельно создавать захватывающие цветовые комбинации. Приложение работает для компьютеров, планшетов и мобильных устройств. Так что создавайте свою уникальную палитру для любого проекта!

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

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