Просмотр, форматирование и валидация JSON в браузере
Инструмент для просмотра, улучшения читаемости, проверки валидности и минификации JSON. Загрузите файл или вставьте код вручную и скачайте результат.
Генератор градиента палитры Tailwind с HEX, RGB, OKLCH
Перед использованием
Используя данный инструмент, вы подтверждаете, что изучили инструкцию и согласны с правилами использования.
Для загрузки требуется стабильное интернет-соединение, в случае неполадок попробуйте перезагрузить страницу.
Применить ко всем
Режим создания градиента
Палитра
Цвет
50100200300400500600700800900950
Графит
Серый
Цинк
База
Камень
Красный
Апельсин
Янтарь
Желтый
Лайм
Зелень
Изумруд
Бирюза
Голубой
Небо
Синий
Индиго
Фиолет
Пурпур
Фуксия
Розовый
Роза
Готовые градиенты
Рассвет
bg-gradient-to-r from-red-500 to-orange-400Океан
bg-gradient-to-r from-blue-600 via-purple-600 to-pink-300Лес
bg-gradient-to-b from-teal-900 to-green-500Закат
bg-gradient-to-br from-purple-500 to-pink-500Огонь
bg-gradient-to-t from-red-600 via-orange-500 to-yellow-400Лед
bg-gradient-to-br from-sky-500 via-cyan-500 to-cyan-50Аврора
bg-gradient-to-r from-emerald-500 via-blue-500 to-violet-500Золото
bg-gradient-to-tr from-pink-100 via-pink-500 to-amber-400Ночь
bg-gradient-to-b from-slate-800 via-indigo-800 to-blue-800Тропики
bg-gradient-to-r from-lime-500 via-cyan-400 to-purple-500Понравился инструмент?
По необходимости вы можете обратиться за консультацией
Об использовании
Инструмент для подбора цветов и градиентов из палитры CSS-фреймворка Tailwind CSS (также в форматах CSS - HEX и RGB, OKLCH) с функцией копирования готового кода для веб-интерфейсов, приложений и прототипов размещен исключительно в ознакомительных и демонстрационных целях.
Вся обработка выполняется локально в вашем браузере - данные не отправляются на сервер. Используя инструмент, вы принимаете на себя ответственность за применение сгенерированных значений в ваших проектах.
При размещении текста на градиентном фоне необходимо проверять контрастность в каждой точке градиента, а не только на краях. Промежуточные цвета часто имеют худший контраст, чем начальная и конечная точки. Около 8% мужчин и 0.5% женщин имеют нарушения цветовосприятия. Проверяйте градиенты через симуляторы цветовой слепости.
В том числе вы можете воспользоваться инструментом проверки контрастности на этом сайте.
При использовании с брендовыми, корпоративными или юридически значимыми интерфейсами учитывайте действующие инструкции по фирменному стилю, контрастности, доступности и другим требованиям к дизайну.
Рекомендуется проверять читаемость текста, контраст и соответствие стилю продукта перед переносом сгенерированных значений в боевые проекты. Администрация сайта не несет ответственности за визуальные и технические последствия использования подобранных цветов и градиентов.
Инструкция
Инструмент позволяет просматривать палитру Tailwind CSS / HEX / RGB / OKLCH, копировать отдельные значения цветов в разных форматах и создавать пользовательские градиенты из выбранных оттенков.
Работа с палитрой
В таблице представлены основные цветовые группы Tailwind и их оттенки. Наведите курсор на ячейку, чтобы увидеть информацию о цвете. Клик по цвету копирует его значение в глобально выбранном формате (Tailwind-ключ, HEX или RGB или OKLCH).
Режим создания градиента
Включите режим градиента с помощью соответствующей кнопки. В этом режиме клик по цвету добавляет его в список выбранных (до 5 штук). Повторный клик по уже выбранному цвету убирает его из набора.
После выбора минимум двух цветов вы увидите предпросмотр градиента и блок с кодом. Можно менять направление градиента нажатием в выпадающем списке или кликом по предпросмотру (направления переключаются по кругу).
Форматы кода
Для пользовательского градиента и готовых примеров доступны три режима кода: Tailwind классы, с HEX, с RGB и OKLCH значениями. Переключение формата возможно глобально в шапке страницы, а также выполняется кнопками над блоком кода, а копирование - кнопкой «Копировать».
Готовые градиенты
Внизу страницы представлены несколько преднастроенных градиентов. Для каждого доступен предпросмотр, смена направления по клику и переключение формата кода. Это удобная отправная точка для быстрого использования или дальнейшей доработки.
Рекомендации по использованию
Используйте не менее двух и не более пяти цветов в одном градиенте, чтобы сохранить читаемость и аккуратный визуальный переход. При внесении в проект проверяйте отображение на разных экранах и в тёмной/светлой теме.
Поддержка устройств
Инструмент адаптирован для работы онлайн в современных версиях браузеров на мобильных устройствах (смартфонах), планшетах, стационарных компьютерах и ноутбуках.
Отсутствие навязчивости
Инструмент работает без навязчивых элементов. Всё как вы любите:
- без всплывающих окон
- без назойливой рекламы
- без выпрыгивающих уведомлений
- без регистрации и смс
- без установки приложений
- без авторизаций
- без необходимости скачивать программы
- без водяных знаков
- без требования оплаты
- на русском языке
Это простой онлайн-инструмент, который выполняет работу бесплатно без рекламы и ограничений.
Вам может быть интересно
Упаковщик иконок для сайта ICO, PNG, Android и iOS
Загрузите изображение и получите полный набор иконок: favicon.ico, 16×16/32×32, iOS, Android 192/512 и webmanifest и HTML в zip архиве.
Проверка контрастности текста по WCAG 2
Проверьте контрастность текста на градиентных и монотонных фонах. Поддержка Tailwind CSS, HEX, RGB и OKLCH, симуляция цветовой слепоты.
Редактор пиксельных иконок 16×16 с примерами
Онлайн инструменты для рисования favicon и пиксельных иконок 16×16, история до 500 шагов, импорт изображений и экспорт в ICO, PNG и SVG.
Поделиться