Студия цвета
Палитры, градиенты, круги и все способы найти идеальный цвет.
ИИ-генератор палитр
Опишите настроение и получите подходящие палитры — на базе настоящей нейросети, работающей полностью в вашем браузере. Без серверов, без ожидания, данные не покидают устройство.
ИИ · НейросетьИИ-стайлгайд
Опишите свой бренд и получите полную дизайн-систему — палитру, пару шрифтов, типографическую шкалу, отступы, радиусы и тени — подобранную нейросетью и собранную в готовый к копированию CSS-блок.
ИИ · Дизайн-системаКонвертер цветов
Преобразование между HEX, RGB, HSL, CMYK и OKLCH с мгновенным двунаправленным преобразованием.
Конвертер · Все форматыЦветовые гармонии
Создавайте комплементарные, триадные, аналогичные и раздельно-комплементарные палитры из любого базового цвета. Нажмите на образец, чтобы скопировать его hex-код.
Цвет · ТеорияИИ-названия цветов
Введите любой hex-цвет и найдите ближайшие названия — стандартные цвета CSS, китайские традиционные цвета, японские вагаиро и ещё 12 культур. Перцептивная наука о цвете находит истинное совпадение, а ИИ-модель предлагает связанные темы палитр.
ИИ · Наука о цветеЦветовой круг
Интерактивное цветовое колесо для изучения оттенков, насыщенности и цветовых отношений. Нажмите, чтобы выбрать и заблокировать цвета.
Интерактивный · ВизуальныйГенератор градиентов
Создавайте красивые линейные и радиальные градиенты с помощью предварительного просмотра Canvas в реальном времени. Скопируйте CSS-код мгновенно.
Градиент · Экспорт CSSПресеты градиентов
Просматривайте и копируйте 15 красивых пресетов градиентов.
Пресеты · Один кликПалитра из изображения
Извлекайте красивые цветовые палитры из любого изображения с помощью интеллектуального квантования цвета.
Добыча · УмныйГенератор палитр
Создавайте гармоничные цветовые схемы с помощью монохроматических, дополнительных, аналоговых и триадных режимов. Предварительный просмотр в реальном времени с экспортом CSS.
Цвет · ИнтерактивныйГенератор оттенков
Создайте полную шкалу оттенков из любого цвета — 20 уровней с экспортом HEX и SCSS.
тинты и шейды, шкала цветаЭффекты и глубина
Тени, стекло и радиусы — тонкие детали, делающие интерфейс живым.
Создатель блобов
Создавайте плавные органические формы для фонов, аватаров и разделителей секций. Рандомизация в один клик, точная настройка кривизны и копирование кода border-radius или SVG.
CSS · ОрганикаСкругление углов
Визуальный редактор радиусов границ с предварительным просмотром в реальном времени. Скопируйте код CSS с индивидуальным управлением углами.
CSS · Визуальный редакторГенератор теней
Интерактивный конструктор теней для блоков с многослойным предварительным просмотром холста в реальном времени и выводом CSS.
CSS · МногоуровневыйГенератор кнопок CSS
Создавайте красивые кнопки за секунды — 6 стилей, свои цвета, скругление и отступы, CSS готов к копированию.
генератор кнопок, CSS кнопка, дизайн кнопокГенератор CSS-фильтров
Создавайте визуальные эффекты с CSS filter() — размытие, яркость, контраст, поворот оттенка, сепия и другое. Живой предпросмотр на образце изображения, копируйте всю цепочку фильтров мгновенно.
CSS · Эффекты изображенийГенератор глассморфизма
Создавайте матовые стеклянные карточки с размытием фона, прозрачностью и тонкими рамками. Предпросмотр в реальном времени и готовый CSS.
UI · Матовое стеклоГенератор градиентного текста
Выделите текст градиентной заливкой и анимацией — настройте угол и цвета, мгновенно скопируйте CSS.
градиентный текстГенератор тени текста
Создавайте многослойные тени текста с предпросмотром в реальном времени. Настраивайте смещение, размытие, цвет и прозрачность — копируйте CSS мгновенно.
CSS · ТипографикаПрактический набор
Проверки, конверсии и системы, сохраняющие доступность и согласованность дизайна.
ИИ CSS-сниппеты
Опишите нужный эффект — светящуюся кнопку, спиннер загрузки, стеклянную карточку — и нейросеть найдёт подходящий CSS-сниппет. Живой рендер и готовый код для копирования.
ИИ · Библиотека кодаСимулятор дальтонизма
Симулирует, как цвета выглядят для пользователей с дальтонизмом.
Доступность · СимуляцияПроверка контрастности
Проверьте соответствие цветов текста и фона WCAG AA/AAA. Получите мгновенные рейтинги доступности.
Доступность · AA/AAAГенератор кривых Безье
Создавайте собственные кривые сглаживания CSS с живым предпросмотром и анимацией. Перетаскивайте контрольные точки, выбирайте пресеты и копируйте функцию cubic-bezier() мгновенно.
CSS · ДвижениеКонвертер PX в REM
Мгновенно конвертируйте пиксели в REM и обратно, с настраиваемым базовым размером шрифта и полной таблицей пересчёта. Незаменим для доступного, масштабируемого CSS.
CSS · ЕдиницыГенератор CSS-трансформаций
Визуализируйте и генерируйте CSS-трансформации — поворот, масштаб, смещение и наклон с интерактивным предпросмотром в реальном времени. Копируйте полное свойство transform мгновенно.
CSS · АнимацияЦветовая система UI
Создавайте полные палитры токенов дизайна из одного исходного цвета. Экспортируйте в Tailwind, CSS или SCSS.
Жетоны дизайна · Попутный ветерМакет и сетка
Сетки и пропорции — структурный каркас каждого интерфейса.
Калькулятор соотношения сторон
Рассчитывайте и масштабируйте любое соотношение сторон — 16:9, 4:3, 1:1, 9:16 и произвольное. Изменяйте размеры с сохранением пропорций, с пресетами популярных разрешений.
Утилита · СоотношениеГенератор CSS Grid
Визуально создавайте макеты CSS Grid с предварительным просмотром в реальном времени.
CSS · Визуальный редакторКалькулятор золотого сечения
Рассчитывайте размеры золотого сечения (1:1.618) для макетов, типографики и логотипов. Мгновенно получайте большее и меньшее золотые значения, с визуальным предпросмотром.
Макет · ПропорцияГенератор SVG-волн
Создавайте плавные SVG-волны-разделители для сайта — настройте амплитуду, длину и слои, скопируйте SVG.
SVG-волна, разделитель-волнаТипографическая мастерская
Сочетания шрифтов и шкалы — голос вашего дизайна.
ИИ-подбор шрифтов
Опишите свой проект и получите профессиональные пары Google Fonts, подобранные настоящей нейросетью в вашем браузере. Живой рендер и готовый CSS для копирования.
ИИ · ШрифтыКалькулятор Clamp
Создавайте плавную типографику с CSS clamp(). Задайте минимальный, предпочтительный и максимальный размеры — получите идеальную формулу clamp() и визуальный предпросмотр шкалы.
CSS · Плавная типографикаПодбор шрифтов
Откройте для себя гармоничные сочетания шрифтов для заголовков и основного текста из тщательно подобранных коллекций.
Типографика · Более 300 шрифтовГенератор типографической шкалы
Создавайте гармоничную модульную типографическую шкалу с золотым сечением, большой терцией и другими классическими пропорциями. Наглядный предпросмотр размеров и полный CSS.
Типографика · Шкала14 языков
Каждый инструмент, каждая этикетка, каждое руководство — полностью переведены.
Доступность прежде всего
Каждая палитра включает оценки контрастности WCAG. Проектируйте инклюзивно с самого начала.
Удобный для разработчиков экспорт
CSS, Tailwind, SCSS, JSON — скопируйте формат, который нужен вашему проекту.