Просмотр RGB цвета
Подбор цвета, конвертация RGB, HEX, HSL, CMYK, проверка контраста WCAG
Что такое RGB Color Viewer
Инструмент визуализирует цвет по RGB-коду: вы вводите три числа (красный, зелёный, синий от 0 до 255), и видите результат. Также показывает HEX-код, HSL, CMYK, позволяет сравнивать цвета, создавать палитры.
Это базовый инструмент для работы с цветом в цифровой среде. Полезен веб-разработчикам при работе с макетами, дизайнерам при подборе цветов, всем, кто хочет точно представить цвет по его коду.
Модель RGB
RGB (Red, Green, Blue) — аддитивная цветовая модель, где цвет формируется сложением трёх основных: красного, зелёного, синего. Каждый канал имеет значение от 0 (нет цвета) до 255 (максимум).
Примеры: (255, 0, 0) — чистый красный, (0, 255, 0) — зелёный, (0, 0, 255) — синий. (255, 255, 255) — белый (все три канала на максимуме), (0, 0, 0) — чёрный. Всего возможно 16 777 216 цветов.
Применение
RGB используется в экранах (мониторы, ТВ, смартфоны), цифровых камерах, проекторах. Web-стандарты CSS и HTML поддерживают RGB напрямую. Для печати лучше CMYK, но для всего цифрового — RGB.
Инструмент особенно полезен при копировании цветов из макетов дизайнеров: вы видите код, хотите убедиться, что правильно его понимаете. Ввели в Viewer — убедились.
Сверка цвета бренда
Веб-разработчик получил брендбук с цветом "корпоративный синий" (25, 83, 167).
Вводит в RGB Viewer — видит тот же синий, что и в PDF брендбука, значит восприятие правильное.
Использует этот код в CSS: background-color: rgb(25, 83, 167). Проверяет на сайте — цвет точно такой, как в брендбуке. Задача выполнена.
Знаете ли вы?
В RGB 16 777 216 возможных цветов (256³).
Человек различает около 10 миллионов оттенков — меньше, чем RGB.
Все экраны используют RGB: каждый пиксель состоит из 3 субпикселей.
Принтеры используют CMYK — другую модель с 4 чернилами.
RGB — аддитивная модель, CMYK — субтрактивная.
В CSS 24-битный RGB — стандарт для веба.
Сравнение цветовых моделей
| Модель | Компоненты | Применение | Диапазон |
|---|---|---|---|
| RGB | Красный, Зелёный, Синий | Экраны, веб | 0–255 на канал |
| HEX | 16-ричная запись RGB | CSS, HTML | #000000–#FFFFFF |
| HSL | Оттенок, Насыщенность, Светлота | CSS3, дизайн | H: 0°–360°, S/L: 0%–100% |
| HSV/HSB | Оттенок, Насыщенность, Яркость | Photoshop, редакторы | H: 0°–360°, S/V: 0%–100% |
| CMYK | Голубой, Пурпурный, Жёлтый, Чёрный | Полиграфия, печать | 0%–100% на канал |
Важно знать
Для работы с веб-дизайном всегда используйте RGB или HEX. CMYK нужен только для печати. Не путайте эти модели: цвета могут выглядеть по-разному при конверсии, и "сочный красный" с экрана может стать тусклым в печати.
Как использовать просмотрщик RGB цвета — пошаговая инструкция
Выберите способ ввода цвета
Переключитесь между вкладками RGB, HSL, HEX или Спектр. Режим RGB позволяет регулировать каждый канал слайдером, HSL — управлять оттенком, насыщенностью и светлотой, HEX — ввести готовый код цвета, а Спектр — выбрать цвет визуально.
Настройте нужный цвет
Перемещайте слайдеры или введите точные значения. Цвет мгновенно обновляется в области предпросмотра. При необходимости используйте пипетку для захвата цвета с экрана или генератор случайного цвета для вдохновения.
Скопируйте код в нужном формате
В блоке форматов отображаются все варианты кода: HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK. Нажмите иконку копирования рядом с нужным форматом для вставки в ваш проект. Готовый CSS-код доступен в отдельном блоке.
Используйте дополнительные функции
Проверьте контрастность цвета по WCAG для обеспечения доступности. Изучите гармоничные сочетания в блоке гармоний. Сохраните понравившиеся цвета в палитру кнопкой "Сохранить". Используйте готовые палитры для быстрого подбора цветовых схем.
Примеры использования просмотрщика RGB
🎨 Подбор цвета для сайта
Веб-дизайнер создаёт макет лендинга и хочет подобрать основной цвет бренда. Он вводит примерный HEX-код из брендбука, корректирует оттенок через HSL-слайдеры, проверяет контрастность с белым фоном по WCAG и генерирует гармоничную палитру из 5 цветов для дизайн-системы. Все коды копируются в CSS одним кликом.
🖥️ Конвертация для печати
Маркетолог получил цвет логотипа в формате HEX (#1E88E5) и должен передать его в типографию в формате CMYK. Он вводит HEX-код в просмотрщик и мгновенно получает значение CMYK (83%, 41%, 0%, 10%) для передачи в полиграфию. Это исключает ошибки ручной конвертации и расхождение цветов при печати.
♿ Проверка доступности интерфейса
Frontend-разработчик проверяет доступность текста на цветном фоне. Он устанавливает цвет текста, видит контрастность на белом и чёрном фонах, и определяет, соответствует ли сочетание уровню AA или AAA по стандарту WCAG 2.1. Если контраст недостаточен, разработчик тут же корректирует светлоту через HSL-слайдер.
📱 Оформление контента в соцсетях
SMM-менеджер оформляет визуальную сетку Instagram в единой цветовой гамме. С помощью функции гармоний он подбирает аналоговые оттенки к основному цвету бренда, сохраняет их в палитру и использует при создании сторис и постов. Каждый цвет имеет точный HEX-код для вставки в Canva или Figma.
Часто задаваемые вопросы
Что такое RGB?
В чём разница с HEX?
Почему 255?
Можно ли использовать для печати?
Есть ли альфа-канал?
Полезная информация
Все расчёты контрастности соответствуют алгоритму относительной яркости из спецификации WCAG 2.1. Конвертация CMYK выполняется по стандартной формуле без привязки к ICC-профилю, поэтому для точного соответствия при печати рекомендуется использовать профессиональное ПО (Adobe Photoshop, CorelDRAW) с загруженным профилем типографии.
Если у вас есть пожелания по улучшению функционала просмотрщика цветов или идеи новых инструментов для работы с цветом, пишите нам через форму обратной связи. Мы ценим каждое предложение и стремимся создавать максимально полезные инструменты для нашего сообщества.
Комментарии (1)
🎨Похожие инструменты
Генератор цветов HTML
Подбор цвета, конвертация HEX/RGB/HSL/CMYK, гармонии, градиенты и проверка контраста WCAG
Конвертер цветов
Перевод цветов между HEX, RGB, HSL, HSV и CMYK с гармониями и проверкой контрастности
Совместимость цветов
Подбор цветовых гармоний, проверка контрастности WCAG и симуляция дальтонизма
Проверка контраста цветов
Проверьте контраст фона и текста по стандарту WCAG 2.1
Генератор случайных цветов
Генерация цветов, палитр и проверка контрастности WCAG
Конвертер CSS-единиц
Перевод px в em, rem, %, vw, vh и обратно с учётом контекста
Генератор CSS box-shadow
Визуальный редактор теней с множественными слоями и готовыми пресетами
Оптимизация CSS
Минификация, форматирование и сжатие CSS-кода онлайн