Ders_25 HTML Renk Adları ve Kodları

Ders_25 HTML Renk Adları ve Kodları

Htlm dökümanımızda, bir elemana bir renk vermek isteğimizde, color özelliğine o rengin değerini atamamız yeterli olacaktır.

Renklendirmek, bir html elemanına stil (style) vermek demektir. Bu da CSS'in alanıdır. Bu yüzden, her CSS özelliğinde oludğu gibi, renk vermek için de style="color:renk_adi" kalıbını kullanmamız doğru olacaktır.

Bir rengi, color özelliğine atamak için üç farklı yol vardır. Bunlar:

• Rengin gerçek adını (ingilizce) kullanabiliriz: style="color:red"
• Rengin HEXADECİMAL kodunu kullanabiliriz: style="color:#FF0000"
• Rengin RGB kodunu kullanabiliriz: style="color:rgb(255, 0, 0)"

Kısaca ifade etmek gerekirse, html kodlarına göre her rengin üç tane adı vardır.

Mesela yukarıda gördüğümüz gibi kırmızı rengin, html dilindeki üç karşılığını şöyle yazabiliriz:

1. red
2. #FF0000
3. rgb(255,0,0)

Yukarıda, sırasıyla; kırmızı rengin adı, hexadecimal kodu ve rgb kodu vardır.

Örneğe dikkat edelim:

<h2 style="background-color:#FFFF00">
HEX koduyla renklendi
</h2>
<h2 style="background-color:rgb(255,255,0)">
RGB koduyla renklendi
</h2>
<h2 style="background-color:yellow">
Renk adıyla renklendi
</h2>

Yukarıdaki kodların çıktısı şöyle olacaktır:

HEX koduyla renklendi

RGB koduyla renklendi

Renk adıyla renklendi

