HTML Renk Kodları
Renkleri en iyi kim kullanır? Elbette onları vareden Allah kullanır. Allah'ın renk ilmini nekadar iyi anlarsak renkleri kullanmamız o kadar ustaca olur. Web sayfalarında ve CSS tanımlarında renkleri ifade etme sistemine RGB denir.Hangi renk hangi renkle kullanılır? Bunun ipuçları varlıklardan kopyalanabilir. Örneğin balıklar, kuşlar, çiçekler bu kopyalamada kullanabileceğimiz varlıklardır.
Günlük hayatta karşılaştığımız bir varlığın renkleri ile web sayfası yapabilirsiniz. Bunun için nesnenin dijital görüntüsünü telefon ile almanız gerekir. Işıktan dolayı renkte ufak şaşmalar olacak olsa da bu hassaslık web tasarımı için yeterlidir.Gördüğünüz o renk web sayfasında (HTML de) RGB kodlaması ile kullanılır.
Renk Kodu Bulma
İnternet tarayıcıda (açılan sayfada) gördüğünüz renklerin kodlarını bulucu araçlar vardır. Renk kodu bulma araçları tarayıcı dışına çıkılırsa çalışmaz. Her tarayıcı için ayrı bir program olması gerekir. Örneğin Firefox'da bu işin adı damlalıktır:
Renk kodunu bulmanın her tarayıcı da ve tarayıcı dışında olan kullanışlı yöntemi exe program kullanmaktır.
Daha geniş alanda çalışan ufak bir programla RGB kodları elde edebilirsiniz. "pixie.exe" bu işi yapan oldukça yararlı bir tasarım programcığıdır. İndirme linki şu şekilde: pixie.exe download
Bu ufak programı çalıştırınca aşağıdaki renk tablosu üzerinde imleci gezdirerek biraz anlama pratiği yaparmısınız lütfen! Ben yukarıdaki balık resmindeki üç rengi ve türevlerini bu sayfada kullandım.
Doğru renk kodu bulma
Renk teorisi denilen bir olgu vardır. Renk kombinasyonları doğru yapıldıysa çıkan tasarım göze hoş gözükür. 1666 yılında Isaac Newton renklerin haritasını çıkartmıştır. Bir daire şekil içinde renkler yerleştirilmiş. Bu renk yerleşimi ilişkisel yapılmıştır. Hangi renk hangi renkle güzel gözükür? Bunun bir kuralı keşfedilmiş.Boyama sanattır ve oluşmuş bazı renk kombinasyonları vardır. Bu renk kombinasyonlarına İngilizce isimler verilmiş bu renk ilişkileri aşağıdaki gibi isimlendirilmiş:
RGB renk kodlarını çevirme
Falan dersimizdeki balık resmininin orada ne işi vardı daha iyi anladınız sanırım. Online olarak bir renk girerek o renk ile HTML ve CSS kodları elde edebilmenizi sağlayan şu linkte size kullanışlı gelebilir.color-hex.com/
Aynı zamanda color-hex.com'da RGB deki bir renk diğer sistemlerde hangi koda isabet ediyor bunun çevirisi de yapılıyor. Renkli yazı yazma örneği ve renkli çerçeve örnek HTML ve CSS kodları da veriliyor. Bunlar için sitenin menüsünün üzerinde get info botunu var oraya tıklamadan önce ilgilendiğiniz rengin adını veya kodunu girmeniz gerekir.
Yukarıda verdiğimiz 6 renk ilişkisine göre size sonuç veren web sayfasının linkini de paylaşmak istiyorum: color-calculator
color-hex.com'da da buna benzer renk bulucu işlevi olsa da bu ikinci linkte daha derli toplu ve anlaşılır verilmiştir.
RGB Renk Kodu Nedir?
Red Green Blue kelimelerinin baş harflerinin birleşerek oluşturduğu bir terimdir. Burada kırmızı yeşil ve mavi renklerin hangi oranda bir araya geldiklerinde ilgili rengi elde ettikleri ifade olunur. Onaltılık sayı düzenindeki rakamlara tekabül eden 6 basamaklı bir rakam sözkonusudur.RGB kodunu 10luk düzene çevirmek istediğimizde ikişer ikişer alıp çevirmemiz gerekir. RYB kodlamada ise green yerini yellow alır.
Renkli Yazı Yazma
Renkli yazı yazmak için gelin sizlerle biraz pratik yapalım. Bunun için ağıda verdiğim RGB örnek kodları listesindeki renk kodlarını kullanabilirsiniz. #.... şeklinde yazmak istemiyorsanız renk isimleri listesinden renklerin ingilizce isimlerini vererek de renklendirme yapabilirsiniz.Aynı zamanda bu sayfada kullandığım CSS kodları (ifadeleri) için de şu aşağıdaki laboratuvar çalışmalarını yapınız. Her bir çalışma kullandığım bir özelliği ele alıyor.
Renkler ile ilgili site
İngilizceniz varsa aşağıdaki vereceğim linkteki yazıları okumanız da sizin renklere bakışınızı bilinçlendirecektir. color-wheelAşağıdaki iki web sitesini size fikir versin diye paylaşıyorum. Bu sitelere slaş (/) ile ilgilendiğiniz renk kodununu parapetre verebiliyorsunuz. Adrese ilave edeceğiniz renkle ilgili olası renk bilgilerini sitelerde bulabilirsiniz.
colorhexa.com
htmlcsscolor.com
RGB Kodları (Örnekler)
| 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 |
HTML Renk Kodları ve İsimleri
| Renk İsmi | HEX kodu | Renk |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGrey | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| Darkorange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkSlateGrey | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DimGrey | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Grey | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray | #D3D3D3 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSlateGrey | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370D8 | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #D87093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| SlateGrey | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
Bu sayfanın TEKİL ziyaretçi sayısı: 669
Web Bölümü Anasayfa