HTML renkleri Kod ları - site için renk kodları

**ANKEBUT** · 18-08-2008, 22:13

1. HTML Sayfaları içinde html element'lerin sayfaya çıktı verecek olanlarının renklerini belirlemeye yarayan kodlardır. # karakteri ile başlar, 6 adet Hexadecimal karakter ile devam eder. #CB00AA gibi bir koddur.

Çoğunlukla Web uygulaması geliştiricilerin kafasını karıştıran renk kodlarıdır, hatta bu kafa karışıklığını ortadan kaldırmak için dönüştürücü yazılımlar bile mevcuttur. Fakat o kadar da kafa kaşımaya gerek yoktur, maazallah saçınız dökülebilir.

HTML renk kodları aslında RGB renk değerlerinin Hexadecimal sayıya çevrilip peşpeşe yazıldığı bir sistemdir. daha başka da bir detayı yoktur.

RGB değeri (255, 255, 255) olan bir renk değerinin html renk kodunda karşılığı #FFFFFF dir. açılımı ise aşağıdaki gibidir.
R değerini al, Hexadecimal'e çevir: 255->FF
G değerini al, Hexadecimal'e çevir: 255->FF
B değerini al, Hexadecimal'e çevir: 255->FF
bulduğun değerleri peşpeşe yaz: FFFFFF
çıkan sonucun başına # koy: #FFFFFF

Gri rengi gösteren RGB(128, 128, 128) değerlerini aynı şekilde çevirelim:
R değerini al, Hexadecimal'e çevir: 128->80
G değerini al, Hexadecimal'e çevir: 128->80
B değerini al, Hexadecimal'e çevir: 128->80
bulduğun değerleri peşpeşe yaz: 808080
çıkan sonucun başına # koy: #808080

C# ile bu işi yapan fonksiyonlar aşağıdaki gibi yazılabilir. System.Drawing namespace'ine ihtiyaç duyar.
public string AsHtml(System.Drawing.Color color){
return AsHtml(color.R, color.G, color.B);
}
public string AsHtml(Byte R, Byte G, Byte B){
return "#" + ByteToHex(R) + ByteToHex(G) + ByteToHex(B);
}
public string ByteToHex(Byte val){
return val.ToString("X");
}

2. Yeterince tecrübe sahibi olunca renk tanımlamanın kolay olduğu kodlama.

Formatı şöyledir:
#XXYYZZ

- XX kırmızı, YY yeşil, ZZ mavi için belirtilen hexdecimal sayılardır.
- Bu sayılar 00 ile FF değerleri arasındadır.
- Bir değerin 00 olması o rengin hiç kullanılmadığını, FF olması tam kullanıldığını gösterir.
- Bütün renklerin değeri 00 olunca siyah, FF olunca beyaz renk oluşur. (Doğada da böyledir)

Örnekler:
#FF0000 : kırmızı
#00FF00 : yeşil
#0000FF : mavi
#000000 : siyah
#777777 : koyu gri
#AAAAAA : açık gri
#FFFFFF : beyaz
#FFAAAA : açık kırmızı
#AAFFAA : açık yeşil
#AAAAFF : açık mavi

En güzeli deneme yapmak. İşte size sayfanın zemin rengini değiştirerek renk kodlamasını test etmeniz için yazılmış bir örnek:

<script>
function dene()
{
kirmiziCombo = document.getElementById('kirmizi');
yesilCombo = document.getElementById('yesil');
maviCombo = document.getElementById('mavi');

kirmiziDegeri = kirmiziCombo.options[kirmiziCombo.selectedIndex].text;
yesilDegeri = yesilCombo.options[yesilCombo.selectedIndex].text;
maviDegeri = maviCombo.options[maviCombo.selectedIndex].text;

document.body.style.background = '#' + kirmiziDegeri + yesilDegeri + maviDegeri;
}
</script>

<body style="background: #000000">
<select id=kirmizi onchange="dene()">
<option>00<option>44<option>88<option>CC<option> FF
</select>
<select id=yesil onchange="dene()">
<option>00<option>44<option>88<option>CC<option> FF
</select>
<select id=mavi onchange="dene()">
<option>00<option>44<option>88<option>CC<option> FF
</select>
</body>

Tek yapmanız gereken; bu kodu bir dosyaya yapıştırıp html uzantısı ile kaydetmek.

Bu da başka bir örnek:

<script>
var kodlar = new Array('00','44','88','CC','FF');