Dikkat: Bir rengi, hex kodu ile yazacaksak, kodunun önüne bir diyez (#) işareti koymayı unutmamalıyız!

Hex kodlarında, her bir renge karşılık gelen, üç çift harf veya sayı vardır. Eğer bu çiftler aynı harflerden veya sayılardan oluşuyorsa birini yazmak yeterli olacaktır. Yani: #FF99GG yazmak ile #F9G yazmak arasına bir fark yoktur, iki kod da aynı renge aittir.

Decimal kodlamada ise, 0 ile 255 arasında üç sayı, şu şablona göre yazıldığında bir renge karşılık gelirler: rgb(255,255,255) 

Hexadecimal adlandırma sistemi de RGB adlandırma sistemi de Red (kırmızı), Green (yeşil), Blue (mavi) renklerin karışımından türer.

Bu 3 rengin değişik oranlarda karışımıyla 16 milyon farklı renk türetilmiştir. 

Mesela, sadece kırmızının 256 farklı tonu tanımlanmıştır.

En gelişmiş ekranlar,16384 farklı renk gösterebilmektedir.

Hexadecimal sisteminde, ilk harf veya sayı çifti Red (kırmızı) oranını, ikinci çift Green (Yeşil) oranını, üçüncüsü ise Blue (mavi) oranını ifade eder. Bu sistemde , mesela mavi renk demek #0000FF demektir.

RGB sisteminde, ilk sayı Red oranını, ikinci sayı Green oranını, üçüncü sayı da Blue oranını ifade eder. Bu sistemde, mesela mavi renk demek rgb(0,0,255) demektir.

Aşağıda, renkleri ve kodlarını görebileceğiniz bir HTML5 uygulaması vardır. 

Rengin üzerine tıklayarak, deneyebilirsiniz:

Aşağıda da, renkleri ve kodlarını görebileceğiniz bir tablo vardır:

HTML name	Hex code R   G   B	RGB code R   G   B
Pink colors
Pink	FF C0 CB	255 192 203
LightPink	FF B6 C1	255 182 193
HotPink	FF 69 B4	255 105 180
DeepPink	FF 14 93	255  20 147
PaleVioletRed	DB 70 93	219 112 147
MediumVioletRed	C7 15 85	199  21 133
Red colors
LightSalmon	FF A0 7A	255 160 122
Salmon	FA 80 72	250 128 114
DarkSalmon	E9 96 7A	233 150 122
LightCoral	F0 80 80	240 128 128
IndianRed	CD 5C 5C	205  92  92
Crimson	DC 14 3C	220  20  60
FireBrick	B2 22 22	178  34  34
DarkRed	8B 00 00	139   0   0
Red	FF 00 00	255   0   0
Orange colors
OrangeRed	FF 45 00	255  69   0
Tomato	FF 63 47	255  99  71
Coral	FF 7F 50	255 127  80
DarkOrange	FF 8C 00	255 140   0
Orange	FF A5 00	255 165   0
Yellow colors
Yellow	FF FF 00	255 255   0
LightYellow	FF FF E0	255 255 224
LemonChiffon	FF FA CD	255 250 205
LightGoldenrodYellow	FA FA D2	250 250 210
PapayaWhip	FF EF D5	255 239 213
Moccasin	FF E4 B5	255 228 181
PeachPuff	FF DA B9	255 218 185
PaleGoldenrod	EE E8 AA	238 232 170
Khaki	F0 E6 8C	240 230 140
DarkKhaki	BD B7 6B	189 183 107
Gold	FF D7 00	255 215   0
Brown colors
Cornsilk	FF F8 DC	255 248 220
BlanchedAlmond	FF EB CD	255 235 205
Bisque	FF E4 C4	255 228 196
NavajoWhite	FF DE AD	255 222 173
Wheat	F5 DE B3	245 222 179
BurlyWood	DE B8 87	222 184 135
Tan	D2 B4 8C	210 180 140
RosyBrown	BC 8F 8F	188 143 143
SandyBrown	F4 A4 60	244 164  96
Goldenrod	DA A5 20	218 165  32
DarkGoldenrod	B8 86 0B	184 134  11
Peru	CD 85 3F	205 133  63
Chocolate	D2 69 1E	210 105  30
SaddleBrown	8B 45 13	139  69  19
Sienna	A0 52 2D	160  82  45
Brown	A5 2A 2A	165  42  42
Maroon	80 00 00	128   0   0

Green colors DarkOliveGreen 55 6B 2F  85 107  47 Olive 80 80 00 128 128   0 OliveDrab 6B 8E 23 107 142  35 YellowGreen 9A CD 32 154 205  50 LimeGreen 32 CD 32  50 205  50 Lime 00 FF 00   0 255   0 LawnGreen 7C FC 00 124 252   0 Chartreuse 7F FF 00 127 255   0 GreenYellow AD FF 2F 173 255  47 SpringGreen 00 FF 7F   0 255 127 MediumSpringGreen 00 FA 9A   0 250 154 LightGreen 90 EE 90 144 238 144 PaleGreen 98 FB 98 152 251 152 DarkSeaGreen 8F BC 8F 143 188 143 MediumSeaGreen 3C B3 71  60 179 113 SeaGreen 2E 8B 57  46 139  87 ForestGreen 22 8B 22  34 139  34 Green 00 80 00   0 128   0 DarkGreen 00 64 00   0 100   0 Cyan colors MediumAquamarine 66 CD AA 102 205 170 Aqua 00 FF FF   0 255 255 Cyan 00 FF FF   0 255 255 LightCyan E0 FF FF 224 255 255 PaleTurquoise AF EE EE 175 238 238 Aquamarine 7F FF D4 127 255 212 Turquoise 40 E0 D0  64 224 208 MediumTurquoise 48 D1 CC  72 209 204 DarkTurquoise 00 CE D1   0 206 209 LightSeaGreen 20 B2 AA  32 178 170 CadetBlue 5F 9E A0  95 158 160 DarkCyan 00 8B 8B   0 139 139 Teal 00 80 80   0 128 128 Blue colors LightSteelBlue B0 C4 DE 176 196 222 PowderBlue B0 E0 E6 176 224 230 LightBlue AD D8 E6 173 216 230 SkyBlue 87 CE EB 135 206 235 LightSkyBlue 87 CE FA 135 206 250 DeepSkyBlue 00 BF FF   0 191 255 DodgerBlue 1E 90 FF  30 144 255 CornflowerBlue 64 95 ED 100 149 237 SteelBlue 46 82 B4  70 130 180 RoyalBlue 41 69 E1  65 105 225 Blue 00 00 FF   0   0 255 MediumBlue 00 00 CD   0   0 205 DarkBlue 00 00 8B   0   0 139 Navy 00 00 80   0   0 128 MidnightBlue 19 19 70  25  25 112

Purple/Violet/Magenta colors
Lavender	E6 E6 FA	230 230 250
Thistle	D8 BF D8	216 191 216
Plum	DD A0 DD	221 160 221
Violet	EE 82 EE	238 130 238
Orchid	DA 70 D6	218 112 214
Fuchsia	FF 00 FF	255   0 255
Magenta	FF 00 FF	255   0 255
MediumOrchid	BA 55 D3	186  85 211
MediumPurple	93 70 DB	147 112 219
BlueViolet	8A 2B E2	138  43 226
DarkViolet	94 00 D3	148   0 211
DarkOrchid	99 32 CC	153  50 204
DarkMagenta	8B 00 8B	139   0 139
Purple	80 00 80	128   0 128
Indigo	4B 00 82	75   0 130
DarkSlateBlue	48 3D 8B	72  61 139
RebeccaPurple	66 33 99	102  51 153
SlateBlue	6A 5A CD	106  90 205
MediumSlateBlue	7B 68 EE	123 104 238
White colors
White	FF FF FF	255 255 255
Snow	FF FA FA	255 250 250
Honeydew	F0 FF F0	240 255 240
MintCream	F5 FF FA	245 255 250
Azure	F0 FF FF	240 255 255
AliceBlue	F0 F8 FF	240 248 255
GhostWhite	F8 F8 FF	248 248 255
WhiteSmoke	F5 F5 F5	245 245 245
Seashell	FF F5 EE	255 245 238
Beige	F5 F5 DC	245 245 220
OldLace	FD F5 E6	253 245 230
FloralWhite	FF FA F0	255 250 240
Ivory	FF FF F0	255 255 240
AntiqueWhite	FA EB D7	250 235 215
Linen	FA F0 E6	250 240 230
LavenderBlush	FF F0 F5	255 240 245
MistyRose	FF E4 E1	255 228 225
Gray/Black colors
Gainsboro	DC DC DC	220 220 220
LightGrey	D3 D3 D3	211 211 211
Silver	C0 C0 C0	192 192 192
DarkGray	A9 A9 A9	169 169 169
Gray	80 80 80	128 128 128
DimGray	69 69 69	105 105 105
LightSlateGray	77 88 99	119 136 153
SlateGray	70 80 90	112 128 144
DarkSlateGray	2F 4F 4F	47  79  79
Black	00 00 00	0   0   0

Web Safe Colors (Güvenli Web Renkleri)

İlk zamanlarda, bilgisayar ekranları sadece 256 tane renk gösterebiliyordu. Bu renklere "web safe colors" denmektedir.

Şimdi her ne kadar, ekranlar çok daha fazla renk gösterebilse de bu 256 renk bir web standardı olarak kabul edilmektedir. 

Bilgisayar ekranlarının renk paletleri bu 256 renk referans alınarak oluşturulmaktadır. Yani web sitemizin renklerini bu renkler arasından seçemek akıllıca bir tercih olacaktır.

Aşağıda bu "web safe colors" renkleri ve hex kodları verilmiştir:

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Ayrıca aşağıda, sıkça kullanıldığı için, gri renk tonarlı ve adları verilmiştir:

Gölge Tonları	HEX kodu	RGB kodu
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

sonraki ders için tıklayınız