🔧Toolify

Бесплатные инструменты цвета и дизайна — пипетки, палитры, контраст, градиенты

Практическая работа с цветом для веба: пипетка с HEX/RGB/HSL, генераторы палитр и градиентов, проверка контраста WCAG для читаемости, симуляция дальтонизма и инструменты CSS-теней. Создано для дизайнеров и фронтенд-разработчиков, которым нужна точная значение и доступный выбор, готово к копированию-вставке.

Конвертер цветов (HEX, RGB, HSL — мгновенно)

Конвертируйте цвета между HEX, RGB и HSL с предварительным просмотром. Редактируйте любое поле — остальные обновляются.

Проверка контраста (оценки WCAG AA / AAA)

Проверьте соотношение контраста цветов текста и фона. Показывает предварительный просмотр и значки прохождения/непрохождения WCAG AA и AAA для обычного и крупного текста.

Генератор CSS-градиентов (линейный, радиальный, конический)

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

Генератор цветовой палитры (5 схем из одного базового цвета)

Генерируйте гармоничные цветовые палитры из базового цвета: комплементарная, аналоговая, триадная, тетрадная, монохроматическая. Нажмите на образец для копирования hex.

Симулятор Цветослепоты — Видьте Цвета Глазами Других

Введите любой шестнадцатеричный цвет и мгновенно увидите, как он выглядит при дейтеранопии, протанопии, тританопии и ахроматопсии. Незаменим для доступного дизайна.

Генератор CSS Box Shadow (с живым предпросмотром)

Создавайте значения CSS box-shadow визуально. Настраивайте смещение, размытие, распространение, цвет, прозрачность и вставку. Живой предпросмотр, готовый CSS для копирования.

Поиск CSS-имён цветов — ближайший именованный цвет по HEX

Введите любой HEX-цвет и найдите ближайшее CSS-имя цвета. Показывает 5 ближайших именованных цветов с точными HEX-значениями и оценкой расстояния.

Генератор оттенков цвета — стиль Tailwind CSS

Создавайте 11 оттенков (50–950) для любого цвета в стиле шкалы Tailwind CSS. Кликните на оттенок, чтобы скопировать его hex-код, или экспортируйте всё как CSS-переменные.

Все инструменты