Инструменты дизайна

Визуальная пипетка с конвертацией в HEX, RGB, HSL, HSV, CMYK, HWB и CIE LAB. Двунаправленный ввод, проверка контраста WCAG, вывод CSS-переменных - Бесплатная онлайн-пипетка.

Введите цвет HEX или RGB и мгновенно найдите ближайшее именованное название из более чем 300 цветов CSS, X11 и Pantone. Поиск по названию или просмотр всей базы - Бесплатный онлайн-поиск названий цветов.

Рассчитайте коэффициент контрастности WCAG 2.1 и проверьте соответствие AA/AAA для обычного текста, крупного текста и UI-компонентов - живое превью, ввод HEX и RGB. Бесплатная онлайн-проверка контраста.

Рассчитайте воспринимаемую разницу цветов (ΔE 2000 / CIEDE2000) между двумя цветами - введите значения HEX или RGB и получите оценку Delta-E с визуальным сравнением и разбивкой CIE L*a*b*. Бесплатный онлайн-калькулятор разницы цветов.

Создавайте тинты (смешивание с белым) и шейды (смешивание с чёрным) из любого базового цвета - 5-12 ступеней, CSS-переменные, конфигурация Tailwind и экспорт списков HEX. Бесплатный онлайн-генератор оттенков.

Поисковый справочник всех цветовых токенов Material Design 3 (Material You) - цветовые роли, тональные палитры, имена CSS-переменных и значения для светлых/тёмных тем. Кликните по образцу для копирования.

Создавайте линейные, радиальные и конические CSS-градиенты визуально: выбирайте цветовые точки, задавайте позиции и направление и копируйте значение CSS background мгновенно. До 8 точек — бесплатный онлайн-генератор цветовых градиентов.

Смешивайте любые два цвета в заданной пропорции в режиме sRGB, Linear или Oklab: результат в HEX, RGB, HSL и HSV с предпросмотром градиента из 11 шагов. Бесплатный онлайн-смеситель цветов.

Переводите любое значение в кельвинах (1000–10 000 K) в приблизительный цвет RGB и HEX: интерактивная шкала, 12 предустановок источников света и разбивка по каналам RGB. Бесплатный онлайн-конвертер цветовой температуры.

Преобразуйте любую палитру светлой темы в аналоги для тёмной темы с проверкой контраста по WCAG: три режима адаптации, экспорт в CSS-переменные и конфигурацию Tailwind. Бесплатный онлайн-адаптер тёмной темы.

Ищите, фильтруйте и копируйте все 148 именованных цветов CSS со значениями HEX, RGB и HSL. Фильтр по 12 семействам цветов — бесплатный онлайн-справочник именованных цветов CSS.

Узнайте, что означает каждый основной цвет в маркетинге и дизайне: психологические ассоциации, культурный контекст, применение в брендинге и советы по дизайну для 12 семейств цветов. С поиском. Бесплатный онлайн-справочник по психологии цвета.

Мгновенно переводите HEX в HSL, RGB в HSL и между всеми форматами цвета. Двусторонний ввод: HEX, RGB, HSL, HSV и значения отдельных каналов. Бесплатный онлайн-калькулятор HEX в HSL.

Ищите и копируйте фирменные цвета более 200 крупных брендов: Apple, Google, Meta, Nike и другие. Значения HEX и RGB, 10 отраслевых категорий — бесплатный онлайн-поиск фирменных цветов.

Генерируйте случайные цвета одним нажатием: показываются HEX, RGB, HSL, CMYK и HWB. Фиксируйте тон, насыщенность или светлоту. Задавайте диапазоны min/max. Пакетная генерация до 50 цветов — бесплатный онлайн-генератор случайных цветов.

Интерактивный цветовой круг: нажмите в любом месте, чтобы изучить комплементарные, аналогичные, триадные, тетрадные и монохромные гармонии с экспортом в CSS-переменные. Бесплатный онлайн-исследователь цветовых гармоний.

Создайте собственный цветовой круг в SVG или PNG для любой светлоты и насыщенности. Выберите одну из 7 предустановок, настройте число секторов и внутренний радиус и скачайте результат сразу — бесплатный онлайн-генератор цветового круга.

Переводите все 213 цветов RAL Classic в HEX и RGB. Поиск по коду RAL, английскому или немецкому названию цвета либо значению HEX. Фильтр по категории — бесплатный онлайн-конвертер RAL в HEX.

