Палитра Цветов

Обзор инструмента: Селектор Цветов

Этот инструмент предоставляет выбор, конвертацию и анализ цветов в множественных форматах. Необходим для дизайнеров, веб-разработчиков и всех, кто работает с цифровыми цветами, предлагая конвертацию между HEX, RGB, HSL, HSV и другими цветовыми форматами.

Что такое Селектор Цветов

Селектор Цветов помогает подбирать цвета и получать значения и быстро экспортировать результат.

Как пользоваться

1. Загрузите файл или вставьте содержимое.
2. Настройте размер, качество, формат или эффекты.
3. Просмотрите и скачайте результат.

Частые сценарии

• Оптимизация ассетов для web и приложений
• Конвертация форматов для дизайна/разработки
• Быстрые правки для соцсетей/маркетплейсов

❓ Частые вопросы

В1: После сжатия мыльно?
О: Повышайте качество или снижайте степень сжатия.

В2: Нужна прозрачность?
О: Используйте PNG/WebP или совместимый формат.

В3: Пакетная обработка?
О: Делите на небольшие партии для стабильности.

✨ Основные Характеристики

• 🎨 Визуальный Селектор : Интуитивный интерфейс для выбора цветов
• 🔄 Множественная Конвертация : HEX, RGB, HSL, HSV, CMYK и другие
• 🎯 Цветовые Палитры : Генерация гармоничных палитр
• 📋 Копирование Одним Кликом : Цветовые коды могут быть скопированы напрямую
• 🌈 Анализ Цвета : Подробная информация о яркости и контрасте

📖 Примеры Использования

Конвертация Цветовых Форматов

Базовый Цвет: Средний Синий

Доступные Форматы:

• HEX: #3498db
• RGB: rgb(52, 152, 219)
• HSL: hsl(204, 70%, 53%)
• HSV: hsv(204, 76%, 86%)
• CMYK: cmyk(76%, 31%, 0%, 14%)

Гармоничная Цветовая Палитра

Основной Цвет: #e74c3c (Красный)

Комплементарная Палитра:

• Основной: #e74c3c
• Комплементарный: #3ce7a8
• Аналогичный 1: #e7a83c
• Аналогичный 2: #a83ce7
• Триадный 1: #3ce74c
• Триадный 2: #4c3ce7

🎯 Сценарии Применения

1. Дизайн Интерфейса

