01 Зачем нужен конвертер цветов StyleDa
Четыре главные задачи, которые инструмент решает мгновенно для дизайнеров и верстальщиков:
Перевод в любой формат
Мгновенный перевод между HEX, RGB, HSL, HSV и полиграфическим CMYK. Введите цвет в любом виде — все остальные форматы рассчитаются автоматически.
Проверка читаемости (WCAG)
Две наглядные плашки показывают коэффициент контрастности текста белого и чёрного цвета. Уровни AA и AAA гарантируют, что надписи на вашем сайте будут отлично читаться.
Наглядная настройка ползунками
Подбирайте нужный оттенок визуально ползунками RGB или HSL. Умные градиенты на каждой шкале показывают, куда сдвинется цвет при перемещении.
Названия цветов и история
Узнайте литературное имя цвета («Томатный», «Изумрудный»), выбирайте из 40 популярных веб-цветов в палитре и возвращайтесь к 10 последним цветам из истории.
02 Быстрый старт: Как пользоваться (Пошагово)
Конвертация цвета и проверка контраста состоят из 3 простых шагов и выполняются за считанные секунды:
Выберите цвет на палитре или вставьте любой код
Слева вверху отображается цветной квадрат с текущим HEX-кодом и названием. Нажмите на иконку палитры рядом с образцом, чтобы открыть системный выбор цвета, или вставьте в поле ввода код любого вида: #FF6347, rgb(255,99,71), hsl(9,100%,64%) или даже голые числа 255 99 71. Совет StyleDa: если введённый формат неверный, поле ввода автоматически подсветится красным.
Настройте оттенок ползунками RGB и HSL
При необходимости донастройте цвет визуально: каналами R, G, B (красный, зелёный, синий от 0 до 255) или H, S, L (тон от 0 до 360°, насыщенность и светлота от 0 до 100%). У каждого ползунка отображается градиент направления. Рекомендация StyleDa: при создании цветовых схем для сайта на Tilda удобнее всего регулировать тон (H) и светлоту (L) именно в системе HSL.
Скопируйте нужный формат и проверьте контраст WCAG
В блоке результатов мгновенно рассчитываются 5 строк: HEX, RGB, HSL, HSV и CMYK. Нажмите кнопку «Копировать» у нужного формата. Обязательно обратите внимание на блок «Контраст текста»: уровень AA или AAA гарантирует, что текст на этом фоне будет отлично читаться с любых экранов по стандарту WCAG 2.1.
03 Секреты удобства и дополнительные функции
Полезные мелочи, которые экономят время при разработке дизайна:
Кнопка «Случайный цвет»
Генерирует неожиданный, но сочный оттенок. Отличный способ найти свежую идею для акцентной кнопки или фона лендинга, когда закончилось вдохновение.
Палитра веб-цветов (40 шт.)
Подборка из 40 самых популярных классических веб-цветов с их названиями и HEX-кодами. Клик по любой ячейке мгновенно загружает оттенок в конвертер.
История: Недавние цвета
Сервис автоматически сохраняет последние 10 выбранных вами цветов. Вы можете мгновенно переключаться между ними в процессе сравнения или вёрстки.
04 Часто задаваемые вопросы (FAQ)
Ответы на популярные вопросы о форматах записи, стандартах контраста и работе сервиса:
#FF6347), стандарт де-факто для CSS и веб-дизайна. RGB — интенсивность красного, зелёного и синего каналов (от 0 до 255). HSL — тон (Hue), насыщенность (Saturation) и светлота (Lightness), наиболее удобный формат для визуального подбора палитр. Наш сервис отображает их все одновременно.
#FF6347) или RGB / RGBA (если требуется указать полупрозрачность фона). Формат HSL идеально подходит на этапе создания макета, когда нужно подобрать более светлый или тёмный оттенок акцентного цвета.
#FF6347, и FF6347, и сокращённый 3-значный код f63, и даже числа через пробел 255 99 71.
💬 Комментарии