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>
Ç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>