/* Система цветов для интерфейса */
:root {
  /* Основные Цвета */
  --основной-цвет: #3498db;
  --основной-цвет-темный: #2980b9;
  --основной-цвет-светлый: #5dade2;

  /* Вторичные Цвета */
  --вторичный-цвет: #e74c3c;
  --вторичный-цвет-темный: #c0392b;
  --вторичный-цвет-светлый: #ec7063;

  /* Нейтральные Цвета */
  --цвет-текста-основной: #2c3e50;
  --цвет-текста-вторичный: #7f8c8d;
  --цвет-фона: #ecf0f1;
  --цвет-фона-темный: #34495e;

  /* Цвета Состояний */
  --цвет-успеха: #27ae60;
  --цвет-предупреждения: #f39c12;
  --цвет-ошибки: #e74c3c;
  --цвет-информации: #3498db;

  /* Градиенты */
  --градиент-основной: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --градиент-вторичный: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --градиент-нейтральный: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

/* Компоненты с системой цветов */
.кнопка-основная {
  background-color: var(--основной-цвет);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.кнопка-основная:hover {
  background-color: var(--основной-цвет-темный);
}

.карточка {
  background-color: white;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.уведомление-успех {
  background-color: rgba(39, 174, 96, 0.1);
  border-left: 4px solid var(--цвет-успеха);
  color: var(--цвет-успеха);
  padding: 16px;
  border-radius: 4px;
}

.темная-тема {
  --цвет-фона: #2c3e50;
  --цвет-текста-основной: #ecf0f1;
  --цвет-текста-вторичный: #bdc3c7;
}

2. Генератор Палитр

// Продвинутый генератор цветовых палитр
class ГенераторПалитр {
  constructor() {
    this.поддерживаемыеФорматы = ['hex', 'rgb', 'hsl', 'hsv'];
  }

  // Конвертировать HEX в RGB
  hexВRgb(hex) {
    const результат = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return результат ? {
      r: parseInt(результат[1], 16),
      g: parseInt(результат[2], 16),
      b: parseInt(результат[3], 16)
    } : null;
  }

  // Конвертировать RGB в HSL
  rgbВHsl(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;

    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

      switch (max) {
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
    }

    return {
      h: Math.round(h * 360),
      s: Math.round(s * 100),
      l: Math.round(l * 100)
    };
  }

  // Конвертировать HSL в RGB
  hslВRgb(h, s, l) {
    h /= 360;
    s /= 100;
    l /= 100;

    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };

    let r, g, b;

    if (s === 0) {
      r = g = b = l;
    } else {
      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      const p = 2 * l - q;
      r = hue2rgb(p, q, h + 1/3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1/3);
    }

    return {
      r: Math.round(r * 255),
      g: Math.round(g * 255),
      b: Math.round(b * 255)
    };
  }

  // Конвертировать RGB в HEX
  rgbВHex(r, g, b) {
    return "#" + [r, g, b].map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? "0" + hex : hex;
    }).join("");
  }

  // Генерировать комплементарную палитру
  генерироватьКомплементарнуюПалитру(базовыйЦвет) {
    const rgb = this.hexВRgb(базовыйЦвет);
    const hsl = this.rgbВHsl(rgb.r, rgb.g, rgb.b);

    const комплементарный = {
      h: (hsl.h + 180) % 360,
      s: hsl.s,
      l: hsl.l
    };

    const rgbКомплементарный = this.hslВRgb(комплементарный.h, комплементарный.s, комплементарный.l);

    return {
      оригинал: базовыйЦвет,
      комплементарный: this.rgbВHex(rgbКомплементарный.r, rgbКомплементарный.g, rgbКомплементарный.b),
      информация: {
        оригинал: { hex: базовыйЦвет, rgb, hsl },
        комплементарный: {
          hex: this.rgbВHex(rgbКомплементарный.r, rgbКомплементарный.g, rgbКомплементарный.b),
          rgb: rgbКомплементарный,
          hsl: комплементарный
        }
      }
    };
  }

  // Генерировать триадную палитру
  генерироватьТриаднуюПалитру(базовыйЦвет) {
    const rgb = this.hexВRgb(базовыйЦвет);
    const hsl = this.rgbВHsl(rgb.r, rgb.g, rgb.b);

    const цвета = [
      { h: hsl.h, s: hsl.s, l: hsl.l },
      { h: (hsl.h + 120) % 360, s: hsl.s, l: hsl.l },
      { h: (hsl.h + 240) % 360, s: hsl.s, l: hsl.l }
    ];

    return цвета.map((цвет, индекс) => {
      const rgbЦвет = this.hslВRgb(цвет.h, цвет.s, цвет.l);
      return {
        название: `Триадный ${индекс + 1}`,
        hex: this.rgbВHex(rgbЦвет.r, rgbЦвет.g, rgbЦвет.b),
        rgb: rgbЦвет,
        hsl: цвет
      };
    });
  }

  // Генерировать аналогичную палитру
  генерироватьАналогичнуюПалитру(базовыйЦвет, количество = 5) {
    const rgb = this.hexВRgb(базовыйЦвет);
    const hsl = this.rgbВHsl(rgb.r, rgb.g, rgb.b);

    const цвета = [];
    const приращение = 30; // 30 градусов разности
    const начало = -(количество - 1) / 2;

    for (let i = 0; i < количество; i++) {
      const новыйH = (hsl.h + (начало + i) * приращение + 360) % 360;
      const новыйЦвет = { h: новыйH, s: hsl.s, l: hsl.l };
      const rgbЦвет = this.hslВRgb(новыйЦвет.h, новыйЦвет.s, новыйЦвет.l);

      цвета.push({
        название: i === Math.floor(количество / 2) ? 'Основной' : `Аналогичный ${i + 1}`,
        hex: this.rgbВHex(rgbЦвет.r, rgbЦвет.g, rgbЦвет.b),
        rgb: rgbЦвет,
        hsl: новыйЦвет
      });
    }

    return цвета;
  }

  // Генерировать монохроматическую палитру
  генерироватьМонохроматическуюПалитру(базовыйЦвет, количество = 5) {
    const rgb = this.hexВRgb(базовыйЦвет);
    const hsl = this.rgbВHsl(rgb.r, rgb.g, rgb.b);

    const цвета = [];
    const приращениеЯркости = 80 / (количество - 1);

    for (let i = 0; i < количество; i++) {
      const новаяЯркость = Math.max(10, Math.min(90, 10 + i * приращениеЯркости));
      const новыйЦвет = { h: hsl.h, s: hsl.s, l: новаяЯркость };
      const rgbЦвет = this.hslВRgb(новыйЦвет.h, новыйЦвет.s, новыйЦвет.l);

      цвета.push({
        название: `Монохроматический ${i + 1}`,
        hex: this.rgbВHex(rgbЦвет.r, rgbЦвет.g, rgbЦвет.b),
        rgb: rgbЦвет,
        hsl: новыйЦвет
      });
    }

    return цвета;
  }

  // Вычислить контраст между двумя цветами
  вычислитьКонтраст(цвет1, цвет2) {
    const яркость = (цвет) => {
      const rgb = this.hexВRgb(цвет);
      const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(c => {
        c = c / 255;
        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
      });
      return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    };

    const яркость1 = яркость(цвет1);
    const яркость2 = яркость(цвет2);
    const контраст = (Math.max(яркость1, яркость2) + 0.05) / (Math.min(яркость1, яркость2) + 0.05);

    return {
      соотношение: контраст,
      уровень: контраст >= 7 ? 'AAA' : контраст >= 4.5 ? 'AA' : контраст >= 3 ? 'AA Большой' : 'Неудача',
      подходящий: контраст >= 4.5
    };
  }

  // Генерировать палитру Material Design
  генерироватьПалитруMaterialDesign(базовыйЦвет) {
    const rgb = this.hexВRgb(базовыйЦвет);
    const hsl = this.rgbВHsl(rgb.r, rgb.g, rgb.b);

    const тона = {
      50: { s: Math.max(10, hsl.s - 40), l: 95 },
      100: { s: Math.max(20, hsl.s - 30), l: 90 },
      200: { s: Math.max(30, hsl.s - 20), l: 80 },
      300: { s: Math.max(40, hsl.s - 10), l: 70 },
      400: { s: hsl.s, l: 60 },
      500: { s: hsl.s, l: hsl.l }, // Базовый цвет
      600: { s: Math.min(100, hsl.s + 10), l: Math.max(10, hsl.l - 10) },
      700: { s: Math.min(100, hsl.s + 20), l: Math.max(10, hsl.l - 20) },
      800: { s: Math.min(100, hsl.s + 30), l: Math.max(10, hsl.l - 30) },
      900: { s: Math.min(100, hsl.s + 40), l: Math.max(10, hsl.l - 40) }
    };

    const палитра = {};

    for (const [тон, значения] of Object.entries(тона)) {
      const rgbТон = this.hslВRgb(hsl.h, значения.s, значения.l);
      палитра[тон] = {
        hex: this.rgbВHex(rgbТон.r, rgbТон.g, rgbТон.b),
        rgb: rgbТон,
        hsl: { h: hsl.h, s: значения.s, l: значения.l }
      };
    }

    return палитра;
  }
}