for(i=0; i<kodlar.length; i++)
for(j=0; j<kodlar.length; j++)
for(k=0; k<kodlar.length; k++)
{
renkKodu = '#' + kodlar[i] + kodlar[j] + kodlar[k];
document.write( '<div style="background:' + renkKodu + '">' + renkKodu + '</div>');
}
</script>

3. Web sitenizde renk kodlarını ve renk adlarını bir combobox (select) ile göstermek için aşağıdaki script'i kullanabilirsiniz. (Bu script BK'nün Javascript kodları içinde sandık gibi boş boş oturuyordu, silmek istedim, yazık olacak diye buraya giriş yapayım dedim.)

function getColorOptions(val)
{
var colors = [
['000000','black'],
['000080','navy'],
['00008B','darkblue'],
['0000CD','mediumblue'],
['0000FF','blue'],
['006400','darkgreen'],
['008000','green'],
['008080','teal'],
['008B8B','darkcyan'],
['00BFFF','deepskyblue'],
['00CED1','darkturquoise'],
['00FA9A','mediumspringgreen'],
['00FF00','lime'],
['00FF7F','springgreen'],
['00FFFF','cyan'],
['00FFFF','aqua'],
['191970','midnightblue'],
['1E90FF','dodgerblue'],
['20B2AA','lightseagreen'],
['228B22','forestgreen'],
['2E8B57','seagreen'],
['2F4F4F','darkslategray'],
['32CD32','limegreen'],
['3CB371','mediumseagreen'],
['40E0D0','turquoise'],
['4169E1','royalblue'],
['4682B4','steelblue'],
['483D8B','darkslateblue'],
['48D1CC','mediumturquoise'],
['4B0082','indigo'],
['556B2F','darkolivegreen'],
['5F9EA0','cadetblue'],
['6495ED','cornflowerblue'],
['66CDAA','mediumaquamarine'],
['696969','dimgray'],
['6A5ACD','slateblue'],
['6B8E23','olivedrab'],
['708090','slategray'],
['778899','lightslategray'],
['7B68EE','mediumslateblue'],
['7CFC00','lawngreen'],
['7FFF00','chartreuse'],
['7FFFD4','aquamarine'],
['800000','maroon'],
['800080','purple'],
['808000','olive'],
['808080','gray'],
['87CEEB','skyblue'],
['87CEFA','lightskyblue'],
['8A2BE2','blueviolet'],
['8B0000','darkred'],
['8B008B','darkmagenta'],
['8B4513','saddlebrown'],
['8FBC8B','darkseagreen'],
['90EE90','lightgreen'],
['9370DB','mediumpurple'],
['9400D3','darkviolet'],
['98FB98','palegreen'],
['9932CC','darkorchid'],
['9ACD32','yellowgreen'],
['A0522D','sienna'],
['A52A2A','brown'],
['A9A9A9','darkgray'],
['ADD8E6','lightblue'],
['ADFF2F','greenyellow'],
['AFEEEE','paleturquoise'],
['B0C4DE','lightsteelblue'],
['B0E0E6','powderblue'],
['B22222','firebrick'],
['B8860B','darkgoldenrod'],
['BA55D3','mediumorchid'],
['BC8F8F','rosybrown'],
['BDB76B','darkkhaki'],
['C0C0C0','silver'],
['C71585','mediumvioletred'],
['CD5C5C','indianred'],
['CD853F','peru'],
['D2691E','chocolate'],
['D2B48C','tan'],
['D3D3D3','lightgrey'],
['D8BFD8','thistle'],
['DA70D6','orchid'],
['DAA520','goldenrod'],
['DB7093','palevioletred'],
['DC143C','crimson'],
['DCDCDC','gainsboro'],
['DDA0DD','plum'],
['DEB887','burlywood'],
['E0FFFF','lightcyan'],
['E6E6FA','lavender'],
['E9967A','darksalmon'],
['EE82EE','violet'],
['EEE8AA','palegoldenrod'],
['F08080','lightcoral'],
['F0E68C','khaki'],
['F0F8FF','aliceblue'],
['F0FFF0','honeydew'],
['F0FFFF','azure'],
['F4A460','sandybrown'],
['F5DEB3','wheat'],
['F5F5DC','beige'],
['F5F5F5','whitesmoke'],
['F5FFFA','mintcream'],
['F8F8FF','ghostwhite'],
['FA8072','salmon'],
['FAEBD7','antiquewhite'],
['FAF0E6','linen'],
['FAFAD2','lightgoldenrodyellow'],
['FDF5E6','oldlace'],
['FF0000','red'],
['FF00FF','magenta'],
['FF00FF','fuchsia'],
['FF1493','deeppink'],
['FF4500','orangered'],
['FF6347','tomato'],
['FF69B4','hotpink'],
['FF7F50','coral'],
['FF8C00','darkorange'],
['FFA07A','lightsalmon'],
['FFA500','orange'],
['FFB6C1','lightpink'],
['FFC0CB','pink'],
['FFD700','gold'],
['FFDAB9','peachpuff'],
['FFDEAD','navajowhite'],
['FFE4B5','moccasin'],
['FFE4C4','bisque'],
['FFE4E1','mistyrose'],
['FFEBCD','blanchedalmond'],
['FFEFD5','papayawhip'],
['FFF0F5','lavenderblush'],
['FFF5EE','seashell'],
['FFF8DC','cornsilk'],
['FFFACD','lemonchiffon'],
['FFFAF0','floralwhite'],
['FFFAFA','snow'],
['FFFF00','yellow'],
['FFFFE0','lightyellow'],
['FFFFF0','ivory'],
['FFFFFF','white']
];
var res = "";
for(i=0;i<colors.length;i++)
{
res += '<option style="background:#'+colors[i][0]+'" value="'+colors[i][0]+'"';
if(val==colors[i][0]) res +=' selected';
res += '>'+colors[i][1]+'</option>';
}
return res;
}

