Цвет в 16 ричной системе исчисления зеленый
— творческий процесс. Результат этой творческой работы — нужная и полезная информация. Но информацию недостаточно просто выложить, ее нужно оформить так, чтобы она выделилась среди общей массы. И обеспечит нам профессиональное и грамотное оформление знание правил и основ .
Если Вы зарабатываете в Интернете, знание Вам понадобится практически везде. И неважно, видите ли Вы себя профессиональным вебдизайнером в будущем, или просто хотите научиться оформлять красиво одностраничные сайты и — Вам все равно вебдизайн необходим.
Цель вебдизайнера — грамотное и профессиональное оформление сайта. От оформления очень многое зависит, недаром профессия вебдизайнера — одна из самых престижных и высокооплачиваемых.
Каким образом сайт создается?
- Сначала Вы формируете графический образ сайта.
- Затем Вы воплощаете замысел в реальность с помощью различных программ.
- Размещаете графику на сайте, наполняете сайт содержанием, и отправляете в Интернет.
Вебдизайнер должен уметь создавать графику и анимацию : картинки, трехмерные изображения, движущиеся картинки и ролики, баннеры, должен уметь организовывать наилучшим образом пространство, цвет и структуру сайта .
Для начала поговорим о том, что такое цвет . Если белый цвет падает на белый предмет, от него отражаются все лучи, и мы видим, что предмет белого цвета. Если белый цвет падает на зеленый предмет, все лучи поглощаются кроме зеленых. Зеленые лучи не поглощаются, а отражаются, и мы видим, что предмет — зеленый. Точно так же мы видим все остальные цвета: красный, синий, желтый — это лучи тех цветов, которые отразились. Черные предметы поглощают все лучи, и мы наблюдаем отсутствие цвета — черный цвет.
В мониторах компьютера используется . Именно с помощью этой палитры создается все многообразие цветов, которое мы видим на экране.
Палитра RGB использует три цвета:
- R (red) красный
- G (green) зеленый
- B (blue) синий
Это цвета излучающие. Смешение этих цветов дает новые цвета:
- Y — yellow (желтый)
- C — cyan (голубой)
- M — magenta (пурпурный)
В палитре RGB каждый из этих трех компонентов может принимать значения от 0 до 255 (всего 256 цветов).
RGB(255;255;255) — белый цвет, интенсивность излучения всех трех цветов максимальная
RGB(0;0;0) — черный цвет.
Таким образом, мы в этой системе можем получить абсолютно любой цвет.
Кроме десятеричной системы , в палитре RGB применяется еще и 16-ричная система исчисления . Интенсивность каждого цвета измеряется в 16-ричной системе цифрами от 00 до FF. При этом применяется 16 цифр: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F .
Число 10 в десятеричной системе записывается как A в шестнадцатеричной системе, 11 — как B , а 16 — как 10 . Двумя цифрами в 16-ричной системе можно записать при этом гораздо большее число, чем в 10-ричной системе. Если в 10-ричной системе 99 — это 10 раз по 10 (включая 0), то в 16-ричной системе максимальное двухзначное число: FF — это 16 раз по 16 (то есть 256).
Цвет в шестнадцатеричной системе записывается тремя двухзначными числами:
- 1-е двухзначное число — интенсивность красного цвета
- 2-е двухзначное число — интенсивность зеленого цвета
- 3-е двухзначное число — интенсивность синего цвета
Например:
Давайте теперь научимся определять цвета. В этом нам поможет . Запускаете ее, и выбираете пипетку. Кликаете пипеткой по тому месту экрана, цвет которого хотите определить. Смотрите результаты, причем они будут Вам показаны и в десятеричной, и в 16-ричной системе.
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
HEX / HTML
Цвет в формате HEX - это ни что иное, как шестнадцатеричное представление RGB.
Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 - красный, 22 - зелёный, 33 - синий. Все значения должны быть между 00 и FF.
Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.
- h1 { color: #ff0000; } /* красный */
- h2 { color: #00ff00; } /* зелёный */
- h3 { color: #0000ff; } /* синий */
- h4 { color: #00f; } /* тот же синий, сокращённая запись */
RGB
Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.
Значения RGB задаются целым числом от 0 до 255. Например, rgb(0,0,255) отображается как синий, так как синий параметр установлен в его самое высокое значение (255), а остальные установлены в 0.
Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).
- h1 { color: rgb(255, 0, 0); } /* красный */
- h2 { color: rgb(0, 255, 0); } /* зелёный */
- h3 { color: rgb(0, 0, 255); } /* синий */
- h4 { color: rgb(0%, 0%, 100%); } /* тот же синий, процентная запись */
Цветовые значения RGB поддерживаются во всех основных браузерах.
RGBA
С недавних пор современные браузеры научились работать с цветовой моделью RGBA - расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.
Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
- h1 { color: rgb(0, 0, 255); } /* синий в обычном RGB */
- h2 { color: rgba(0, 0, 255, 1); } /* тот же синий в RGBA, потому как непрозрачность: 100% */
- h3 { color: rgba(0, 0, 255, 0.5); } /* непрозрачность: 50% */
- h4 { color: rgba(0, 0, 255, .155); } /* непрозрачность: 15.5% */
- h5 { color: rgba(0, 0, 255, 0); } /* полностью прозрачный */
RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.
HSL
Цветовая модель HSL является представлением модели RGB в цилиндрической системе координат. HSL представляет цвета более интуитивным и понятным для восприятия образом, чем типичное RGB. Модель часто используется в графических приложениях, в палитрах цветов, и для анализа изображений.
HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).
- h1 { color: hsl(120, 100%, 50%); } /* зелёный */
- h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
- h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
- h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */
HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.
HSLA
По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.
Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
- h1 { color: hsl(120, 100%, 50%); } /* зелёный в обычном HSL */
- h2 { color: hsla(120, 100%, 50%, 1); } /* тот же зелёный в HSLA, потому как непрозрачность: 100% */
- h3 { color: hsla(120, 100%, 50%, 0.5); } /* непрозрачность: 50% */
- h4 { color: hsla(120, 100%, 50%, .155); } /* непрозрачность: 15.5% */
- h5 { color: hsla(120, 100%, 50%, 0); } /* полностью прозрачный */
CMYK
Цветовая модель CMYK часто ассоциируется с цветной печатью, с полиграфией. CMYK (в отличие от RGB) является субтрактивной моделью, это означает что более высокие значения связаны с более тёмными цветами.
Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).
Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).
Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 - жёлтой краски, и 46 - чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).
HSB / HSV
HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.
HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).
XYZ
Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.
LAB
Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.
Для задания цветов на веб-странице применяется три способа: первый использует обозначения цветов в шестнадцатеричном коде, второй — десятичном, а третий — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Десятичная система, хотя и более привычна для представления, находит применение только с помощью CSS.
Шестнадцатеричные цвета
Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. В табл. 1 приведено соответствие десятичных и шестнадцатеричных чисел.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной (табл. 2).
Десятичные | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Шестнадцатеричные | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C | 1D | 1E | 1F |
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999.
Типичный цвет, используемый в HTML, выглядит следующим образом.
Цвет фона задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA ) определяют красную составляющую цвета, цифры с третьей по четвертую (8E ) — зеленую, а последние две цифры (47 ) — синюю. В итоге получится такой цвет.
FA | + | 8E | + | 47 | = | FA8E47 |
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, в модели RGB количество цветом может быть 256 х 256 х 256 = 16.777.216 комбинаций.
Веб-цвета
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселей других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру, так называемых, веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зелёной и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Названия цветов
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов.
Ниже в таблице приведены 16 основных названий цветов, используемых во всех браузерах.
Название | Цвет | Hex | Красный (R) | Зеленый (G) | Синий (B) |
---|---|---|---|---|---|
aqua | #00FFFF | 00 | 255 | 255 | |
black | #000000 | 00 | 00 | 00 | |
blue | #0000FF | 00 | 00 | 255 | |
fuchsia | #FF00FF | 255 | 00 | 255 | |
gray | #808080 | 128 | 128 | 128 | |
green | #008000 | 00 | 128 | 00 | |
lime | #00FF00 | 00 | 255 | 00 | |
maroon | #800000 | 128 | 00 | 00 | |
navy | #000080 | 00 | 00 | 128 | |
olive | #808000 | 128 | 128 | 00 | |
purple | #800080 | 128 | 00 | 128 | |
red | #FF0000 | 255 | 00 | 00 | |
silver | #C0C0C0 | 192 | 192 | 192 | |
teal | #008080 | 00 | 128 | 128 | |
white | #FFFFFF | 255 | 255 | 255 | |
yellow | #FFFF00 | 255 | 255 | 00 |
Здесь вашему вниманию предлагаются две очень полезные таблицы цветов в помощь вэб-мастеру.
Таблица безопасных цветов сайта
Вэб-мастер иногда сталкивается с такой проблемой, когда у него в компьютере сайт выглядит очень хорошо и красиво, а вот в компьютерах других людей цвета имеют какие-то другие оттенки. Дело может дойти до того, что оттенки цветов могут выглядеть очень даже неприятно и отталкивающе.
Причина в том, что у людей стоят разные браузеры, разные мониторы и разные видеокарты. Это всё приводит к тому, что цветопередача цветовых оттенков Вашего сайта будет отличаться от того, что видите Вы на своем оборудовании и в тех браузерах, в которых Вы проверяете, как выглядит Ваш сайт. Допустим, Вы используете на своем сайте такой цвет, который не поддерживает видеокарта и установки монитора пользователя. В этом случае браузер пользователя, при выводе страницы на экран, заменяет Ваш оригинальный цвет на другой.
В разных браузерах работают разные алгоритмы такой замены. Например, бывает, что браузер просто находит ближайший цвет по его шестизначному номеру в 16-ричной кодировке HTML. Причем, бывают разные алгоритмы поиска ближайшего номера. Или бывает, что браузер переводит номер цвета HTML в номер цвета RGB и ищет ближайший номер по кодировке RGB. А есть и еще более сложные алгоритмы. Например, браузер может найти не один ближайший цвет, а несколько ближайших цветов с "разных" сторон цветовой шкалы и вывести на экран смесь этих цветов в пропорциях зависящих от расстояния до нужного цвета по осям измерения в цветовом пространстве.
Такие алгоритмы не всегда дают хороший результат. Иногда на экране получается совсем не то, что было задумано. Поэтому при выборе цвета в вэб-дизайне нужно проявлять очень большую осторожность.
К счастью существует список безопасных базовых цветов. Это те базовые цвета, которые присутствуют даже в самых стареньких мониторах и видеокартах. Поэтому, если Вы используете эти цвета на своем сайте, то Вы имеете 100% гарантию, что точно такая же цветовая гамма будет у всех других пользователей Интернета, которые зайдут на Ваш сайт. Их браузерам не придется заниматься подбором цветов через свои алгоритмы.
Здесь можно посмотреть эту таблицу безопасных цветов Интернета . Таблица позаимствована с сайта дизайн-студии Артемия Лебедева . Всего 216 базовых цветов, которые всегда и везде отображаются одинаково и без искажений.
В таблице над каждым цветом указаны два значения. Первое значение (три числа от 0 до 255, разделенные точкой) это номер цвета в шкале RGB, для того, чтобы Вы могли создавать эти цвета в каком-нибудь графическом редакторе, типа PhotoShop или CorelDRAW и HEX (для обозначения цвета в HTML). Второе значение (6-значное число в 16-ричной системе исчисления) это номера цветов в HTML, для того, чтобы Вы могли использовать эти цвета в атрибутах типа "color" в html-тэгах.
Таблица названий цветов
Конечно же, изучая html-коды каких-нибудь сайтов, Вы иногда видели, что цвета не всегда задаются числовым кодом. Иногда цвета задаются английскими словами. Например, вместо атрибута color="#ff0000" можно написать color="red" . И результат будет одинаковый.
Действительно, очень многие цвета в HTML имеют свои английские названия. Но в русскоязычных учебниках по HTML очень редко приводится полный список таких цветов. На самом деле, чем больше Вы дружите с английским языком, тем более удобно для Вас знать названия цветов и удобнее употреблять в html-коде не 16-ричные числа, которые очень трудно запомнить, а имена цветов.
Попробуйте, например, запомнить номера 100 оттенков серого цвета в порядке уменьшения доли черного и возрастания доли белого цвета. Причем, запомнить их так, чтобы соседние цвета в списке отличались на один процент. Это просто невозможно. Поэтому Вам придется каждый раз лазить смотреть какие-нибудь таблицы цветов, откуда брать номера нужного серого цвета.
Гораздо проще запомнить, что серый цвет называется словом gray , после которого идет целое число, которое показывает долю белого цвета. Например, атрибут color="gray8" означает, что будет выводиться серый цвет, в котором 8% белого (и 92% черного). И это запомнить проще, чем color="#141414" . Или если, например, надо вывести серый цвет с 63% белого (и 37% черного), то проще написать в атрибуте тэга gray63 , а не #a1a1a1 .
Здесь можно посмотреть эту таблицу соответствия цветов и их имен . Не факт, что Вы запомните все эти имена, но Вы ощутите огромное удобство, если будете писать не 16-иричные числа, а слова. Особенно, если Вам придется разбираться с Вашими старыми html-кодами, написанными несколько месяцев или даже несколько лет назад. Да и словарный запас английских слов у Вас также повысится.
В этой таблице также даны коды RGB и коды HTML данных цветов.
Многим нужны цвета в 16-ричной системе исчисления для разных целей, начиная дизайном, заканчивая версткой или программированием. Такая палитра насчитывает 16777216 наименований (166). А располагаются они в диапазоне от 00 до FF (Это соответствует 255 в десятичной системе).
Как записываются цвета в 16-ричной системе? Цвета в такой палитре записывается при помощи следующей кодировки:
Записываются они не сложно, однако запоминать их не стоит, если, конечно, это не часто используемые цвета, например, «#ffffff», что соответствует белому тону.
Кодировки цветов
Кодировок цветов в 16-ричной системе очень много, и запомнить их невозможно. В основном, используется всего 147 имен для HTML и CSS. Они представлены в следующем списке.
Таких цветов вполне достаточно для повседневных дизайнерских нужд, однако существует множество других.
Также существует 32-битная цветовая глубина, но разницы между количеством оттенков нет. Отличие лишь в так называемом trueColor, который чаще используется для отображения прозрачности изображения (или же просто лишние восемь бит находятся в буфере и никак не используются).
RGB — что это?
Такая система немного попроще, потому что тут нет сложных кодировок. Цвет в этой системе записывается при помощи трех чисел — от 000 до 255. (Так например, «000, 000, 000» будет соответствовать черному, а «255, 255, 255» — белому.) В этой классификации, почти как и в любой другой, все связано с тремя основными цветами: красный, зеленый, синий, а оттенок зависит от числа, которое соответствует определенному варианту. Это можно сравнить со смешиванием красок.
Также стоит отметить, что цвета в 16-ричной системе также являются RGB, однако имеют другую запись и чаще применяются в компьютерных технологиях.
Какие еще существуют цветовые системы?
Кроме RGB и 16-ричной системы, существует еще и так называемый CMYK, что расшифровывается как:
- C — Cyan;
- M — Magenta;
- Y — Yellow;
- K — Key color, или же BlacK по другой версии.
Однако стоит отметить, что количество цветов в CMYK заметно меньше. Связано это с тем, что у CMYK частота красок более низкая по сравнению с RGB.
Заключение
Существует несколько цветовых систем, которые отображают краски, однако чаще всего используется RGB и CMYK. У каждого цвета есть своя глубина, которая показывает количество оттенков в палитре. Однако 32-битная глубина не отличается по количеству красок от 16-битной. В ней лишь присутствует прозрачность, под которую резервируется восемь бит.
В статье подробно разобраны цвета в 16-ричной системе исчисления, а также рассказано о палитрах, с которыми вы сможете столкнуться при работе с изображениями. Удачи и успехов в творческих начинаниях!