RGB и шестнадцатеричные коды

При 256 уровнях красного, зелёного и синего экран может воспроизвести 256 × 256 × 256 = 16 777 216 цветов, и каждому из них соответствует точка внутри куба.

Загружается 3D-модель

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

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

Три числа, три оси

В цветовом пространстве sRGB, которое используется в вебе, цвет записывается тремя значениями каналов: красный, зелёный и синий. В обычном коде каждый канал — целое число от 0 до 255, то есть диапазон, помещающийся в восемь бит. Канал 0 означает, что этот свет выключен. Канал 255 означает, что он включён полностью. Так rgb(255 0 0) — самый сильный красный, который может показать экран, rgb(0 0 0) — чёрный, а rgb(255 255 255) — белый.

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

Пунктирная линия от чёрного к белому — это ось серых. У каждой её точки красный, зелёный и синий равны, например rgb(128 128 128). Цвета вдали от этой линии насыщенные, цвета рядом с ней сероватые. Это первый намёк на идею модели HSL в следующем уроке: расстояние от оси серых — мера того, насколько цвет красочный.

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

CSS также позволяет записывать те же три числа в шестнадцатеричной системе после знака #. Шестнадцатеричная запись считает шестнадцатками, используя цифры от 0 до 9 и буквы от a до f, где a — это 10, а f — 15. Две шестнадцатеричные цифры покрывают 16 × 16 = 256 значений, ровно один канал. Поэтому шестизначный код — это три пары: красный, зелёный, синий. CSS Color 4 отмечает, что регистр букв не важен, поэтому #00ff00 и #00FF00 — один цвет.

Код #2273c3, разбитый на три канала. Первая цифра каждой пары задаёт число групп по шестнадцать, вторая — единицы.

Чтобы прочитать пару, умножь первую цифру на 16 и прибавь вторую. Для c3 это 12 × 16 + 3 = 195. Для ff это 15 × 16 + 15 = 255, максимум. Для 80 это 8 × 16 = 128, почти ровно половина. Трёхзначный код вроде #f80 — сокращение: каждая цифра записывается два раза подряд, поэтому #f80 означает #ff8800. Введи код в поле «Шестнадцатеричный код» под моделью, и маркер перепрыгнет в эту точку куба.

КонтекстИдею построения любого цвета из трёх отфильтрованных изображений публично показали в 1861 году. На лекции в Royal Institution в Лондоне Джеймс Клерк Максвелл представил фотографию шотландской клетчатой ленты. Фотограф Томас Саттон снял её трижды, через красный, зелёный и синий фильтры. Затем каждый снимок проецировали через тот же фильтр, через который он был снят, и три проекции накладывали друг на друга на экране. Пластины были далеки от совершенства, но метод трёх отфильтрованных каналов — тот, что по-прежнему используют все цифровые камеры и экраны.

Цвет	rgb()	Hex
Чёрный	rgb(0 0 0)	#000000
Белый	rgb(255 255 255)	#ffffff
Красный	rgb(255 0 0)	#ff0000
Жёлтый	rgb(255 255 0)	#ffff00
Голубой	rgb(0 255 255)	#00ffff
Средний серый	rgb(128 128 128)	#808080

#ff0000	Красный, rgb(255 0 0)
#00ffff	Голубой, rgb(0 255 255)
#ff00ff	Пурпурный, rgb(255 0 255)
#ffff00	Жёлтый, rgb(255 255 0)
#808080	Средний серый, rgb(128 128 128)
#000	Чёрный, сокращение от #000000

Главное

Цвета sRGB — три канала, каждый от 0 до 255.
В кубе RGB чёрный и белый находятся в противоположных углах, а между ними ось серых.
Шестнадцатеричный код — это три пары цифр по основанию 16: красный, зелёный, синий.
256³ = 16 777 216 цветов.

Сколько значений может принимать один 8-битный канал?
Сколько цветов может задать 8-битный RGB?
Чему равна шестнадцатеричная пара c3 в десятичной записи?
Чему равен красный канал #a8581b в десятичной записи?
Запиши белый шестизначным шестнадцатеричным кодом.
Какой цвет — #00ffff?
- Голубой
- Жёлтый
- Пурпурный
- Синий
Что означает короткий код #f80?
- #ff8800
- #f80000
- #0f0800
- #f8f8f8
Какой угол куба RGB противоположен чёрному?
- Белый
- Красный
- Синий
- Серый
Что из этого лежит на оси серых куба?
- rgb(90 90 90)
- rgb(90 0 90)
- rgb(255 90 90)
- rgb(0 0 90)
Одинаковый ли цвет в CSS у #00ff00 и #00FF00?
- Да
- Нет
- Только в некоторых браузерах
- Только в печати
В каком году Максвелл показал цветную фотографию из трёх фильтров?

Источники курса (14)

W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
contrast ratio (L1 + 0.05) / (L2 + 0.05)
range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
The Newton Project (University of Oxford)
Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

Проверено: 2026-10-17