Серый - единственный цвет в RGB-модели, у которого нет своего отдельного канала. Он получается, когда красный, зелёный и синий берутся в равной пропорции. Чем выше это общее число, тем светлее серый: у нуля - чёрный, у максимума в 255 - белый, а всё, что между ними, растянуто по шкале яркости. Калькулятор выше переводит HEX в RGB и обратно, так что можно проверить любой готовый код или собрать свой из трёх одинаковых чисел.
Как работает принцип равных каналов
В RGB каждый пиксель описывается тремя числами от 0 до 255 - интенсивностью красного, зелёного и синего света. Когда все три числа отличаются, получается цветной оттенок: например rgb(200, 120, 80) - тёплый коричневатый тон. Но как только R, G и B становятся равными, цветовая составляющая исчезает и остаётся только яркость. rgb(90, 90, 90) - тёмно-серый, rgb(220, 220, 220) - почти белый, светлый серый.
Это же правило работает и в HEX-записи. Код из трёх одинаковых пар символов - #333333, #777777, #CCCCCC - всегда серый, потому что каждая пара кодирует один канал в шестнадцатеричной системе, а совпадающие пары дают совпадающие каналы.
Таблица: проценты яркости, RGB и HEX
Проценты яркости переводятся в RGB умножением на 255 с округлением до целого. Половина от 255 - это 127,5, и округление даёт 128, поэтому 50% серого - это не ровно середина диапазона по арифметике, а именно 128.
| Яркость | RGB | HEX |
|---|---|---|
| 0% (чёрный) | rgb(0, 0, 0) | #000000 |
| 10% | rgb(26, 26, 26) | #1A1A1A |
| 25% | rgb(64, 64, 64) | #404040 |
| 40% | rgb(102, 102, 102) | #666666 |
| 50% | rgb(128, 128, 128) | #808080 |
| 60% | rgb(153, 153, 153) | #999999 |
| 75% | rgb(191, 191, 191) | #BFBFBF |
| 90% | rgb(230, 230, 230) | #E6E6E6 |
| 100% (белый) | rgb(255, 255, 255) | #FFFFFF |
Если нужен процент, которого нет в таблице, введите три одинаковых значения канала в калькулятор и получите готовый HEX сразу.
Где используются оттенки серого
Монохромные интерфейсы держатся на серой шкале почти целиком: текст редко бывает чисто чёрным на чисто белом, обычно это тёмно-серый на светло-сером фоне, так глазам легче при долгом чтении с экрана. В UI-китах серый используется для второстепенного текста, границ полей, плейсхолдеров и disabled-состояний кнопок - там, где акцентный цвет только отвлекал бы.
В печати серый - основа для полутонов и теней при работе без цвета, например в чертежах, технической документации или газетной вёрстке. Принтер без цветных картриджей всё равно должен передать градации серого, и здесь важна именно точность канала, а не субъективное «на глаз».
В веб-дизайне серый закрывает тени, обводки и разделители - те элементы интерфейса, которым нужен контраст с фоном, но не нужен цветовой акцент, отвлекающий от основного контента. Светло-серая линия между блоками работает лучше, чем чёрная: она разграничивает, но не режет взгляд.
Как быстро подобрать нужный оттенок
Если есть готовый макет и нужно найти код серого под него, проще всего взять число из середины диапазона и двигаться от него: светлее - число больше, темнее - меньше. Дизайнеры часто держат в голове несколько опорных точек - #333, #666, #999, #CCC - и от них корректируют на глаз, а точный HEX потом проверяют калькулятором, чтобы не гадать при вёрстке.
Ещё один рабочий способ - взять процент из технического задания («фон 90% серого») и сразу перевести его в HEX через калькулятор, не считая вручную. Ошибка в одну-две единицы канала визуально не заметна, но в CSS-переменных лучше держать точное значение, а не приблизительное.