Bu yazımda, Html ve Css’te isimleri ile kullanabildiğimiz renklerden bahsedeceğim. Normalde 16 Milyon (256*256*256) civarında renk bulunuyor. Tabiki bu renklerin hepsine birer isim koymak çok zor. Bunların yaklaşık 140 tanesini isimleri ile kullanabiliyoruz. Geriye kalan renkleri ise renk kodları ile kullanıyoruz. Renk kodları ile kullanmak istediğimizde karşımıza birden çok alternatif çıkıyor.
Örneğin hex renk kodları, rgb renk kodları, rgba renk kodları, cmyk renk kodları, hsl renk kodları vb.. Yazımızda bu renk kodlarına da değineceğiz.
Bildiğiniz gibi 3 ana renk var. Bunlar :
- Kırmızı
- Yeşil
- Mavi
Geriye kalan bütün renkler, bu 3 rengin belirli oranlarda birleşiminden meydana gelir. Tabi renk kodlarını farklı şekillerde kullanabildiğimizi söylemiştim.
İsterseniz Rgb renk kodları ile başlayalım.
RGB RENK KODLARI
Rgb renk kodları tanımlanırken, 3 ana rengi kullanırız. Kullanımı şu şekilde,
⇒ rgb ( KIRMIZI , YEŞİL , MAVİ )
Buradaki her parametre, rengin yoğunluğunu 0 ile 255 arasında bir tam sayı olarak tanımlar. Örneğin,
- Kırmızı parametresini 255, diğerlerini 0 verdiğimizde kırmızı rengi elde ederiz.
- Yeşil parametresini 255, diğerlerini 0 verdiğimizde yeşil rengi elde ederiz.
- Mavi parametresini 255, diğerlerini 0 verdiğimizde mavi rengi elde ederiz.
⇒ Kırmızı Rengin rgb kodu : rgb(255,0,0)
⇒ Yeşil Rengin rgb kodu : rgb(0,255,0)
⇒ Mavi Rengin rgb kodu : rgb(0,0,255)
Not : Rgb renk kodları tüm tarayıcılarda desteklenir.
Önemli : Gri renk tonları, 3 ana rengin eşit değerlerde kullanılmasıyla oluşturulur. Örneğin,
⇒ Siyah Rengin rgb kodu : rgb(0,0,0)
⇒ Gri Rengin rgb kodu : rgb(128,128,128)
⇒ Beyaz Rengin rgb kodu : rgb(255,255,255)
HEX RENK KODLARI
Hex renk kodları tanımlanırken, 3 ana rengi kullanırız. Kullanımı şu şekilde,
⇒ # KIRMIZI YEŞİL MAVİ
Renk değerlerinden önce # işaretini kullanıyoruz. Buradaki her parametre, rengin yoğunluğunu 00 ile FF arasında onaltılık sayı olarak tanımlar. Örneğin,
- Kırmızı parametresini FF, diğerlerini 00 verdiğimizde kırmızı rengi elde ederiz.
- Yeşil parametresini FF, diğerlerini 00 verdiğimizde yeşil rengi elde ederiz.
- Mavi parametresini FF, diğerlerini 00 verdiğimizde mavi rengi elde ederiz.
⇒ Kırmızı Rengin hex kodu : #FF0000
⇒ Yeşil Rengin hex kodu : #00FF00
⇒ Mavi Rengin hex kodu : #0000FF
Not : Hex renk kodları tüm tarayıcılarda desteklenir.
Önemli : Gri renk tonları, 3 ana rengin eşit değerlerde kullanılmasıyla oluşturulur. Örneğin,
⇒ Siyah Rengin hex kodu : #000000
⇒ Gri Rengin hex kodu : #808080
⇒ Beyaz Rengin hex kodu : #FFFFFF
Not : Onaltılık değerleri belirtmek için büyük harf veya küçük harf kullanabilirsiniz. Küçük harfi yazmak kolaydır. Büyük harfi ise okumak daha kolaydır.
Bazen renkler arası dönüşüm yapmak isteyebiliriz. Örneğin bir rgb renk kodu var ve bunu hex renk koduna, cmyk renk koduna, hsl renk koduna vb.. çevirebiliriz.
Yada bunun tam tersi durumlar da olabilir. Örneğin bir cmyk renk kodu var ve bunu hex renk koduna, rgb renk koduna, hsl renk koduna vb.. çevirebiliriz.
Renk kodları arasında dönüşüm yapmak için TIKLAYIN.
3 ana rengi belli oranlarda kullanarak kendiniz bir renk elde etmek istiyorsanız TIKLAYIN.
Renklerin birçok farklı özelliği vardır. Örneğin insanların algılarını, davranışlarını vb.. etkileyebilirler. Bu yüzden tasarımlarınızda renk seçimini yaparken özen göstermelisiniz. Aşağıdaki renkler dışında profesyonel olarak hazırlanmış renk paletlerini incelemek isterseniz Web Tasarımlarınızda Kullanabileceğiniz Tam 150 Farklı Renk Paleti yazıma göz atabilirsiniz.
HTML’DE TANIMLI RENK İSİMLERİ, HEX RENK KODLARI VE RGB RENK KODLARI
Aşağıdaki renk isimleri ve renk kodları tüm modern tarayıcılar tarafından desteklenir.
| Renk İsimleri | Hex Renk Kodları | Rgb Renk Kodları |
|---|---|---|
| Pink | #FFC0CB | 255 192 203 |
| LightPink | #FFB6C1 | 255 182 193 |
| HotPink | #FF69B4 | 255 105 180 |
| DeepPink | #FF1493 | 255 20 147 |
| PaleVioletRed | #DB7093 | 219 112 147 |
| MediumVioletRed | #C71585 | 199 21 133 |
| LightSalmon | #FFA07A | 255 160 122 |
| Salmon | #FA8072 | 250 128 114 |
| DarkSalmon | #E9967A | 233 150 122 |
| LightCoral | #F08080 | 240 128 128 |
| IndianRed | #CD5C5C | 205 92 92 |
| Crimson | #DC143C | 220 20 60 |
| FireBrick | #B22222 | 178 34 34 |
| DarkRed | #8B0000 | 139 0 0 |
| Red | #FF0000 | 255 0 0 |
| OrangeRed | #FF4500 | 255 69 0 |
| Tomato | #FF6347 | 255 99 71 |
| Coral | #FF7F50 | 255 127 80 |
| DarkOrange | #FF8C00 | 255 140 0 |
| Orange | #FFA500 | 255 165 0 |
| Yellow | #FFFF00 | 255 255 0 |
| LightYellow | #FFFFE0 | 255 255 224 |
| LemonChiffon | #FFFACD | 255 250 205 |
| LightGoldenrodYellow | #FAFAD2 | 250 250 210 |
| PapayaWhip | #FFEFD5 | 255 239 213 |
| Moccasin | #FFE4B5 | 255 228 181 |
| PeachPuff | #FFDAB9 | 255 218 185 |
| PaleGoldenrod | #EEE8AA | 238 232 170 |
| Khaki | #F0E68C | 240 230 140 |
| DarkKhaki | #BDB76B | 189 183 107 |
| Gold | #FFD700 | 255 215 0 |
| Cornsilk | #FFF8DC | 255 248 220 |
| BlanchedAlmond | #FFEBCD | 255 235 205 |
| Bisque | #FFE4C4 | 255 228 196 |
| NavajoWhite | #FFDEAD | 255 222 173 |
| Wheat | #F5DEB3 | 245 222 179 |
| BurlyWood | #DEB887 | 222 184 135 |
| Tan | #D2B48C | 210 180 140 |
| RosyBrown | #BC8F8F | 188 143 143 |
| SandyBrown | #F4A460 | 244 164 96 |
| Goldenrod | #DAA520 | 218 165 32 |
| DarkGoldenrod | #B8860B | 184 134 11 |
| Peru | #CD853F | 205 133 63 |
| Chocolate | #D2691E | 210 105 30 |
| SaddleBrown | #8B4513 | 139 69 19 |
| Sienna | #A0522D | 160 82 45 |
| Brown | #A52A2A | 165 42 42 |
| Maroon | #800000 | 128 0 0 |
| DarkOliveGreen | #556B2F | 85 107 47 |
| Olive | #808000 | 128 128 0 |
| OliveDrab | #6B8E23 | 107 142 35 |
| YellowGreen | #9ACD32 | 154 205 50 |
| LimeGreen | #32CD32 | 50 205 50 |
| Lime | #00FF00 | 0 255 0 |
| LawnGreen | #7CFC00 | 124 252 0 |
| Chartreuse | #7FFF00 | 127 255 0 |
| GreenYellow | #ADFF2F | 173 255 47 |
| SpringGreen | #00FF7F | 0 255 127 |
| MediumSpringGreen | #00FA9A | 0 250 154 |
| LightGreen | #90EE90 | 144 238 144 |
| PaleGreen | #98FB98 | 152 251 152 |
| DarkSeaGreen | #8FBC8F | 143 188 143 |
| MediumAquamarine | #66CDAA | 102 205 170 |
| MediumSeaGreen | #3CB371 | 60 179 113 |
| SeaGreen | #2E8B57 | 46 139 87 |
| ForestGreen | #228B22 | 34 139 34 |
| Green | #008000 | 0 128 0 |
| DarkGreen | #006400 | 0 100 0 |
| Aqua | #00FFFF | 0 255 255 |
| Cyan | #00FFFF | 0 255 255 |
| LightCyan | #E0FFFF | 224 255 255 |
| PaleTurquoise | #AFEEEE | 175 238 238 |
| Aquamarine | #7FFFD4 | 127 255 212 |
| Turquoise | #40E0D0 | 64 224 208 |
| MediumTurquoise | #48D1CC | 72 209 204 |
| DarkTurquoise | #00CED1 | 0 206 209 |
| LightSeaGreen | #20B2AA | 32 178 170 |
| CadetBlue | #5F9EA0 | 95 158 160 |
| DarkCyan | #008B8B | 0 139 139 |
| Teal | #008080 | 0 128 128 |
| LightSteelBlue | #B0C4DE | 176 196 222 |
| PowderBlue | #B0E0E6 | 176 224 230 |
| LightBlue | #ADD8E6 | 173 216 230 |
| SkyBlue | #87CEEB | 135 206 235 |
| LightSkyBlue | #87CEFA | 135 206 250 |
| DeepSkyBlue | #00BFFF | 0 191 255 |
| DodgerBlue | #1E90FF | 30 144 255 |
| CornflowerBlue | #6495ED | 100 149 237 |
| SteelBlue | #4682B4 | 70 130 180 |
| RoyalBlue | #4169E1 | 65 105 225 |
| Blue | #0000FF | 0 0 255 |
| MediumBlue | #0000CD | 0 0 205 |
| DarkBlue | #00008B | 0 0 139 |
| Navy | #000080 | 0 0 128 |
| MidnightBlue | #191970 | 25 25 112 |
| Lavender | #E6E6FA | 230 230 250 |
| Thistle | #D8BFD8 | 216 191 216 |
| Plum | #DDA0DD | 221 160 221 |
| Violet | #EE82EE | 238 130 238 |
| Orchid | #DA70D6 | 218 112 214 |
| Fuchsia | #FF00FF | 255 0 255 |
| Magenta | #FF00FF | 255 0 255 |
| MediumOrchid | #BA55D3 | 186 85 211 |
| MediumPurple | #9370DB | 147 112 219 |
| BlueViolet | #8A2BE2 | 138 43 226 |
| DarkViolet | #9400D3 | 148 0 211 |
| DarkOrchid | #9932CC | 153 50 204 |
| DarkMagenta | #8B008B | 139 0 139 |
| Purple | #800080 | 128 0 128 |
| Indigo | #4B0082 | 75 0 130 |
| DarkSlateBlue | #483D8B | 72 61 139 |
| SlateBlue | #6A5ACD | 106 90 205 |
| MediumSlateBlue | #7B68EE | 123 104 238 |
| White | #FFFFFF | 255 255 255 |
| Snow | #FFFAFA | 255 250 250 |
| Honeydew | #F0FFF0 | 240 255 240 |
| MintCream | #F5FFFA | 245 255 250 |
| Azure | #F0FFFF | 240 255 255 |
| AliceBlue | #F0F8FF | 240 248 255 |
| GhostWhite | #F8F8FF | 248 248 255 |
| WhiteSmoke | #F5F5F5 | 245 245 245 |
| Seashell | #FFF5EE | 255 245 238 |
| Beige | #F5F5DC | 245 245 220 |
| OldLace | #FDF5E6 | 253 245 230 |
| FloralWhite | #FFFAF0 | 255 250 240 |
| Ivory | #FFFFF0 | 255 255 240 |
| AntiqueWhite | #FAEBD7 | 250 235 215 |
| Linen | #FAF0E6 | 250 240 230 |
| LavenderBlush | #FFF0F5 | 255 240 245 |
| MistyRose | #FFE4E1 | 255 228 225 |
| Gainsboro | #DCDCDC | 220 220 220 |
| LightGray | #D3D3D3 | 211 211 211 |
| Silver | #C0C0C0 | 192 192 192 |
| DarkGray | #A9A9A9 | 169 169 169 |
| Gray | #808080 | 128 128 128 |
| DimGray | #696969 | 105 105 105 |
| LightSlateGray | #778899 | 119 136 153 |
| SlateGray | #708090 | 112 128 144 |
| DarkSlateGray | #2F4F4F | 47 79 79 |
| Black | #000000 | 0 0 0 |
GÜVENLİ RENK KODLARI (WEB SAFE COLORS)
| 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ı (Hex renk kodları ve Rgb renk kodları) bu kadar.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
){kind=link}