Теория цвета
Каждый цвет на экране можно описать тремя числами. В этом курсе ты построишь куб RGB и цилиндр HSL в 3D, увидишь расположение комплементарных цветов и цветовых триад на цветовом круге, смешаешь свет и печатные краски и вычислишь коэффициент контраста WCAG, по которому можно судить о читаемости текста.
О курсе
В 1660-е годы Исаак Ньютон начал пропускать солнечный свет через стеклянные призмы в затемнённой комнате. Он показал, что белый свет представляет собой полосу цветов, а вторая призма не может разложить эти цвета дальше. В книге «Оптика» 1704 года он замкнул полосу в круг, разделил его край на семь частей в пропорциях музыкального звукоряда и поместил белый цвет в центре. Этот рисунок — один из первых цветовых кругов, и от него происходят все круги цветового тона в этом курсе. Любой цвет на экране задаётся тремя числами, а в сетчатке глаза около 6 миллионов колбочек всего трёх видов.
Семь уроков начинаются с того, как мы видим цвет, затем идут RGB и шестнадцатеричные коды: по 256 уровней красного, зелёного и синего дают 16 777 216 цветов, каждый из которых занимает свою точку внутри куба. В 1861 году Максвелл показал в Королевском институте клетчатую ленту, снятую через красный, зелёный и синий фильтры. Этот трёхканальный способ до сих пор используют все цифровые камеры и экраны. Урок «Тон, насыщенность и светлота» объясняет, что у жёлтого и синего в HSL светлота равна 50%, хотя жёлтый отражает почти в 13 раз больше света. Комплементарные, родственные и триадные цвета размещаются на цветовом круге. В уроке об аддитивном и субтрактивном смешении упоминается Coloritto Якоба Кристофа Леблона, изданная около 1722 года: Смитсоновский институт называет её первым письменным изложением обеих идей. Урок о коэффициенте контраста показывает, что серый #767676 на белом фоне с отношением 4.54:1 проходит минимум WCAG для основного текста, а #777777 с 4.48:1 уже нет. В последнем уроке отмечается, что около 8 процентов мужчин плохо различают красный и зелёный. В лаборатории 3D можно построить куб RGB и цилиндр HSL.
Перед началом
Сравнивать цвета по числам полезно, когда два образца похожи, но ведут себя по-разному. Уроки вводят RGB и шестнадцатеричные коды перед HSL, цветовыми сочетаниями и контрастом. Различай смешение экранного света и красок: одинаковые названия цветов не означают одинакового результата.
Когда закончишь
Ты сможешь читать значения RGB и шестнадцатеричные коды, менять тон, насыщенность и светлоту, выбирать дополнительные, аналогичные и триадные цвета. Ты отличишь аддитивное смешение света от субтрактивного смешения красок, проверишь контраст текста по WCAG и объяснишь, почему одного цвета недостаточно для обозначения ошибки в форме.
- 1Как мы видим цветВ сетчатке около 6 миллионов колбочек всего трёх видов. Каждый цвет, который ты когда-либо видел, возникает благодаря сочетанию сигналов от этих трёх видов колбочек, реагирующих с разной силой.
- 2RGB и шестнадцатеричные кодыПри 256 уровнях красного, зелёного и синего экран может воспроизвести 256 × 256 × 256 = 16 777 216 цветов, и каждому из них соответствует точка внутри куба.
- 3Тон, насыщенность и светлотаВ HSL у жёлтого и синего светлота 50%, но по формуле яркости WCAG жёлтый отражает почти в 13 раз больше света, чем синий.
- 4Комплементарные, родственные и триадные цветаНа экранном цветовом круге синему при 240 градусах соответствует комплементарный жёлтый при 60 градусах, а на круге художника напротив синего находится оранжевый.
- 5Аддитивное и субтрактивное смешениеГолубая краска на белой бумаге поглощает красный свет, поэтому голубая и пурпурная, напечатанные одна поверх другой, оставляют только синий.
- 6Коэффициент контраста и читаемый текстСерый #767676 на белом имеет коэффициент контраста 4.54:1 и соответствует минимуму WCAG для основного текста; на шаг светлее, #777777, даёт 4.48:1 и не проходит.
- 7Цвет в дизайнеОколо 8 процентов мужчин имеют красно-зелёное нарушение цветового зрения, поэтому форма, которая отмечает ошибки только красным, заставляет многих из них гадать, где ошибка.
Источники курса (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