Конфигурация цветов в ESPHome

Цветовая схема — основа визуального дизайна интерфейса. В ESPHome цвета определяются централизованно для единообразия и удобства изменения темы оформления.

В этом проекте используется отдельный файл colors.yaml, который подключается в main.yaml

Структура конфигурации цвета

Базовый формат

- id: color_sky_blue
  hex: 3FA7F3

Параметры

id

Назначение: Уникальный идентификатор цвета

• Используется для ссылки в LVGL виджетах
• Рекомендуется описательное имя
• Формат: color_название_цвета

hex

Назначение: Шестнадцатеричный код цвета

• Формат: RRGGBB (без символа #)
• Диапазон: 000000 (черный) до FFFFFF (белый)
• Пример: 3FA7F3 = RGB(63, 167, 243)

Практическое использование

В LVGL виджетах

# Кнопка
- button:
    bg_color: color_sky_blue
    border_color: color_blue
    shadow_color: color_black

# Текст
- label:
    text_color: color_white

# Дуга
- arc:
    arc_color: color_dark_gray

Адаптивные цвета

# Цвет в зависимости от состояния
switch:
  - platform: template
    turn_on_action:
      - lvgl.label.update:
          id: my_status
          text_color: color_green
    turn_off_action:
      - lvgl.label.update:
          id: my_status
          text_color: color_steel_blue

Оптимизация для дисплея

16-битная глубина цвета

При color_depth: 16 цвета автоматически конвертируются в RGB565:

• Красный: 5 бит (32 оттенка)
• Зеленый: 6 бит (64 оттенка)
• Синий: 5 бит (32 оттенка)

Рекомендации

• Избегайте слишком тонких градаций
• Тестируйте цвета на реальном дисплее
• Учитывайте особенности LCD панели

Заключение

Продуманная цветовая схема обеспечивает:

• Читаемость — достаточный контраст для всех элементов
• Интуитивность — семантически правильные цвета
• Единообразие — централизованное управление палитрой
• Эстетику — гармоничное сочетание оттенков

Используйте предложенную палитру как основу и адаптируйте под свои потребности, сохраняя принципы контрастности и семантической корректности.