Выбор Цвета Онлайн
Выбирайте любой цвет визуально и мгновенно получайте его код HEX, RGB и HSL.
Почему стоит использовать
Наиболее полный цветовой пикер для дизайнеров и разработчиков
Все форматы
HEX, RGB и HSL одновременно. Скопируйте нужный формат одним кликом.
Конфиденциально
Никаких серверов, никаких логов. Все цвета обрабатываются в вашем браузере.
Автоматическая история
Последние выбранные цвета сохраняются локально для удобства сравнения и повторного использования.
Мгновенно
Предпросмотр цвета в реальном времени по мере настройки ползунками или с клавиатуры.
Как это работает
Три шага — никаких сложностей
Выберите цвет в визуальном пикере
Используйте интерактивный цветовой пикер для выбора оттенка на цветовой полосе и настройки насыщенности и яркости в цветовом квадрате. Также можно напрямую ввести любое значение HEX, RGB или HSL в текстовые поля.
Точная настройка с помощью ползунков
Используйте ползунки оттенка, насыщенности и яркости для точной коррекции цвета. История цветов автоматически сохраняет последние выбранные цвета для удобства сравнения.
Скопируйте в нужном формате
Получите цветовой код в HEX (#FF5733), RGB (rgb(255, 87, 51)) или HSL (hsl(11, 100%, 60%)) одним кликом. Все форматы доступны одновременно.
FAQ
Остались вопросы?
Современные веб-цветовые пикеры обычно работают в пространстве HSV (оттенок, насыщенность, яркость): квадрат выбора отображает насыщенность по оси X (слева — без насыщенности, справа — максимальная) и яркость по оси Y (сверху — максимальная яркость, снизу — чёрный). Боковая полоса оттенка позволяет выбирать угол оттенка (0–360°). При выборе точки в квадрате пикер вычисляет значения HSV и конвертирует их в HEX и RGB для отображения. Нативный браузерный пикер (<input type="color">) использует интерфейс операционной системы, который может различаться между Windows, macOS и Linux.
История цветов — коллекция последних выбранных цветов, сохранённых для удобства повторного использования и сравнения. Профессиональные инструменты дизайна — Figma и Adobe XD — сохраняют цветовые палитры на уровне файла (цвета документа) и уровне пользователя (личная цветовая библиотека). В веб-пикерах история обычно хранится в localStorage браузера для сохранения между сессиями. Цветовая палитра — тщательно подобранная коллекция взаимосвязанных цветов: фирменные цвета, цвета темы или алгоритмически сгенерированные палитры (например, с oklch для обеспечения равномерного контраста).
Наиболее точный способ — использовать пипетку в DevTools браузера. В Chrome: открыть DevTools (F12) → вкладка Elements → нажать на любое цветовое значение в панели Styles → появится цветовой пикер с пипеткой для захвата любого пикселя на экране. В Firefox: DevTools → Styles → нажать квадрат цвета → кнопка пипетки. На macOS приложение «Цифровой цветомер» (поставляется с системой) захватывает цвета в любом формате. На Windows PowerToys от Microsoft включает «Color Picker» (Win+Shift+C), захватывающий цвета в HEX, RGB и HSL из любой точки экрана.
Доступность цветов оценивается прежде всего по коэффициенту контрастности, определённому в WCAG (Web Content Accessibility Guidelines). WCAG 2.1 требует минимального коэффициента контрастности 4,5:1 для обычного текста и 3:1 для крупного (18 пт или 14 пт полужирный). Коэффициент контрастности вычисляется сравнением относительной яркости двух цветов по формуле L1+0.05/L2+0.05. Эффективная стратегия для доступного дизайна — использовать oklch: цвета с одинаковым значением L в oklch имеют воспринимаемо эквивалентную яркость, что упрощает создание палитр с предсказуемым контрастом.
CSS определяет 140 цветов со стандартными названиями, унаследованными из цветов MIT X11 (1987). Базовые цвета CSS1 (1996) — 16: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. CSS Color Level 3 (2011) стандартизировал 140 названий X11, включая 'rebeccapurple' в 2014 году. CSS Color Level 4 добавляет современные функции oklch(), lab(), lch() и color() для пространств широкого гамута, а также системные цвета ОС вроде Canvas, ButtonText и другие.
История цветового пикера: от Photoshop 1.0 до DevTools
Цифровой цветовой пикер появился в первых инструментах редактирования изображений. Adobe Photoshop 1.0 (1990, только для Mac) уже включал выбор цвета с палитрой HSB и числовыми значениями RGB. Интерфейс двойного цветового квадрата (цвет переднего плана/фона), популяризированный Photoshop, стал визуальным ориентиром для цифрового дизайна на десятилетия. Системный цветовой пикер Windows появился в Windows 3.1 (1992) с набором 48 базовых цветов плюс настраиваемая палитра — дизайн, остававшийся практически неизменным вплоть до Windows 7. macOS представила ColorSync Utility в Mac OS X 10.0 (2001), включавшую пикер с цветовыми профилями ICC и поддержкой цветовых пространств за пределами sRGB.
Дизайн-токены преобразовали работу современных команд с цветами. Концепция была популяризирована Salesforce в 2014 году при публикации системы Theo для управления дизайн-токенами Lightning Design System. Цветовой дизайн-токен — переменная с семантическим именем (--color-brand-primary, --color-feedback-error) вместо необработанного значения (#FF0000). Инструменты — Style Dictionary (Amazon), Theo (Salesforce) и спецификация W3C Design Tokens (в разработке с 2019 года) — стандартизируют определение, преобразование и распределение этих токенов по платформам (веб, iOS, Android, Figma). Цель — единый источник истины цветов, автоматически синхронизируемый между дизайном и кодом.
Пипетка в веб-браузерах была долгожданной функцией для дизайнеров и разработчиков. Chrome DevTools ввёл пипетку в интегрированном цветовом пикере в 2013 году (версия 28). Firefox добавил её в DevTools в версии 31 (2014). В 2021 году EyeDropper API был предложен как стандартный веб-API (WICG), реализованный в Chrome 95 и Edge 95 (октябрь 2021), позволяя любому веб-приложению запустить нативную системную пипетку одной строкой JavaScript: const result = await new EyeDropper().open(). Firefox и Safari пока не реализовали EyeDropper API (по состоянию на 2024 год), ограничивая его использование браузерами на основе Chromium.