Переводите ссылки Pantone PMS в приблизительные значения HEX и RGB/HSL для цифрового дизайна. Поиск по коду, названию или значению HEX — бесплатный онлайн-конвертер Pantone в HEX.

Переводите rgba() в HEX8 и hsla() в rgba() и смотрите предпросмотр смешивания на белом, чёрном и собственном фоне — с генератором шкалы прозрачности. Бесплатный онлайн-конвертер прозрачности и alpha.

Отобранная галерея более чем из 110 градиентных CSS-фонов: просматривайте по стилю (закат, океан, неон, тёмный, пастель и другие) и копируйте значение CSS background одним нажатием. Бесплатная онлайн-библиотека градиентных фонов.

Создавайте сканируемые QR-коды для ссылок, Wi-Fi, vCard и обычного текста и скачивайте их в SVG или PNG. Бесплатный онлайн-генератор QR-кодов.

Создавайте баннеры для соцсетей (изображения OG) размером 1200×630 px с собственным текстом, цветами и макетами — бесплатный онлайн-генератор изображений OG.

Создавайте favicon в PNG или SVG из инициалов, одной буквы или любого эмодзи — загружать изображение не нужно. Скачивайте все стандартные размеры (от 16 до 512 px) — бесплатный онлайн-генератор favicon из текста.

Преобразуйте текст в крупный стилизованный ASCII-арт с помощью шрифтов в стиле FIGlet: 6 стилей шрифта, 4 набора символов, своя ширина, копирование или скачивание в .txt — бесплатный онлайн-генератор ASCII-арта.

Введите до 12 цветов с собственными подписями и скачайте готовую к печати PDF-карточку образцов: A4 или Letter, 2/3/4 колонки, значения HEX/RGB/HSL, подпись внутри или снизу. Бесплатный онлайн-генератор карточек с образцами цвета.

Создавайте двусторонние визитки с именем, должностью, компанией, телефоном, почтой, сайтом и соцсетями. Выберите один из 4 шаблонов, настройте цвета и шрифты и скачайте PDF для печати с метками реза. Бесплатный онлайн-дизайнер визиток — без регистрации.

Создавайте горизонтальные таймлайны с датами, отметками этапов, описаниями и цветовой кодировкой категорий. Добавляйте строки для параллельных направлений. Экспорт в PNG или PDF. Бесплатное онлайн-создание таймлайнов — без регистрации.

Создавайте пустые шаблоны мемов из любого изображения: добавляйте текстовые заполнители сверху и снизу с настраиваемым размером шрифта, контуром, тенью и верхним регистром. Выберите один из 6 готовых форматов мемов или создайте свой. Скачивайте готовый PNG или копируйте в буфер обмена. Бесплатный онлайн-генератор шаблонов мемов — без регистрации.

Просматривайте все 38 стандартных стилей курсора CSS при наведении и копируйте CSS-объявление одним нажатием — бесплатный онлайн-тестер CSS-курсоров.

Смотрите, как работают CSS-анимации, привязанные к прокрутке (появление, подъём, масштабирование, размытие), с настраиваемыми параметрами и копированием кода CSS + JS — бесплатный онлайн-предпросмотр анимаций при прокрутке.

Вставьте любое значение цвета CSS (hex3, hex6, hex8, rgb(), rgba(), hsl(), hsla(), hwb(), oklch(), lch(), lab() или именованный цвет) и сразу получите все эквивалентные форматы. Конвертируйте целые таблицы стилей одним нажатием. Бесплатный онлайн-конвертер форматов цветов CSS.

Уменьшите размер файла шрифта, оставив только те символы Unicode, которые реально использует ваша страница, — это критично для Core Web Vitals. Поддерживаются TTF, OTF, WOFF и WOFF2. Бесплатное онлайн-создание подмножества шрифта.

Вставьте строку символов и извлеките только эти глифы в минимальный файл шрифта — идеально для логотипов, иконочных шрифтов и подписей в интерфейсе. Генерируется фрагмент CSS с unicode-range. Бесплатное онлайн-подмножество шрифта по своим глифам.

Удалите все нелатинские глифы из шрифтов TTF и OTF: это уменьшает большие CJK- и многоскриптовые шрифты на 80–95 % для сайтов только на английском. Разбор бинарных файлов OpenType в браузере. Бесплатное онлайн-подмножество шрифта только с латиницей.