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

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

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

Формат HEX

HEX-код кольору складається з # і шести символів (наприклад, #FF5733). Перші два символи позначають інтенсивність червоного, наступні два — зеленого, останні два — синього.

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

HEX-код — це шістнадцяткове число, а в RGB кожен компонент представлений у десятковій системі. Щоб конвертувати HEX у RGB:

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

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

function hexToRgb(hex) {
  hex = hex.replace(/^#/, "");
  if (hex.length === 3) {
    hex = hex.split("").map(c => c + c).join("");
  }
  let bigint = parseInt(hex, 16);
  return `rgb(${(bigint >> 16) & 255}, ${(bigint >> 8) & 255}, ${bigint & 255})`;
}
console.log(hexToRgb("#FF5733")); // rgb(255, 87, 51)

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