Jak zmienić kolor z postaci szesnastkowej HEX na dziesiętne składowe i odwrotnie?

W PHP łatwo można zmienić kolor z postaci #RRGGBB na 0, 255, 255 i na odwrót.

Co to RGB, co to HEX?

HEX i RGB to formaty zapisu kolorów, opisują ten sam kolor na dwa różne sposoby.

HEX

• skrót od "hexadecimal",
• format: #RRGGBB,
• każda para znaków (RR, GG, BB) to wartość szesnastkowa od 00 do FF.
• przykład: #FF9900, R = FF (255), G = 99 (153), B = 00 (0)

RGB

• skrót od Red Green Blue,
• format: rgb(r, g, b),
• każda składowa (r, g, b) to liczba dziesiętna od 0 do 255,
• przykład: rgb(255, 153, 0), to ten sam kolor co #FF9900.

HEX na RGB

Przy tworzeniu stron internetowych najczęściej wykorzystuje się format HEX. Istnieją jednak sytuacje w których wymagane jest podanie formatu RGB, na przykład przy tworzeniu tła lub gradientów.

Ręczne przeliczenie tych wartości byłoby nie lada wyzwaniem, skorzystamy z krótkiego kodu napisanego w PHP:

function hexToRgb($hex) {
    // usuwamy znak # z początku stringa
    $hex = ltrim($hex, '#');

    return [
        'r' => hexdec(substr($hex, 0, 2)), 
        'g' => hexdec(substr($hex, 2, 2)), 
        'b' => hexdec(substr($hex, 4, 2)),
    ];
}

Przykład użycia

// ['r' => 255, 'g' => 153, 'b' => 0]
hexToRgb('#FF9900')

RGB na HEX

Programy graficzne często operują na RGB, jeżeli chcemy wykorzystać je na stronach internetowych w CSS, można je przeliczyć w ten sposób:

function rgbToHex($r, $g, $b) {
    $r = max(0, min(255, $r));
    $g = max(0, min(255, $g));
    $b = max(0, min(255, $b));

    return sprintf("#%02X%02X%02X", $r, $g, $b);
}

Przykład użycia

// "#FF9900"
rgbToHex(255, 153, 0); 

Komentarze