Конвертер цветов

Как использовать конвертер цветов

1. Ввод цвета

Вы можете ввести цвет несколькими способами:

• Через текстовое поле: Введите цвет в любом формате (HEX, RGB, HSL, CMYK) в поле ввода. Система автоматически распознает формат и конвертирует цвет во все остальные форматы.
• Через цветовую палитру: Нажмите на цветной квадрат слева от поля ввода, чтобы открыть стандартную палитру выбора цвета. Выбранный цвет автоматически появится в поле ввода в формате HEX.

2. Поддерживаемые форматы

Конвертер поддерживает следующие форматы цветов:

• HEX: #FF5733 или #FF5733FF (с прозрачностью)
• RGB: rgb(255, 87, 51) или rgba(255, 87, 51, 0.8)
• HSL: hsl(11, 100%, 65%) или hsla(11, 100%, 65%, 0.8)
• CMYK: cmyk(0%, 66%, 80%, 0%)

3. Визуальный предпросмотр

После ввода цвета вы увидите:

• Большой цветной блок: Показывает текущий выбранный цвет
• Градиентная палитра: Отображает 10 похожих оттенков (от темного к светлому). Кликните на любой оттенок, чтобы выбрать его

4. Прозрачность (Alpha)

Используйте ползунок "Прозрачность (Alpha)" для настройки прозрачности цвета от 0% (полностью прозрачный) до 100% (полностью непрозрачный). Прозрачность применяется ко всем форматам вывода.

5. Генерация оттенков и гармоничных цветов

Используйте кнопки для создания цветовых схем:

• +10 светлее: Генерирует 10 более светлых оттенков текущего цвета
• +10 темнее: Генерирует 10 более темных оттенков текущего цвета
• Комплементарный: Создает противоположный цвет на цветовом круге (на 180°)
• Триада: Генерирует три гармоничных цвета, расположенных на равном расстоянии на цветовом круге (120° друг от друга)
• Аналогичная: Создает 5 похожих цветов, расположенных рядом на цветовом круге (по 30° друг от друга)

После генерации оттенков они появятся в разделе "Гармоничная цветовая схема". Кликните на любой цвет, чтобы выбрать его.

6. Палитры готовых цветов

Во вкладках палитр доступны готовые наборы цветов:

• Material Design: Официальная палитра Google Material Design
• TailwindCSS: Цвета из популярного CSS-фреймворка TailwindCSS
• Bootstrap: Стандартные цвета Bootstrap
• Пастельные: Мягкие, приглушенные цвета
• Корпоративные: Профессиональные цвета для бизнеса
• Последние цвета: История из 20 последних использованных цветов (сохраняется в браузере)

Кликните на любой цвет из палитры, чтобы выбрать его.

7. Копирование результатов

Для копирования цвета в нужном формате:

• Нажмите на иконку копирования рядом с нужным полем (HEX, RGB, HSL, CMYK)
• Или используйте кнопку "Копировать все форматы" для копирования всех форматов сразу

8. CSS код

В разделе "CSS код" автоматически генерируется готовый CSS-код для использования цвета в стилях. Выберите нужный формат (HEX, RGB, HSL) во вкладках и скопируйте код.

9. Проверка контрастности (WCAG)

Конвертер автоматически проверяет контрастность выбранного цвета:

• AAA: Контраст 7:1 и выше - отличная доступность
• AA: Контраст 4.5:1 и выше - хорошая доступность
• Недостаточно: Контраст ниже 4.5:1 - не рекомендуется для текста

Проверка выполняется для текста на белом и черном фоне. Это помогает убедиться, что цвет соответствует стандартам доступности WCAG.

10. Сохранение истории

Все использованные цвета автоматически сохраняются в истории (до 20 последних). Они доступны во вкладке "Последние цвета" в разделе палитр.

Часто задаваемые вопросы

Какие форматы цветов поддерживаются?

Поддерживаются все популярные форматы: HEX (#FF5733), RGB (255,87,51), RGBA (255,87,51,0.8), HSL (11,100%,65%), HSLA (11,100%,65%,0.8), CMYK (0%,66%,80%,0%).

Как работает автоматическое распознавание?

Система автоматически определяет формат по синтаксису: # для HEX, rgb() для RGB, hsl() для HSL, cmyk() для CMYK.

Что такое WCAG контрастность?

WCAG (Web Content Accessibility Guidelines) определяет стандарты доступности. AA уровень требует контраст 4.5:1, AAA - 7:1 для обычного текста.

Как использовать палитры?

Выберите готовую палитру (Material Design, TailwindCSS и др.) или используйте последние использованные цвета из истории.