Создание палитры оттенков онлайн: пошаговая инструкция и онлайн-генератор

Палитра оттенков — это набор цветов, объединённых по определённому принципу: одинаковый тон, разная насыщенность или светлота. Без неё сайт выглядит хаотично, а логотип — любительским. Запомните: глаз человека различает до 10 миллионов цветов, но согласованная палитра использует не более 5–7 ключевых оттенков.

Правило 60-30-10 отлично работает в UI: 60% — основной нейтральный цвет (фон), 30% — вторичный (заголовки, кнопки), 10% — акцентный (ссылки, иконки).

Ключевые понятия:

• Тон (hue) — положение на цветовом круге (0–360°);
• Насыщенность (saturation) — интенсивность цвета (0% — серый, 100% — чистый);
• Светлота (lightness) — близость к белому/чёрному (0% — чёрный, 100% — белый).

Используйте Генератор палитры оттенков онлайн, чтобы сразу увидеть результат.

Самый простой способ — вариация одного тона. Формула: для базового цвета H (0–360) берём тона H±30°, H±60°, H±120°.

Пример: пусть базовый цвет #3498db (hsl(204, 70%, 53%)). Создаём 5 оттенков:

1. H=204, S=70%, L=33% — тёмный;
2. H=204, S=70%, L=43% — чуть светлее;
3. H=204, S=70%, L=53% — базовый;
4. H=204, S=70%, L=63% — светлый;
5. H=204, S=70%, L=73% — очень светлый.

Если нужна контрастная пара: комплементарный тон = (H + 180) mod 360. Для H=204 это 24° (оранжевый оттенок).

Шаг 1. Откройте пустой HTML-документ. Подключите стили и скрипт. Шаг 2. Напишите функцию, которая генерирует оттенки:

<script>
function generatePalette(h, s, count) {
  const palette = [];
  for (let i = 0; i < count; i++) {
    const l = 30 + (i * 40) / (count - 1); // от 30% до 70%
    palette.push(`hsl(${h}, ${s}%, ${Math.round(l)}%)`);
  }
  return palette;
}
console.log(generatePalette(204, 70, 5));
</script>

Шаг 3. Выведите цвета на экран в виде квадратов. Шаг 4. Добавьте ползунки для изменения H, S, количества оттенков.

Совет: используйте CSS-переменные для быстрой смены темы.

Если не хотите писать код — воспользуйтесь Генератором палитры оттенков онлайн: скопируйте HSL-значения.

Бывает, что понравился цветовой строй готового изображения, но нет его кода. Тогда помогают инструменты извлечения палитры. Как это работает: программа анализирует пиксели, группирует похожие цвета и выдаёт 5–10 доминантных оттенков.

Метод на JavaScript (Canvas & Color Thief):

<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.min.js"></script>
<script>
  const img = document.getElementById('myImage');
  const colorThief = new ColorThief();
  const palette = colorThief.getPalette(img, 6);
  palette.forEach(c => console.log(`rgb(${c[0]},${c[1]},${c[2]})`));
</script>

Но проще использовать готовый сервис: загрузите фото в Палитра из изображения онлайн и получите HEX/HSL коды за секунду.

Если после извлечения палитра получилась пёстрой, отфильтруйте оттенки с разницей менее 30° или близкой светлотой.

Серая шкала — основа монохромного дизайна. Все оттенки серого имеют H и S = 0%, L от 0% (чёрный) до 100% (белый). Пример 10-шаговой шкалы:

Чтобы перевести цветное изображение в оттенки серого, усредните каналы: Gray = (R * 0.299 + G * 0.587 + B * 0.114). Или используйте Конвертер изображения в оттенки серого для быстрой обработки.

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

Ошибка №1: все цвета одинаковой светлоты. Палитра «плоская». Исправление: варьируйте L минимум на 15–20% между соседними оттенками.

Ошибка №2: избыточное количество цветов (более 7). Пользователь теряется. Правило: 3–5 для минимализма, 6–7 для сложных интерфейсов.

Ошибка №3: игнорирование контрастности. Текст на фоне должен иметь коэффициент контрастности ≥ 4.5:1 (WCAG AA). Используйте онлайн-калькулятор контрастности.

Также следите за психологией цвета: красный — опасность/энергия, синий — спокойствие/доверие, зелёный — природа/рост.

1. Проверка на дальтонизм: используйте симуляторы (Coblis, Colorblindly). Убедитесь, что вся информация передаётся не только цветом.

2. Тест контрастности: WebAIM Contrast Checker (актуально на 2026).

3. Превью на реальных макетах: загрузите палитру в Figma или Sketch, проверьте кнопки, текст, фоны.

4. Автоматическая генерация: используйте Генератор палитры оттенков онлайн, чтобы быстро получить 5–6 рабочих комбинаций для тестов.

5. A/B тест: покажите два варианта палитры коллегам/фокус-группе и спросите, какой лучше воспринимается.

Тёмная тема: снижайте общую светлоту фона (L=10–20%), но оставляйте насыщенность высокой (S=70–100%) для акцентов. Избегайте чистого белого текста — используйте светло-серый L=85%.

Палитра для печати: переводите цвета в CMYK (Cyan, Magenta, Yellow, Key). Формула преобразования из RGB:

где R',G',B' — нормированные на [0,1].

Палитра для бренда: выберите 1–2 ключевых цвета, затем 2–3 нейтральных. Зафиксируйте точные HEX- и HSL-значения в документации.