🎨 CSS Colors Visualizer

Профессиональный инструмент для работы с цветами — 9 мощных вкладок в одном месте

🎡 Color Wheel
🎨 Trending Palettes
🎲 Random Generator
🌈 Gradient Builder
🎯 WCAG Checker
📊 Цветовые схемы
#667eea
HEX
#667eea
RGB
rgb(102, 126, 234)
HSL
hsl(228, 76%, 66%)
🎯 Базовый цвет (HEX):
🌗 Градации (Shades & Tints)
Оттенки от белого к чёрному через базовый цвет. Кликни на цвет для копирования.
🎨 Монохромная палитра
Вариации насыщенности при фиксированном hue. Кликни на цвет для копирования.
💡 Как пользоваться
Цветовое колесо — кликай для выбора цвета или введи HEX. Схемы строятся автоматически от базового цвета.
📊 Цветовые схемы:
  • Complementary — противоположный цвет (180°). Создаёт максимальный контраст.
  • Analogous — соседние цвета (±30°). Гармоничные, мягкие сочетания.
  • Triadic — три равноудалённых цвета (120°). Яркие, сбалансированные.
  • Split — цвет + два соседних к противоположному. Менее контрастно, чем complementary.
  • Tetradic — четыре цвета через 90°. Богатые, сложные палитры.
🚀 Все 9 вкладок:
  • 🎡 Color Wheel — интерактивное колесо, схемы, градации, монохром
  • 🎨 Trending — 20 трендовых палитр (как Coolors.co)
  • 🎲 Random — генератор случайных палитр (Space для генерации)
  • 🌈 Gradient — конструктор CSS градиентов (linear/radial/conic)
  • 🎯 Contrast — проверка WCAG AA/AAA для доступности
  • 👁️ Blindness — симулятор дальтонизма (5 типов)
  • 🖼️ Extract — извлечение палитры из изображения
  • 💾 Export — сохранение и экспорт (CSS/Tailwind/SCSS)
  • 📚 Names — справочник 147 HTML цветов по категориям
💎 Возможности:
  • Клик на любой цвет → копирование HEX
  • Генерация градаций (от белого к чёрному)
  • Монохромные палитры (вариации насыщенности)
  • Экспорт в CSS, Tailwind, SCSS
  • Сохранение палитр в localStorage
  • Работает полностью в браузере (приватно)
🎨 Трендовые палитры
Популярные цветовые сочетания. Кликни на цвет, чтобы скопировать.
🎲 Random Palette Generator
Нажми Space или кнопку для генерации. Кликни 🔒 чтобы заблокировать цвет.
📜 История (последние 10)
🌈 Gradient Generator
Создай CSS градиент. Кликни на цвет чтобы изменить.
Тип:
Угол: 90°
Цвета:
Preview:
CSS Code:
🎯 Contrast Checker (WCAG)
Проверь контрастность текста по стандартам WCAG AA/AAA
Foreground (текст):
Background (фон):
Контрастность:
4.5:1
Preview:

Пример заголовка

Это пример текста для проверки контрастности между цветом текста и фоном.

WCAG AA (4.5:1)
PASS ✓
WCAG AAA (7:1)
PASS ✓
👁️ Color Blindness Simulator
Как видят цвета люди с разными типами дальтонизма
🖼️ Image Color Extractor
Загрузи изображение и извлеки 5 основных цветов
💾 Save & Export
Сохраняй палитры и экспортируй в разные форматы
📚 Сохранённые палитры:
📚 Справочник HTML цветов