// Пример использования
const генератор = new ГенераторПалитр();

// Генерировать различные типы палитр
const базовыйЦвет = '#3498db';

console.log('Комплементарная Палитра:', генератор.генерироватьКомплементарнуюПалитру(базовыйЦвет));
console.log('Триадная Палитра:', генератор.генерироватьТриаднуюПалитру(базовыйЦвет));
console.log('Аналогичная Палитра:', генератор.генерироватьАналогичнуюПалитру(базовыйЦвет));
console.log('Монохроматическая Палитра:', генератор.генерироватьМонохроматическуюПалитру(базовыйЦвет));
console.log('Палитра Material Design:', генератор.генерироватьПалитруMaterialDesign(базовыйЦвет));

// Вычислить контраст
const контраст = генератор.вычислитьКонтраст('#3498db', '#ffffff');
console.log('Анализ Контраста:', контраст);

3. Система Тем

// Система тем с цветовыми палитрами
class СистемаТем {
  constructor() {
    this.темы = new Map();
    this.активнаяТема = null;
  }

  // Создать пользовательскую тему
  создатьТему(название, палитраЦветов, конфигурации = {}) {
    const тема = {
      название,
      цвета: палитраЦветов,
      конфигурации: {
        типография: конфигурации.типография || 'Inter, sans-serif',
        отступы: конфигурации.отступы || 'обычные',
        границы: конфигурации.границы || 'закругленные',
        тени: конфигурации.тени || 'мягкие',
        ...конфигурации
      },
      созданоВ: new Date().toISOString()
    };

    this.темы.set(название, тема);
    return тема;
  }

