BulatikВ этом посте разберём что такое цвет, как работает пиксель и многое другое.
Поехали!
Что такое цвет?
По сути,
цвет - это ощущение, которое рождается в нашем мозгу. Физически существуют только электромагнитные волны разной длины, а цвет — это их субъективная интерпретация.
Это простое определение, но нам больше и не надо.
А что в мониторах?
Картинка на мониторе образуется тремя цветами: красный (R), зеленый (G) и синий (B) - RGB. Один светодиод в пикселе может показать 256 цветов (один байт) одного цвета из RGB. Всего цвета 3, значит - 256 оттенков на каждый: 256^3 = 16 777 216 всего оттенков может показать один пиксель.
В программировании, как мы знаем, все считается с 0, поэтому программисты записывают в диапазоне 0-255 (где 0 - полное отсутствие оттенка, а 255 - это самый сильный цвет), а не 1-256.
Факт: люди выбрали для оттенков один байт, почему? Потому что этого вполне достаточно, чтобы человеческий глаз это воспринял. До байта идет бит, а бит хранит только 1 или 0 - например только черный или только белый. Не вариант. После байта идет килобайт - это слишком много разных цветов. Был взят байт, то есть 2^8 оттенков
Почему килобайт это много? Давайте посмотрим, сколько цветов видит человек (и за одно других животных):
| Существо | Кол-во типов колбочек | Примерное число оттенков / фича |
|---|---|---|
| Человек | 3 (RGB) | ~ 1-10 млн. |
| Креветка-богомол | 12–16 | Видит поляризацию и тепловые сигнатуры |
| Птицы | 4 (RGB + UV) | > 100 млн (тетрахроматия) |
| Собаки | 2 (B + Y) | ~ 10 тыс. (мир желто-синий) |
| Змеи | 2 + тепловизор | Видят инфракрасное изображение |
Итак, человек видит не больше 10млн оттенков, тогда смысл делать больше?
Альфа канал
Продолжаем. У нас есть три канала: red, green, blue. Каждый можно записать числом от 0 до 255. Чёрный цвет — все светодиоды выключены (0, 0, 0), белый — все включены на полную (255, 255, 255).
Также существует ещё один канал: alpha — это «непрозрачность». Записывается после RGB: rgba — в конец. По смыслу она считается от 0 (полная прозрачность, «пустота») до 1 (полная непрозрачность). Компьютеру для хранения проще работать с целыми числами, поэтому внутри альфа-канал — это тоже диапазон 0–255. Отсюда и пошла запись вроде 255, 255, 255, 100, где последнее число — это байт прозрачности.
Однако современные языки и браузеры прекрасно понимают и дробную запись вроде 0, 0, 0, 0.5. Так человеку гораздо удобнее. Вы просто пишете 0.5, браузер пересчитывает это в байты с высокой точностью сам, а в память всё равно улетает целое число от 0 до 255.
Закономерный вопрос: а где середина (50%) у 255 в памяти?
Ответ: да нигде... 50% от 255 — это 127.5. Так как байт может быть только целым числом, ровной середины не существует. Будет либо 127 — это ≈ 49.8% (чуть меньше половины), либо 128 — ≈ 50.2% (чуть больше половины). На практике эта разница незаметна глазу.
Ответ: да нигде... 50% от 255 — это 127.5. Так как байт может быть только целым числом, ровной середины не существует. Будет либо 127 — это ≈ 49.8% (чуть меньше половины), либо 128 — ≈ 50.2% (чуть больше половины). На практике эта разница незаметна глазу.
Важно: непрозрачность — опциональный параметр. По умолчанию он равен `1.0` (полная непрозрачность), поэтому в большинстве случаев его можно не писать явно.
HEX и RGB(a)
HEX (сокращение от hexadecimal) — обозначение шестнадцатеричной системы счисления.
В общем, HEX - это шестнадцатеричная система счисления. Напомню, что в 16-ричной используются цифры 0-9 и латинские буквы A-F. Записывается следующим образом:
| В десятичной | В шестнадцатиричной |
|---|---|
| 0 | 00 |
| 12 | 0A |
| 16 (это максимум для 16-ричной) | 0F (максимум, если записывать одной цифрой) |
| 128 | 80 |
| 256 | FF |
Один светодиод принимает число от 0 до 255, запись в десятичной системе последовательности, где пиксель покажет красный:
| RED | GREEN | BLUE |
|---|---|---|
| 255 | 0 | 0 |
| Красный на полную | Пустота вместо зеленого | Пустота вместо синего |
Получается: RGB(255, 0, 0) - это запись в десятичной системе. Но в программировании для цветов также используют шестнадцатеричную систему. Тогда запись RGB(255, 0, 0) в десятичной становится #FF0000 (это красный!).
Почему "#"? Этот значок слеша хештега говорит явно компьютеру "Сейчас пойдет цвет в HEX!".
Как же составлять цвета? Дальше все просто: красный на первом месте, зеленый - на втором, синий - третий. Например красный - это 255, 0, 0, полностью синий - 0, 0, 255, а полностью зеленый - 0, 255, 0. Если все цвета повторять в одинаковых пропорциях, то мы увидим градиент от полностью черного (0, 0, 0) до полностью белого (255, 255, 255). Например 100, 100, 100 - это темно-серый цвет. 128, 128, 128 - это близко к самому обычному серому.
Теперь осталось научиться переводить десятичную в HEX: 0, 0, 0 в HEX: #000000, или 16, 32, 48 в HEX: #102030.
Цвет HEX может представляться в интересном формате: вместо 6 знаков FFFFFF можно написать просто FFF. Каждый символ повторится еще один раз: #FFF -> #FFFFFF, #A0A -> #AA00AA (розовый), #00F -> #0000FF.
Популярные цвета
| Цвет | HEX | RGB | Описание |
|---|---|---|---|
| Чёрный | #000000 | 0, 0, 0 | Абсолютная тьма, классика минимализма |
| Белый | #FFFFFF | 255, 255, 255 | Чистота, свет, универсальный фон |
| Красный | #FF0000 | 255, 0, 0 | Энергия, сигнал опасности |
| Синий | #0000FF | 0, 0, 255 | Спокойствие, доверие, цвет гиперссылок |
| Зелёный | #00FF00 | 0, 255, 0 | Природа, разрешение, экология |
| Жёлтый | #FFFF00 | 255, 255, 0 | Солнце, радость, предупреждение |
| Серый (50%) | #808080 | 128, 128, 128 | Нейтралитет, строгость, фон интерфейсов |
| Тёмно-синий (Navy) | #000080 | 0, 0, 128 | Премиум, корпорации, официальность |
| Оранжевый | #FFA500 | 255, 165, 0 | Энтузиазм, тепло, призыв к действию |
| Розовый (Hot Pink) | #FF69B4 | 255, 105, 180 | Яркость, выделение акцентов |
Немного практики
Теперь вы знаете, как работает цвет и его показ. Теперь советую закрепить знания и на листочке перевести HEX/10-тичную в название и наоборот:
1. #FFF -> ?
2. RGB(255, 255, 0) -> ?
3. RGBA(100, 100, 100, 0.1) -> ? c [ высокой | низкой ] прозрачностью
4. Чистый зеленый -> #...?
5. Серая кнопка -> RGB(?, ?, ?)
6. #FFAA00 -> #...? (сокращенный вид)
Конец!
Вы узнали про цвета, научились считать и составлять их.
К главной странице уроков