Реклама мешает? Идти Без рекламы Сегодня 

Генератор листа цветов

ЦветРазработчикИзображение

ВХОД

Автоматический процесс

Цвета (один на строку)

Шестнадцатеричный код (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), или названия цветов CSS. Строки, начинающиеся с #, за которыми следует пробел (например, # комментарий), рассматриваются как комментарии.

Размещение

Столбцы: 4

Размер палитры (px): 160

Высота палитры (px): 120

Зазор (px): 12

ПADDING листа (px): 24

Радиус угла (px): 8

Фон листа

Метки

Показывать метку в шестнадцатеричном формате

Показывать название CSS (при совпадении)

Цвет метки

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Генератор листа цветов

Вставьте список цветов и мгновенно просмотрите их как печатаемую палитру с метками в шестнадцатеричном формате. Используйте любые форматы цветов CSS — короткие и длинные шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(), или названия цветов, такие как tomato — затем загрузите лист в виде высокого разрешения PNG или масштабируемого SVG для передачи, печати или документации по системе дизайна.

Как использовать

Введите один цвет на строку в Цвета поле ввода, или нажмите Попробуйте пример чтобы загрузить начальную палитру.
Настройте Колонны, Размер палитры, Зазори ПADDING листа чтобы соответствовать нужной структуре.
Выберите цвет фона листа и включите отображение меток в шестнадцатеричном формате или совпадающих названий цветов на каждой палитре.
Выберите, как будут отображаться метки — Авто использует контраст с каждой палитрой, или вынуждает Всегда темный или Всегда светлый.
Нажмите Скачать PNG для экспорта в формате 2x сетки, или Скачать SVG для векторного файла, который можно открыть в Figma, Illustrator или любом браузере.

Возможности

Многоформатный ввод — принимает шестнадцатеричные коды (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), и названия цветов CSS в одном списке.
Живой SVG-превью — лист перестраивается при вводе, поэтому изменения структуры происходят мгновенно.
Настройка сетки — управляйте количеством столбцов, шириной и высотой палитры, зазором, паддингом и радиусом угла.
Умные метки — отображают шестнадцатеричные коды, автоматически определяют совпадающие названия цветов CSS и выбирают цвет меток (контрастный или фиксированный).
Прозрачные цвета — палитры с прозрачностью отображаются поверх шахматной сетки, чтобы прозрачность была визуально очевидной в экспортах.
Два формата экспорта — высокоразрешённый PNG через Canvas, плюс копируемый SVG для векторного использования.
Полностью на стороне клиента — цвета никогда не выходят за пределы браузера, поэтому безопасны для палитр, которые ещё не были опубликованы.

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

Что такое шестнадцатеричный код цвета и почему иногда он состоит из восьми символов?

Шестнадцатеричный код цвета использует три пары шестнадцатеричных цифр для кодирования красного, зелёного и синего каналов цвета sRGB (например, #FF5733). Каждая пара варьируется от 00 до FF, что эквивалентно 0 до 255 в десятичной системе. Дополнительная четвёртая пара кодирует прозрачность (прозрачность) от 00 (полностью прозрачный) до FF (полностью непрозрачный), что даёт восьмисимвольный формат #RRGGBBAA, используемый в современном CSS.
Как определяется контраст между палитрой и её меткой?

Большинство проверок контраста используют формулу относительной яркости WCAG, которая преобразует каждый канал sRGB в линейное значение, а затем взвешивает их как 0.2126R + 0.7152G + 0.0722B. На светлых фоновых цветах (яркость примерно выше 0.5) лучше читается темный текст, а на темных фонах — светлый текст. Это то же самое вычисление, которое используется в отношении контрастности WCAG для аудитов доступности.
Почему дизайнеры предпочитают SVG вместо PNG для палитр цветов?

SVG хранит палитры как векторные формы и текст, а не как фиксированную сетку пикселей, поэтому лист остаётся чётким при любом размере, печатается чётко при высоком разрешении и остаётся редактируемым в дизайнерских инструментах, таких как Figma или Illustrator. PNG всё ещё полезен, когда требуется один плоский растровый изображение для слайдов, скриншотов или быстрого обмена, где не предполагается поддержка векторных форматов.
Какова разница между значениями sRGB в шестнадцатеричном формате и RGB, которые вы видите в коде?

Значения шестнадцатеричного формата, такие как #FF5733 и эквивалентные rgb(255, 87, 51), описывают один и тот же тройной набор sRGB — шестнадцатеричный формат — это просто компактная запись в системе с основанием 16. Оба описывают стандартный гамма-диапазон sRGB, используемый в интернете. Широкие гамма-диапазоны, такие как display-p3 или oklch, описывают цвета за пределами этого диапазона и не могут быть взаимозаменяемы с теми же числами в sRGB.