  // Применить тему
  применитьТему(названиеТемы) {
    const тема = this.темы.get(названиеТемы);
    if (!тема) {
      throw new Error(`Тема '${названиеТемы}' не найдена`);
    }

    // Применить CSS переменные
    const root = document.documentElement;

    Object.entries(тема.цвета).forEach(([свойство, значение]) => {
      root.style.setProperty(`--${свойство}`, значение);
    });

    // Применить дополнительные конфигурации
    if (тема.конфигурации.типография) {
      root.style.setProperty('--основной-шрифт', тема.конфигурации.типография);
    }

    this.активнаяТема = названиеТемы;

    // Сохранить предпочтение
    localStorage.setItem('активная-тема', названиеТемы);

    // Отправить событие
    window.dispatchEvent(new CustomEvent('тема-изменена', {
      detail: { тема: названиеТемы, конфигурация: тема }
    }));

    return тема;
  }

  // Генерировать автоматическую тему из базового цвета
  генерироватьАвтоматическуюТему(название, основнойЦвет, стиль = 'современный') {
    const генератор = new ГенераторПалитр();
    const палитраMaterial = генератор.генерироватьПалитруMaterialDesign(основнойЦвет);

    let палитраЦветов;

    switch (стиль) {
      case 'современный':
        палитраЦветов = {
          'основной-цвет': палитраMaterial[500].hex,
          'основной-цвет-светлый': палитраMaterial[300].hex,
          'основной-цвет-темный': палитраMaterial[700].hex,
          'вторичный-цвет': генератор.генерироватьКомплементарнуюПалитру(основнойЦвет).комплементарный,
          'цвет-фона': '#ffffff',
          'цвет-фона-вторичный': палитраMaterial[50].hex,
          'цвет-текста': '#2c3e50',
          'цвет-текста-вторичный': '#7f8c8d',
          'цвет-границы': палитраMaterial[200].hex,
          'цвет-успеха': '#27ae60',
          'цвет-предупреждения': '#f39c12',
          'цвет-ошибки': '#e74c3c'
        };
        break;

      case 'темный':
        палитраЦветов = {
          'основной-цвет': палитраMaterial[400].hex,
          'основной-цвет-светлый': палитраMaterial[300].hex,
          'основной-цвет-темный': палитраMaterial[600].hex,
          'вторичный-цвет': генератор.генерироватьКомплементарнуюПалитру(основнойЦвет).комплементарный,
          'цвет-фона': '#1a1a1a',
          'цвет-фона-вторичный': '#2d2d2d',
          'цвет-текста': '#ffffff',
          'цвет-текста-вторичный': '#b0b0b0',
          'цвет-границы': '#404040',
          'цвет-успеха': '#4caf50',
          'цвет-предупреждения': '#ff9800',
          'цвет-ошибки': '#f44336'
        };
        break;

      case 'минималистский':
        палитраЦветов = {
          'основной-цвет': палитраMaterial[600].hex,
          'основной-цвет-светлый': палитраMaterial[400].hex,
          'основной-цвет-темный': палитраMaterial[800].hex,
          'вторичный-цвет': '#6c757d',
          'цвет-фона': '#fafafa',
          'цвет-фона-вторичный': '#f5f5f5',
          'цвет-текста': '#212529',
          'цвет-текста-вторичный': '#6c757d',
          'цвет-границы': '#dee2e6',
          'цвет-успеха': '#198754',
          'цвет-предупреждения': '#fd7e14',
          'цвет-ошибки': '#dc3545'
        };
        break;
    }

    return this.создатьТему(название, палитраЦветов, {
      стиль,
      сгенерированоАвтоматически: true,
      базовыйЦвет: основнойЦвет
    });
  }

