как конвертировать цвета из rgb в hex и обратно

год назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Цвета в RGB и HEX представляют собой разные форматы цвета, которые часто используются в веб-разработке. Давайте посмотрим, как выполнить конвертацию в обоих направлениях.

RGB в HEX

Чтобы конвертировать RGB (например, rgb(255, 99, 71)) в HEX, используем формулу:

Каждый компонент (R, G, B) преобразуется в шестнадцатеричное число.
Формируем строку #RRGGBB.

Пример на JavaScript:

function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
}

console.log(rgbToHex(255, 99, 71)); // "#FF6347"

HEX в RGB

Чтобы конвертировать HEX (например, #FF6347) в RGB:

Разделите HEX на компоненты: FF, 63, 47.
Преобразуйте каждую часть в десятичное число.

Пример на JavaScript:

function hexToRgb(hex) {
    let bigint = parseInt(hex.slice(1), 16);
    let r = (bigint >> 16) & 255;
    let g = (bigint >> 8) & 255;
    let b = bigint & 255;
    return `rgb(${r}, ${g}, ${b})`;
}

console.log(hexToRgb("#FF6347")); // "rgb(255, 99, 71)"

10 месяцев назад

Elena Gromova

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Основы JavaScript

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

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

SASS

Навык работы с препроцессором SASS для эффективной и структурированной стилизации веб-приложений

Похожие вопросы