Softonic

Выбор цвета HEX

Шаг 1 / 4 HEX colour picker

Общие пресеты

Выберите цвет встроенным визуальным инструментом браузера или введите HEX из трёх либо шести цифр. Инструмент вычислит RGB, HSL, примерный CMYK, относительную яркость и точные коэффициенты контраста с белым и чёрным. Цвет обрабатывается в этом браузере и не добавляется в URL шагов.

Как выбрать цвет

  1. 1

    Начните с примера или выбора цвета

    Выберите образец или откройте встроенную палитру браузера.

  2. 2

    Введите точный HEX

    Укажите три цифры, например #F60, или шесть, например #FF6600. Короткая запись будет правильно развёрнута.

  3. 3

    Проверьте рассчитанные форматы

    Сравните HEX, RGB, HSL, примерный CMYK и относительную яркость sRGB.

  4. 4

    Проверьте контраст и скопируйте

    Сравните цвет с белым и чёрным и скопируйте нужное значение HEX, RGB или HSL.

Цветовые форматы на практике

Каждая цветовая модель отвечает на немного другой вопрос.

Справочник обозначений

Формат Компоненты Где используется
HEX #RRGGBB CSS, инструменты дизайна, брендбуки
RGB красный 0–255, зелёный 0–255, синий 0–255 CSS rgb(), графические редакторы
HSL тон 0–360°, насыщенность %, светлота % CSS hsl(), дизайн-системы
CMYK циан %, маджента %, жёлтый %, key/чёрный % Печать, допечатная подготовка

Контраст для доступности

WCAG 2.2 задаёт минимальные коэффициенты контраста между текстом и фоном:

  • AA для обычного текста: ≥ 4,5:1
  • AA для крупного текста (18 pt или 14 pt жирным): ≥ 3:1
  • AAA для обычного текста: ≥ 7:1

Инструмент в реальном времени считает коэффициент относительно белого и относительно чёрного. Если важен конкретный цвет переднего плана, проверьте каждую пару цветов отдельным инструментом проверки контраста.

Советы

  • HEX используется по умолчанию в большинстве дизайн-инструментов, но короткая трёхзначная запись (#F60) равна #FF6600, а не #F06060.
  • HSL удобен для построения палитр: зафиксируйте тон и меняйте светлоту, чтобы получить светлые и тёмные варианты.
  • CMYK и RGB нельзя идеально преобразовать друг в друга, печатный CMYK зависит от профиля печатной машины. Всегда проверяйте пробный отпечаток на настоящей бумаге.
  • Если вы проектируете для современного CSS, рассмотрите OKLCH для визуально более ровных шагов светлоты.

Часто задаваемые вопросы

Photoshop применяет цветовой профиль: обычно sRGB для экрана и часто другой профиль для печати. Браузеры отображают HEX-значения без профиля как sRGB. Если документ настроен на Adobe RGB или ProPhoto, значения пикселей остаются теми же, но воспринимаемый цвет меняется.

Да, оба варианта описывают чистый красный: красный равен 255, зелёный и синий равны 0. HEX, это просто двухзначная шестнадцатеричная запись каждого значения канала от 0 до 255.

Выберите основной цвет и скопируйте HSL. В CSS или графическом редакторе сохраняйте тон и насыщенность, меняя светлоту. Проверяйте каждую пару цветов текста и фона отдельно.

Текущий цвет хранится до 30 минут в этой вкладке на время пошагового режима. Он не добавляется в URL и не передаётся через Livewire. Повторный запуск, закрытие вкладки, очистка данных браузера или истечение срока удаляет цвет.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Конвертер BBCode в HTML

Преобразуйте BBCode (разметку форумов) в чистый HTML. Поддерживает теги форматирования, списки, цитаты, код, изображения, ссылки и таблицы.

Генератор случайных цветовых палитр

Создавайте случайные палитры из 2–15 цветов, выбирайте яркий, пастельный, приглушенный или темный стиль и копируйте HEX-коды или CSS-переменные.

Конвертер двоичного кода в ASCII

Вставьте двоичный код (байты через пробел или длинный поток битов) и получите текст ASCII, который он представляет. Поддерживает 7-битные и 8-битные кодировки.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.