  // Экспортировать тему
  экспортироватьТему(названиеТемы) {
    const тема = this.темы.get(названиеТемы);
    if (!тема) {
      throw new Error(`Тема '${названиеТемы}' не найдена`);
    }

    return {
      версия: '1.0',
      тема: тема,
      экспортированоВ: new Date().toISOString()
    };
  }

  // Импортировать тему
  импортироватьТему(данныеТемы) {
    if (!данныеТемы.тема || !данныеТемы.тема.название) {
      throw new Error('Недопустимые данные темы');
    }

    const тема = данныеТемы.тема;
    this.темы.set(тема.название, тема);

    return тема;
  }

  // Список доступных тем
  списокТем() {
    return Array.from(this.темы.entries()).map(([название, тема]) => ({
      название,
      стиль: тема.конфигурации.стиль || 'пользовательский',
      основнойЦвет: тема.цвета['основной-цвет'],
      созданоВ: тема.созданоВ
    }));
  }
}

// Пример использования
const системаТем = new СистемаТем();

// Генерировать автоматические темы
системаТем.генерироватьАвтоматическуюТему('Синий Современный', '#3498db', 'современный');
системаТем.генерироватьАвтоматическуюТему('Зеленый Темный', '#27ae60', 'темный');
системаТем.генерироватьАвтоматическуюТему('Фиолетовый Минималистский', '#9b59b6', 'минималистский');

// Применить тему
системаТем.применитьТему('Синий Современный');

// Список тем
console.log('Доступные Темы:', системаТем.списокТем());

🔧 Технические Детали

Поддерживаемые Цветовые Форматы

HEX (Шестнадцатеричный):

• Формат: #RRGGBB или #RGB
• Пример: #3498db, #fff

RGB (Red, Green, Blue):

• Формат: rgb(r, g, b)
• Значения: 0-255 для каждого канала
• Пример: rgb(52, 152, 219)

HSL (Hue, Saturation, Lightness):

• Формат: hsl(h, s%, l%)
• H: 0-360°, S: 0-100%, L: 0-100%
• Пример: hsl(204, 70%, 53%)

HSV/HSB (Hue, Saturation, Value/Brightness):

• Похож на HSL, но с Value вместо Lightness
• Пример: hsv(204, 76%, 86%)

Теория Цвета

Цветовая Гармония:

• Комплементарная: Противоположные цвета на цветовом круге
• Аналогичная: Соседние цвета на цветовом круге
• Триадная: Три равноудаленных цвета на круге
• Монохроматическая: Вариации одного цвета

Контраст и Доступность:

• WCAG AA: Минимальное соотношение контраста 4.5:1
• WCAG AAA: Минимальное соотношение контраста 7:1
• Большой Текст: Минимальное соотношение 3:1

💡 Советы по Использованию

• Доступность : Всегда проверяйте контраст между текстом и фоном
• Последовательность : Используйте последовательную цветовую систему во всем проекте
• Контекст : Учитывайте культурное значение цветов
• Тестирование : Тестируйте цвета на разных устройствах и условиях освещения

⚠️ Важные Замечания

• Дальтонизм : Учитывайте пользователей с нарушениями цветового зрения
• Печать : Цвета могут выглядеть по-разному при печати
• Мониторы : Калибровка монитора влияет на восприятие цветов
• Культурный Контекст : Значения цветов различаются между культурами

🚀 Как Использовать

1. Выбор Цвета : Используйте визуальный селектор или введите цветовой код
2. Конвертация Формата : Автоматически просматривайте цвет в разных форматах
3. Генерация Палитры : Выберите тип гармонии для генерации палитр
4. Анализ Контраста : Проверьте доступность цветовых комбинаций
5. Использование Копирования : Нажмите на любой код для его копирования

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