Подробнее о цвете
Читайте о цвете — от света и восприятия до RGB, CMYK, HSL, hex, цветового круга, градиентов и контраста, которые можно попробовать в PictorX.
Свет, глаза и два вида смешения
Цвет — не оболочка на предмете. Это свет плюс мозг, который превращает длины волн в красный, жёлтый или сине-зелёный. Экраны добавляют свет (аддитивное смешение): красный, зелёный и синий идут к белому. Печать и краска вычитают свет (субтрактивное смешение): краски фильтруют длины волн, смесь идёт к чёрному. Поэтому неон на мониторе редко совпадает с той же работой на бумаге.
RGB: как экраны считают цвет
Пиксель на телефоне или ноутбуке — три крошечных лампы. Каждый канал обычно хранят как 0–255 (восемь бит). (0, 0, 0) — чёрный, (255, 255, 255) — белый, (255, 0, 0) — полный красный. Hex — та же тройка для веба: #FF0000 — этот красный, #000000 — чёрный. Дизайнеры по-прежнему говорят RGB, потому что дисплей излучает именно это.
CMYK: почему оттиск выглядит иначе
Принтеры кладут голубую, пурпурную, жёлтую и чёрную (K) краски. Они не излучают свет, а впитывают его, поэтому RGB-гамма экрана шире большинства CMYK-машин. Насыщенный электрический синий на мониторе на бумаге часто тускнеет. Переводите в CMYK, прежде чем обещать печатный цвет, и делайте цветопробу на том же материале. PictorX может показать CMYK выбранного цвета, чтобы был виден разрыв; это не замена профилю печатной машины.
HSL и HSV: ручки дизайнера
Тон — место на радуге (0–360°). Насыщенность — насколько чисто, а не серо. Светлота (HSL) — ближе к белому или чёрному; значение (HSV) — ближе к чёрному, пока тон остаётся ярким до конца. HSL и HSV любят потому, что «чуть темнее, тот же оранжевый» — один ползунок, а не угадайка из трёх чисел RGB.
Hex и именованные цвета CSS
Hex (#RRGGBB, иногда #RGB или #RRGGBBAA) — веб-сокращение RGB. В CSS есть и имена — coral, steelblue, rebeccapurple — с фиксированным hex. Имена удобны для набросков; hex (или современная CSS-функция цвета) — то, что отдаёте, когда бренд должен совпасть.
Цветовой круг и отношения
Цветовой круг расставляет тона по окружности. Классика: комплементарные сидят напротив (синий и оранжевый) и резко контрастируют; аналогичные — соседи и кажутся родными; триадные стоят через равные шаги и остаются живыми; сплит-комплементарная берёт тон плюс два рядом с противоположным — контраст с меньшей схваткой; монохром — один тон во многих светлотах. Генератор палитр PictorX сейчас держит комплементарную, аналогичную и монохром. Круг всё равно объясняет остальной классический набор, даже если инструмент даёт не каждую гармонию.
Градиенты: пути между цветами
Градиент — смесь вдоль пути. Линейный идёт в направлении; радиальный растёт из центра. Стопы закрепляют точные цвета. Больше стопов — больше контроля, не автоматически больше вкуса. В CSS linear-gradient и radial-gradient — та же идея. Редактор градиентов PictorX даёт таскать стопы и копировать CSS, HEX, RGB, HSL, HSV или CMYK.
Контраст, доступность, тёплый и холодный
Контраст — насколько далеко два цвета по светлоте (и тону). WCAG просит достаточно контраста, чтобы текст читался: около 4,5:1 для обычного текста и 3:1 для крупного на уровне AA. Это пол, не стиль. Тёплые тона (красные, оранжевые, жёлтые) кажутся ближе; холодные (синие, зелёные, фиолетовые) отступают. Контраст — для набора и интерфейса; тёплое и холодное — для настроения.
Цветовые инструменты в PictorX
Цветовой круг — чтобы выбрать тон и прочитать гармонии. Редактор градиентов — для смесей и CSS. Генератор палитр собирает, запирает и тасует наборы и может вытянуть цвета из фото. Перенос цвета одевает снимок палитрой другого, в браузере. Цветовые эффекты толкают фото в тонировки и другие виды. Ничто из этого не заменяет печатную машину или спектрофотометр; это быстрый способ увидеть, как цвет ведёт себя на картинке.
Часто задаваемые вопросы
В чём разница между RGB и CMYK?
RGB — аддитивный свет на экранах (обычно 0–255 на канал). CMYK — субтрактивная краска на бумаге. Диапазоны разные, поэтому экранный цвет часто нельзя напечатать точно.
Что значит комплементарный на цветовом круге?
Комплементарные сидят напротив. Вместе они сильно контрастируют. Генератор палитр PictorX может собрать комплементарный набор из стартового цвета.
Почему дизайнеры берут HSL, а не RGB?
Тон, насыщенность и светлота совпадают с тем, как мы говорим о цвете. Оранжевый в HSL можно затемнить, не смешав его в коричневый случайно, как это бывает с наивной правкой RGB.
Какой контраст требует WCAG?
Для AA около 4,5:1 для обычного текста и 3:1 для крупного. Проверяйте набор на настоящем фоне, не только на образце.
Сопутствующие инструменты
Цветовое колесо
Выбирайте цвет на интерактивном колесе, создавайте дополнительные, аналогичные, триадные и другие палитры и копируйте HEX, RGB, HSL, HSV или CMYK. Ничего не загружается.
Редактор градиента
Создавайте линейные и радиальные CSS-градиенты в браузере. Перетаскивайте цветовые точки, задавайте угол и копируйте CSS, HEX, RGB, HSL, HSV или CMYK. Ничего не загружается.
Генератор цветовых палитр
Создавайте, фиксируйте и перемешивайте палитры в браузере. Копируйте HEX, CSS-переменные или JSON, экспортируйте PNG или SVG и извлекайте цвета из фото. Ничего не загружается.
Перенос цвета
Перекрасьте фото цветами второго изображения. Живой предпросмотр в браузере, ползунок силы и опция сохранить яркость. Ничего не загружается.
Фильтры электрической мечты
Подайте фото кинематографический glow-up через Эффекты → Цвет. Используйте PictorX бесплатно в браузере - установка ПО не нужна.
Готовы попробовать?
Откройте PictorX в своем браузере — установка не требуется, для запуска не требуется кредитная карта.
Открыть цветовой круг