Оранжевый цвет Orange #FFA500

Где использовать оранжевый цвет

Оранжевый #FFA500 сочетает максимальный красный канал с заметной долей зелёного. Он привлекает внимание мягче красного и часто используется для призывов к действию, промо-элементов и дружелюбных энергичных интерфейсов.

Характер и восприятие

Оранжевый воспринимается как тёплый, открытый и деятельный. Тёмные варианты напоминают специи и осень, светлые - персик и мягкое освещение.

Подходящие задачи

• Основная или дополнительная CTA-кнопка.
• Промо-блок, акция или уведомление.
• Спортивная, образовательная и развлекательная тематика.

Практические рекомендации

• Для текста поверх чистого orange обычно лучше выбрать чёрный.
• Не ставьте рядом слишком много конкурирующих оранжевых элементов.
• Синий даёт сильный контраст, а коричневый и бежевый - спокойную тёплую палитру.

Как задать оранжевый цвет в HTML и CSS

В современной HTML-странице цвет оформляют через CSS. Для одного и того же оттенка можно использовать HEX-код, функции RGB и HSL или именованное значение orange.

.example {
  color: #000000;
  background-color: #ffa500;
}

Если значение понадобится в нескольких компонентах, вынесите его в CSS-переменную:

:root {
  --color-oranzhevyy: #ffa500;
}

.button {
  background: var(--color-oranzhevyy);
}