Документация PaletteDesk
Руководства о том, как работает цветовой движок, как проверяется контраст, как экспортировать палитру в проект и как встроить темы и анимированные паттерны на свой сайт. Также здесь - про просмотр палитр на стилях веб-дизайна и макетах продуктов и про проверку палитры на реальном интерфейсе. Выберите статью в меню или начните с раздела ниже.
Основы
Инструменты
Проверка контрастаКак рассчитывается коэффициент контраста, что означают уровни AA и AAA, и как сервис автоматически исправляет непроходящие пары цветов.Экспорт в TailwindЧто попадает в экспорт, какие форматы доступны - tailwind.config.js, CSS-переменные, JSON - и почему именованные роли лучше плоского списка hex-кодов.Типографическая шкалаКак устроена типографическая шкала, как выбрать шаг и построить размеры h1-h6 и основного текста со значениями в rem, px и pt - и попробовать вживую в генераторе шкалы.Проверка контраста UI-компонентовКак режим Elements проверяет палитру на настоящих кнопках, полях, бейджах и алертах, как читать сводку контраста WCAG и как работают исправления в один клик.
Explore и стили
Explore Styles: стили веб-дизайнаСмотрите свою палитру вживую в шаблонах стилей веб-дизайна: Bauhaus, Swiss Style, Brutalism, Glassmorphism, Cyberpunk и других. Сравнивайте стили, проверяйте мобильный вид, делитесь ссылкой.Explore Products: макеты продуктовСмотрите палитру на реальных макетах продуктов - дашбордах, чатах, маркетплейсах, видеолентах - ещё до разработки. Кнопки, ссылки и статусные цвета в контексте.Обзор стилей веб-дизайнаНаглядный обзор стилей веб-дизайна - Bauhaus, Swiss Style, Art Deco, Brutalism, Glassmorphism, Cyberpunk и других - с типичными цветовыми палитрами и областями применения.Проверка палитры на реальном UIПлашки скрывают проблемы контраста и пропорций. Что проверять при тестировании палитры - контраст текста, статусные цвета, тёмные поверхности, мобильный вид - и как посмотреть её вживую.
Руководства
Обратимое переключение light/darkКак реализовать переключатель светлой и тёмной темы с возможностью возврата к предыдущей теме. Подробная документация и примеры кода.Анимированные паттерны без рестартовТри причины, из-за которых CSS-анимация фонового SVG-паттерна перезапускается сама собой - и как этого избежать при встраивании узора на свой сайт.
Стили шрифтов
Генератор курсивного текстаПревратите обычный текст в элегантный курсивный юникод-шрифт - бесплатно, мгновенно, готово для копирования в Instagram, TikTok, Discord и не только.Генератор double struck текстаПревратите текст в юникод-буквы double struck (blackboard bold) - копируйте в био, имена и заметки, бесплатно и без скачивания.Генератор готического текстаКопируйте и вставляйте готические буквы (fraktur, blackletter) для Instagram, TikTok и Discord - бесплатно, без скачивания.Фэнси-текст для TikTokКак вставить фэнси-текст в юникоде в имя и био TikTok, и почему настоящий @username его не примет.Стильный текст для соцсетейПочему стильный юникод-текст выделяется в TikTok, Instagram, Twitter/X и Discord, и как вставить его в любой профиль.Эстетичный текст для InstagramКак использовать шаблоны био, декоративные символы и kaomoji в био, подписи или истории Instagram, с советами.Что такое генератор юникод-шрифтов?Как генераторы юникод-шрифтов превращают обычный текст в стильные символы, которые работают на любой платформе, и какие стили самые популярные.Генератор красивых никовПревратите имя в стильный юникод-ник - жирный, курсив, готика, кружочки и другие - и узнайте, где он работает: от отображаемых имён в Discord до игр.