Bu kodu sayfanızda kullanmak için, şuna benzer bir HTML yazabilirsiniz:
Renk seçiniz: <select name="renk"><script>document.write(getColorOptions ());</script></select>

18-08-2008, 22:13	#1
ANKEBUT Bilgileriniz Üyelik tarihi: 02-07-2006 Bulunduğu yer: Ravza-i Mutahhara Yaş: 38 Mesajlar: 12.497 Rep Gücü: 210 Teşekkürler Teşekkür Sayısı: 2015 2227 Mesajda 3709 Teşekkür Aldı	HTML renkleri Kod ları - site için renk kodları 1. HTML Sayfaları içinde html element'lerin sayfaya çıktı verecek olanlarının renklerini belirlemeye yarayan kodlardır. # karakteri ile başlar, 6 adet Hexadecimal karakter ile devam eder. #CB00AA gibi bir koddur. Çoğunlukla Web uygulaması geliştiricilerin kafasını karıştıran renk kodlarıdır, hatta bu kafa karışıklığını ortadan kaldırmak için dönüştürücü yazılımlar bile mevcuttur. Fakat o kadar da kafa kaşımaya gerek yoktur, maazallah saçınız dökülebilir. HTML renk kodları aslında RGB renk değerlerinin Hexadecimal sayıya çevrilip peşpeşe yazıldığı bir sistemdir. daha başka da bir detayı yoktur. RGB değeri (255, 255, 255) olan bir renk değerinin html renk kodunda karşılığı #FFFFFF dir. açılımı ise aşağıdaki gibidir. R değerini al, Hexadecimal'e çevir: 255->FF G değerini al, Hexadecimal'e çevir: 255->FF B değerini al, Hexadecimal'e çevir: 255->FF bulduğun değerleri peşpeşe yaz: FFFFFF çıkan sonucun başına # koy: #FFFFFF Gri rengi gösteren RGB(128, 128, 128) değerlerini aynı şekilde çevirelim: R değerini al, Hexadecimal'e çevir: 128->80 G değerini al, Hexadecimal'e çevir: 128->80 B değerini al, Hexadecimal'e çevir: 128->80 bulduğun değerleri peşpeşe yaz: 808080 çıkan sonucun başına # koy: #808080 C# ile bu işi yapan fonksiyonlar aşağıdaki gibi yazılabilir. System.Drawing namespace'ine ihtiyaç duyar. public string AsHtml(System.Drawing.Color color){ return AsHtml(color.R, color.G, color.B); } public string AsHtml(Byte R, Byte G, Byte B){ return "#" + ByteToHex(R) + ByteToHex(G) + ByteToHex(B); } public string ByteToHex(Byte val){ return val.ToString("X"); } 2. Yeterince tecrübe sahibi olunca renk tanımlamanın kolay olduğu kodlama. Formatı şöyledir: #XXYYZZ - XX kırmızı, YY yeşil, ZZ mavi için belirtilen hexdecimal sayılardır. - Bu sayılar 00 ile FF değerleri arasındadır. - Bir değerin 00 olması o rengin hiç kullanılmadığını, FF olması tam kullanıldığını gösterir. - Bütün renklerin değeri 00 olunca siyah, FF olunca beyaz renk oluşur. (Doğada da böyledir) Örnekler: #FF0000 : kırmızı #00FF00 : yeşil #0000FF : mavi #000000 : siyah #777777 : koyu gri #AAAAAA : açık gri #FFFFFF : beyaz #FFAAAA : açık kırmızı #AAFFAA : açık yeşil #AAAAFF : açık mavi En güzeli deneme yapmak. İşte size sayfanın zemin rengini değiştirerek renk kodlamasını test etmeniz için yazılmış bir örnek: <script> function dene() { kirmiziCombo = document.getElementById('kirmizi'); yesilCombo = document.getElementById('yesil'); maviCombo = document.getElementById('mavi'); kirmiziDegeri = kirmiziCombo.options[kirmiziCombo.selectedIndex].text; yesilDegeri = yesilCombo.options[yesilCombo.selectedIndex].text; maviDegeri = maviCombo.options[maviCombo.selectedIndex].text; document.body.style.background = '#' + kirmiziDegeri + yesilDegeri + maviDegeri; } </script> <body style="background: #000000"> <select id=kirmizi onchange="dene()"> <option>00<option>44<option>88<option>CC<option> FF </select> <select id=yesil onchange="dene()"> <option>00<option>44<option>88<option>CC<option> FF </select> <select id=mavi onchange="dene()"> <option>00<option>44<option>88<option>CC<option> FF </select> </body> Tek yapmanız gereken; bu kodu bir dosyaya yapıştırıp html uzantısı ile kaydetmek. Bu da başka bir örnek: <script> var kodlar = new Array('00','44','88','CC','FF'); for(i=0; i<kodlar.length; i++) for(j=0; j<kodlar.length; j++) for(k=0; k<kodlar.length; k++) { renkKodu = '#' + kodlar[i] + kodlar[j] + kodlar[k]; document.write( '<div style="background:' + renkKodu + '">' + renkKodu + '</div>'); } </script> 3. Web sitenizde renk kodlarını ve renk adlarını bir combobox (select) ile göstermek için aşağıdaki script'i kullanabilirsiniz. (Bu script BK'nün Javascript kodları içinde sandık gibi boş boş oturuyordu, silmek istedim, yazık olacak diye buraya giriş yapayım dedim.) function getColorOptions(val) { var colors = [ ['000000','black'], ['000080','navy'], ['00008B','darkblue'], ['0000CD','mediumblue'], ['0000FF','blue'], ['006400','darkgreen'], ['008000','green'], ['008080','teal'], ['008B8B','darkcyan'], ['00BFFF','deepskyblue'], ['00CED1','darkturquoise'], ['00FA9A','mediumspringgreen'], ['00FF00','lime'], ['00FF7F','springgreen'], ['00FFFF','cyan'], ['00FFFF','aqua'], ['191970','midnightblue'], ['1E90FF','dodgerblue'], ['20B2AA','lightseagreen'], ['228B22','forestgreen'], ['2E8B57','seagreen'], ['2F4F4F','darkslategray'], ['32CD32','limegreen'], ['3CB371','mediumseagreen'], ['40E0D0','turquoise'], ['4169E1','royalblue'], ['4682B4','steelblue'], ['483D8B','darkslateblue'], ['48D1CC','mediumturquoise'], ['4B0082','indigo'], ['556B2F','darkolivegreen'], ['5F9EA0','cadetblue'], ['6495ED','cornflowerblue'], ['66CDAA','mediumaquamarine'], ['696969','dimgray'], ['6A5ACD','slateblue'], ['6B8E23','olivedrab'], ['708090','slategray'], ['778899','lightslategray'], ['7B68EE','mediumslateblue'], ['7CFC00','lawngreen'], ['7FFF00','chartreuse'], ['7FFFD4','aquamarine'], ['800000','maroon'], ['800080','purple'], ['808000','olive'], ['808080','gray'], ['87CEEB','skyblue'], ['87CEFA','lightskyblue'], ['8A2BE2','blueviolet'], ['8B0000','darkred'], ['8B008B','darkmagenta'], ['8B4513','saddlebrown'], ['8FBC8B','darkseagreen'], ['90EE90','lightgreen'], ['9370DB','mediumpurple'], ['9400D3','darkviolet'], ['98FB98','palegreen'], ['9932CC','darkorchid'], ['9ACD32','yellowgreen'], ['A0522D','sienna'], ['A52A2A','brown'], ['A9A9A9','darkgray'], ['ADD8E6','lightblue'], ['ADFF2F','greenyellow'], ['AFEEEE','paleturquoise'], ['B0C4DE','lightsteelblue'], ['B0E0E6','powderblue'], ['B22222','firebrick'], ['B8860B','darkgoldenrod'], ['BA55D3','mediumorchid'], ['BC8F8F','rosybrown'], ['BDB76B','darkkhaki'], ['C0C0C0','silver'], ['C71585','mediumvioletred'], ['CD5C5C','indianred'], ['CD853F','peru'], ['D2691E','chocolate'], ['D2B48C','tan'], ['D3D3D3','lightgrey'], ['D8BFD8','thistle'], ['DA70D6','orchid'], ['DAA520','goldenrod'], ['DB7093','palevioletred'], ['DC143C','crimson'], ['DCDCDC','gainsboro'], ['DDA0DD','plum'], ['DEB887','burlywood'], ['E0FFFF','lightcyan'], ['E6E6FA','lavender'], ['E9967A','darksalmon'], ['EE82EE','violet'], ['EEE8AA','palegoldenrod'], ['F08080','lightcoral'], ['F0E68C','khaki'], ['F0F8FF','aliceblue'], ['F0FFF0','honeydew'], ['F0FFFF','azure'], ['F4A460','sandybrown'], ['F5DEB3','wheat'], ['F5F5DC','beige'], ['F5F5F5','whitesmoke'], ['F5FFFA','mintcream'], ['F8F8FF','ghostwhite'], ['FA8072','salmon'], ['FAEBD7','antiquewhite'], ['FAF0E6','linen'], ['FAFAD2','lightgoldenrodyellow'], ['FDF5E6','oldlace'], ['FF0000','red'], ['FF00FF','magenta'], ['FF00FF','fuchsia'], ['FF1493','deeppink'], ['FF4500','orangered'], ['FF6347','tomato'], ['FF69B4','hotpink'], ['FF7F50','coral'], ['FF8C00','darkorange'], ['FFA07A','lightsalmon'], ['FFA500','orange'], ['FFB6C1','lightpink'], ['FFC0CB','pink'], ['FFD700','gold'], ['FFDAB9','peachpuff'], ['FFDEAD','navajowhite'], ['FFE4B5','moccasin'], ['FFE4C4','bisque'], ['FFE4E1','mistyrose'], ['FFEBCD','blanchedalmond'], ['FFEFD5','papayawhip'], ['FFF0F5','lavenderblush'], ['FFF5EE','seashell'], ['FFF8DC','cornsilk'], ['FFFACD','lemonchiffon'], ['FFFAF0','floralwhite'], ['FFFAFA','snow'], ['FFFF00','yellow'], ['FFFFE0','lightyellow'], ['FFFFF0','ivory'], ['FFFFFF','white'] ]; var res = ""; for(i=0;i<colors.length;i++) { res += '<option style="background:#'+colors[i][0]+'" value="'+colors[i][0]+'"'; if(val==colors[i][0]) res +=' selected'; res += '>'+colors[i][1]+'</option>'; } return res; } Bu kodu sayfanızda kullanmak için, şuna benzer bir HTML yazabilirsiniz: Renk seçiniz: <select name="renk"><script>document.write(getColorOptions ());</script></select> Allah'ın yakınından dostlar edinenlerin durumu, kendine ev edinen örümceğin durumu gibidir. halbuki evlerin de en çürüğü şüphesiz örümcek yuvasıdır. Ah keşke bilselerdi! ANKEBUT 41

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevap	Son Mesaj
site için gerekli ekipmanlar*webmaster sunumu	ANKEBUT	Webmaster Genel	2	06-09-2009 06:48
israil mallarını boykot etmek için site açıldı	Kahramankentli	Yönetimden Duyurular	10	22-01-2009 02:05
Adım adım HTML kodlari arsivi html sitenizi kurabilirsiniz.	ANKEBUT	HtmL / PhP / AsP / JavA	5	10-09-2008 20:06
Kimya için mükemmel bir site	SaNaL FaNi	Tavsiye Ettiğimiz Siteler	0	31-08-2008 19:42
Html yenı başlayanlar için mukemel dersler	SaNaL FaNi	HtmL / PhP / AsP / JavA	8	18-08-2008 22:29

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

HTML renkleri Kod ları - site için renk kodları

Görüntülemeler : 98 √ Cevap Sayısı : 0