Генератор градиента палитры Tailwind с HEX, RGB, OKLCH
Перед использованием
Используя данный инструмент, вы подтверждаете, что изучили инструкцию и согласны с правилами использования.
Превью градиента
Готовые градиенты
Вы можете обратиться за консультацией или разработкой аналогичных инструментов на заказ (Web, Windows, MacOs, Linux, IOS, Android)
Об использовании
Инструмент для подбора цветов и градиентов из палитры 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 значениями. Переключение формата возможно глобально в шапке страницы, а также выполняется кнопками над блоком кода, а копирование - кнопкой «Копировать».
Готовые градиенты
Внизу страницы представлены несколько преднастроенных градиентов. Для каждого доступен предпросмотр, смена направления по клику и переключение формата кода. Это удобная отправная точка для быстрого использования или дальнейшей доработки.
Рекомендации по использованию
Используйте не менее двух и не более пяти цветов в одном градиенте, чтобы сохранить читаемость и аккуратный визуальный переход. При внесении в проект проверяйте отображение на разных экранах и в тёмной/светлой теме.
Поддержка устройств
Инструмент адаптирован для работы онлайн в современных версиях браузеров на мобильных устройствах (смартфонах), планшетах, стационарных компьютерах и ноутбуках.
Отсутствие навязчивости
Инструмент работает без навязчивых элементов. Всё как вы любите:
- без всплывающих окон
- без назойливой рекламы
- без выпрыгивающих уведомлений
- без регистрации и смс
- без установки приложений
- без авторизаций
- без необходимости скачивать программы
- без водяных знаков
- без скрытых маркеров
- без требования оплаты
Это простой и удобный онлайн‑инструмент, который выполняет свою работу быстро и бесплатно, сохраняя чистый результат без рекламы и ограничений.
