Model RGB

System RGB przedstawia kolor w postaci trzech liczb naturalnych
lub jednej liczby heksadecymalnej.

System RGB był stworzony pod kątem łatwości obliczania kolorów
do wyświetlania na ekranach telewizorów i monitorów.

Jest powszechnie używany na stronach internetowych i w grafice
internetowej.

R albo r oznacza ‘red’ czyli składnik czerwony.

G albo g oznacza ‘green’, czyli składnik zielony.

B albo b oznacza ‘blue’ czyli składnik niebieski.

Każdy z powyższych trzech kolorów jest jedną z 256 liczb od 0 do
255.

W systemie RGB można przedstawić 256 x 256 x 256 = 16 777 216
kolorów.

Kolor RGB możemy przedstawić w postaci:

  • liczb dziesiętnych rgb(255, 0, 0)
  • procentów rgb(100%, 0%, 0%);
  • liczb zmiennoprzecinkowcych rgb(1.0, 0, 0),
    każda od 0.00 do 1.0
  • liczby heksadecymalnej “color: #FF0000”;

Liczba heksadecymalna

6 cyfr

Standardowy zapis trzech kolorów. Kanał alfa α=1.0:

>#FF0000

8 cyfr

Ostatnie 2 cyfry oznaczają kanał alfa:

#FF0000CC oznacza rgba(255, 0, 0, 0.8)

Trzy cyfry

Zapis #FC0 oznacza, że każdy z kanałów został podzielony na
16 wartości od 0 do F, gdzie 0 oznacza minimum, a F oznacza maksimum.

Czyli mamy 16/16, 12/16, 0/16

4 cyfry

Identycznie jak dla zapisu 3-cyfrowego, czwarta cyfra oznacza kanał alfa:

#FC02 oznacza 16/16, 12/16, 0/16, 2/16

Palety kolorów

Dostępnych jest wiele palet kolorów RGB:

Przeliczanie int na hex

Listing

/*
 * funkcja zmieniajaca wartosci RGB na licybe heksdeczmalna. Liczby musza być
 * podane jako inty od 0 do 255 włącznie
 */
function RGBToHex(r, g, b) {
	var r1 = r.toString(16).toUpperCase();
	var g1 = g.toString(16).toUpperCase();
	var b1 = b.toString(16).toUpperCase();
	if (r1.length == 1) {
		r1 = "0" + r1;
	}
	if (g1.length == 1) {
		g1 = "0" + g1;
	}
	if (b1.length == 1) {
		b1 = "0" + b1;
	}
	return "0x" + r1 + g1 + b1;
};	

Przeliczanie hex na int

Listing

/* funkcja zmieniajaca liczbe heksadecymalna na wartosci RGB
* Liczba może być podana jako 0x np "0xFFFFFF" lub "#FFFFFF"
* lub "FFFFFF"
*/
function HexToRGB(hexa) {
var R = -1;
var G = -1;
var B = -1;
if (((hexa.indexOf("x") == -1) && (hexa.indexOf("#") == -1))) {
R = parseInt(hexa.substr(0, 2), 16);
G = parseInt(hexa.substr(2, 2), 16);
B = parseInt(hexa.substr(4, 2), 16);
} else {
if (hexa.indexOf("#") > 0) {
R = parseInt(hexa.substr(1, 2), 16);
G = parseInt(hexa.substr(3, 2), 16);
B = parseInt(hexa.substr(5, 2), 16);
} else if (hexa.indexOf("x") > 0) {
R = parseInt(hexa.substr(2, 2), 16);
G = parseInt(hexa.substr(4, 2), 16);
B = parseInt(hexa.substr(6, 2), 16);
}
}
return [ R, G, B ];
};

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *