Model koloru RGB

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)

3 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:

• Paleta 16 kolorów nazwanych
• Paleta 216 kolorów bezpiecznych dla Internetu
• Rozszerzona paleta kolorów nazwanych
• Kolory z polskimi nazwami

Przeliczanie int na hex

Listing

/*
 * funkcja zmieniająca wartości RGB na liczbe heksadecymalna. 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 zmieniająca liczbę heksadecymalną 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 ];
};

Sposoby zapisania tego samego koloru

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	ctx.beginPath();
	ctx.fillStyle = "mediumseagreen";
	ctx.fillRect(10, 10, 30, 30);
	ctx.fillStyle = "black";
	ctx.fillText("mediumseagreen", 60, 25);
	ctx.beginPath();
	ctx.fillStyle = "rgb(60, 179, 113)";
	ctx.fillRect(10, 50, 30, 30);
	ctx.fillStyle = "black";
	ctx.fillText("rgb(60, 179, 113)", 60, 65);
	ctx.beginPath();
	ctx.fillStyle = "#3CB371";
	ctx.fillRect(10, 90, 30, 30);
	ctx.fillStyle = "black";
	ctx.fillText("#3CB371", 60, 105);
	ctx.beginPath();
	ctx.fillStyle = "rgb(23.5%, 70.2%, 44.3%)";
	ctx.fillRect(10, 130, 30, 30);
	ctx.fillStyle = "black";
	ctx.fillText("rgb(23.5%, 70.2%, 44.3%)", 60, 145);
	ctx.beginPath();