Цвет в 16 ричной системе исчисления онлайн. RGB — что это

— творческий процесс. Результат этой творческой работы — нужная и полезная информация. Но информацию недостаточно просто выложить, ее нужно оформить так, чтобы она выделилась среди общей массы. И обеспечит нам профессиональное и грамотное оформление знание правил и основ .

Если Вы зарабатываете в Интернете, знание Вам понадобится практически везде. И неважно, видите ли Вы себя профессиональным вебдизайнером в будущем, или просто хотите научиться оформлять красиво одностраничные сайты и — Вам все равно вебдизайн необходим.

Цель вебдизайнера — грамотное и профессиональное оформление сайта. От оформления очень многое зависит, недаром профессия вебдизайнера — одна из самых престижных и высокооплачиваемых.

Каким образом сайт создается?

1. Сначала Вы формируете графический образ сайта.
2. Затем Вы воплощаете замысел в реальность с помощью различных программ.
3. Размещаете графику на сайте, наполняете сайт содержанием, и отправляете в Интернет.

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

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

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

Палитра 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-ричной системе.

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:

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

Здесь вашему вниманию предлагаются две очень полезные таблицы цветов в помощь вэб-мастеру.

Таблица безопасных цветов сайта

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

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

В разных браузерах работают разные алгоритмы такой замены. Например, бывает, что браузер просто находит ближайший цвет по его шестизначному номеру в 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 данных цветов.

HEX / HTML

Цвет в формате HEX - это ни что иное, как шестнадцатеричное представление RGB.

Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 - красный, 22 - зелёный, 33 - синий. Все значения должны быть между 00 и FF.

Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.

1. h1 { color: #ff0000; } /* красный */
2. h2 { color: #00ff00; } /* зелёный */
3. h3 { color: #0000ff; } /* синий */
4. h4 { color: #00f; } /* тот же синий, сокращённая запись */

RGB

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

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

Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).

1. h1 { color: rgb(255, 0, 0); } /* красный */
2. h2 { color: rgb(0, 255, 0); } /* зелёный */
3. h3 { color: rgb(0, 0, 255); } /* синий */
4. h4 { color: rgb(0%, 0%, 100%); } /* тот же синий, процентная запись */

Цветовые значения RGB поддерживаются во всех основных браузерах.

RGBA

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

Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

1. h1 { color: rgb(0, 0, 255); } /* синий в обычном RGB */
2. h2 { color: rgba(0, 0, 255, 1); } /* тот же синий в RGBA, потому как непрозрачность: 100% */
3. h3 { color: rgba(0, 0, 255, 0.5); } /* непрозрачность: 50% */
4. h4 { color: rgba(0, 0, 255, .155); } /* непрозрачность: 15.5% */
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%).

1. h1 { color: hsl(120, 100%, 50%); } /* зелёный */
2. h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
3. h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
4. 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 (полностью непрозрачный).

1. h1 { color: hsl(120, 100%, 50%); } /* зелёный в обычном HSL */
2. h2 { color: hsla(120, 100%, 50%, 1); } /* тот же зелёный в HSLA, потому как непрозрачность: 100% */
3. h3 { color: hsla(120, 100%, 50%, 0.5); } /* непрозрачность: 50% */
4. h4 { color: hsla(120, 100%, 50%, .155); } /* непрозрачность: 15.5% */
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).

Табл. 2. Десятичные и шестнадцатеричные числа больше 16

Десятичные	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