Як конвертувати RGB у HEX?

CSS, Веб-розробка  · 

Кольори у форматі RGB використовуються в CSS, графічному дизайні та програмуванні. Але іноді потрібно перевести їх у HEX. Ми вже писали про те як конвертувати HEX у RGB. Зараз розглянемо конвертацію в зворотньому напрямку.

Формат RGB

RGB-код складається з трьох чисел у діапазоні від 0 до 255, які відповідають інтенсивності червоного, зеленого та синього кольорів. Наприклад, rgb(255, 87, 51).

Як перевести RGB у HEX вручну

  1. Розбийте RGB на три компоненти: Наприклад, rgb(255, 87, 51) → 255, 87, 51.
  2. Переведіть кожне число у шістнадцяткову систему:
    • 255 (червоний) = FF
    • 87 (зелений) = 57
    • 51 (синій) = 33
  3. Отримайте HEX-значення: #FF5733.

Приклад коду на JavaScript

function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map(x => {
    let hex = x.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }).join("");
}

console.log(rgbToHex(255, 87, 51)); // #FF5733

Перетворення RGB у HEX не є складним процесом. Достатньо перевести кожен компонент у шістнадцяткову систему та об’єднати їх у єдиний рядок. Це корисна навичка для веб-розробників і дизайнерів. У нас є окрема сторінка, де ви можете конвертувати RGB у HEX.