Как записывается RGB?

RGB цвет: форматы записи

RGB (Red, Green, Blue) — это модель описания цвета через три компонента: красный, зелёный и синий. Каждый компонент имеет значение от 0 до 255 (8-бит). В фронтенде есть несколько способов записи RGB.

1. rgb() функция — основной формат

Это наиболее читаемый и стандартный способ:

/* Синтаксис: rgb(red, green, blue) */
color: rgb(255, 0, 0);        /* Красный */
color: rgb(0, 255, 0);        /* Зелёный */
color: rgb(0, 0, 255);        /* Синий */
color: rgb(255, 255, 255);    /* Белый */
color: rgb(0, 0, 0);          /* Чёрный */
color: rgb(128, 128, 128);    /* Серый */

Каждое число — это интенсивность компонента (0 = отсутствует, 255 = максимум).

2. rgba() — RGB с прозрачностью (альфа канал)

Добавляет четвёртый параметр (Alpha) для прозрачности:

/* Синтаксис: rgba(red, green, blue, alpha) */
color: rgba(255, 0, 0, 1);      /* Красный, полностью непрозрачный */
color: rgba(255, 0, 0, 0.5);    /* Красный, 50% прозрачности */
color: rgba(255, 0, 0, 0);      /* Красный, полностью прозрачный */
color: rgba(128, 128, 128, 0.8);/* Серый, 80% непрозрачности */

Альфа-канал: 0 = полностью прозрачный, 1 = полностью непрозрачный.

3. Современный синтаксис с пробелами

В CSS Color Level 4 можно опустить запятые:

color: rgb(255 0 0);          /* Красный */
color: rgba(255 0 0 / 0.5);   /* Красный, 50% прозрачности */
color: rgb(255 0 0 / 100%);   /* С процентами */

4. Hex формат — альтернатива RGB

Шестнадцатеричный формат, но это тоже RGB:

/* 6 цифр: #RRGGBB */
color: #FF0000;    /* Красный (255, 0, 0) */
color: #00FF00;    /* Зелёный (0, 255, 0) */
color: #0000FF;    /* Синий (0, 0, 255) */
color: #FFFFFF;    /* Белый (255, 255, 255) */
color: #000000;    /* Чёрный (0, 0, 0) */
color: #808080;    /* Серый (128, 128, 128) */

/* 3 цифры — сокращённый формат */
color: #F00;       /* Красный = #FF0000 */
color: #0F0;       /* Зелёный = #00FF00 */

/* С прозрачностью: #RRGGBBAA */
color: #FF0000FF;  /* Красный, непрозрачный */
color: #FF000080;  /* Красный, 50% прозрачности */
color: #FF000000;  /* Красный, полностью прозрачный */

5. RGB в JavaScript

// Получение computed цвета элемента
const element = document.querySelector('div');
const color = window.getComputedStyle(element).color;
console.log(color); // "rgb(255, 0, 0)" или "rgba(255, 0, 0, 1)"

// Установка цвета через rgb()
element.style.color = 'rgb(255, 0, 0)';
element.style.backgroundColor = 'rgba(0, 255, 0, 0.5)';

// Установка через hex
element.style.color = '#FF0000';

6. Преобразование между форматами

// Hex в RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

hexToRgb('#FF0000'); // { r: 255, g: 0, b: 0 }

// RGB в Hex
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  }).join('').toUpperCase();
}

rgbToHex(255, 0, 0); // "#FF0000"

7. Практические примеры в React/CSS

// React с Tailwind (использует CSS переменные)
className="bg-red-500"

// React с inline styles
<div style={{ color: 'rgb(255, 0, 0)' }} />
<div style={{ backgroundColor: 'rgba(0, 255, 0, 0.5)' }} />
<div style={{ borderColor: '#0000FF' }} />

// CSS переменные
:root {
  --primary-color: rgb(66, 133, 244);
  --primary-color-transparent: rgba(66, 133, 244, 0.1);
}

button {
  background-color: var(--primary-color);
  border-color: var(--primary-color-transparent);
}

Резюме

RGB записывается несколькими способами:

1. rgb(r, g, b) — стандартный CSS формат
2. rgba(r, g, b, a) — с прозрачностью
3. #RRGGBB — шестнадцатеричный (hex)
4. Современный синтаксис — rgb(255 0 0 / 50%)

В практике фронтенда используют все форматы, выбор зависит от контекста (CSS, JavaScript, дизайн-системы).