Подбор цвета для сайта

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

HEX
RGB
HSL
Готовые оттенки — кликните, чтобы выбрать.

Как цвета влияют на восприятие

КрасныйЭнергия, страсть, срочность, аппетит. Хорош для распродаж и кнопок действия.
СинийДоверие, надёжность, спокойствие. Любимый цвет банков, IT и медицины.
ЖёлтыйОптимизм, тепло, внимание. Привлекает взгляд, но утомляет в избытке.
ОранжевыйДружелюбие, энергия, доступность. Часто на кнопках «купить».
ЗелёныйПрирода, рост, безопасность, экология. Сигнал «всё хорошо».
ФиолетовыйПремиальность, креатив, загадочность. Бьюти и люкс-бренды.
РозовыйМягкость, забота, женская аудитория, сладость.
ЧёрныйПремиум, элегантность, сила. Дорогие бренды и техника.

Подбор цвета онлайн: HEX, RGB и HSL

Инструмент помогает подобрать нужный цвет и получить его код в форматах HEX (#RRGGBB), RGB и HSL, которые используются в вёрстке сайтов, CSS, графических редакторах и дизайне. Достаточно выбрать оттенок визуально или ввести код — и скопировать готовое значение для стилей или макета.

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

Выберите цвет в палитре, кликните по готовому оттенку или введите HEX-код — инструмент сразу покажет точный цвет и его значения во всех форматах. Скопируйте нужный код и вставьте в свойство CSS (например, color или background), в настройки темы сайта или в графический редактор.

Где это применяется

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

Советы по выбору цветов сайта

Используйте 2–3 основных цвета и придерживайтесь их по всему сайту. Следите за контрастом текста и фона — это влияет на читабельность и доступность, а значит и на поведенческие факторы. Кнопки призыва к действию выделяйте контрастным акцентным цветом, чтобы повысить конверсию.

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

Что делает подбор цвета?
Помогает выбрать цвет и узнать его код в форматах HEX, RGB, HSL — для использования в дизайне сайта, CSS и графике.
Что такое HEX-код цвета?
Это запись цвета в шестнадцатеричном виде, например #2d7ff9. Первые две цифры — красный, следующие — зелёный, последние — синий канал.

Похожие инструменты