HTML / CSS Renk Kodları ve Adları (Color Codes and Names)

HTML / CSS Renk KodlarıHTML / CSS Renk Kodları, CSS ve HTML tasarımlarında en sık kullanılan, Material Design renk paleti ayrıca W3C tarafından standartı oluşturulmuş ve popüler tüm tarayıcılar tarafından kabul görmüş html renk kodlarını sizler için bu sayfada topladım.


Renk Seçim Aracı

Video

Material Design Renk Paleti (Material Design Color Palette)

Renk ÖnizlemesiRenk AdlarıHex KoduDecimal Kodu(RGB)
RED – KIRMIZI
 50#FFEBEE255, 235, 238
 100#FFCDD2255, 205, 210
 200#EF9A9A239, 154, 154
 300#E57373229, 115, 115
 400#EF5350239, 83, 80
 500#F44336244, 67, 54
 600#E53935229, 57, 53
 700#D32F2F211, 47, 47
 800#C62828198, 40, 40
 900#B71C1C183, 28, 28
 A100#FF8A80255, 138, 128
 A200#FF5252255, 82, 82
 A400#FF1744255, 23, 68
 A700#D50000213, 0, 0
PINK – PEMBE
 50#FCE4EC252, 228, 236
 100#F8BBD0248, 187, 208
 200#F48FB1244, 143, 177
 300#F06292240, 98, 146
 400#EC407A236, 64, 122
 500#E91E63233, 30, 99
 600#D81B60216, 27, 96
 700#C2185B194, 24, 91
 800#AD1457173, 20, 87
 900#880E4F136, 14, 79
 A100#FF80AB255, 128, 171
 A200#FF4081255, 64, 129
 A400#F50057245, 0, 87
 A700#C51162197, 17, 98
PURPLE – MOR
 50#F3E5F5243, 229, 245
 100#E1BEE7225, 190, 231
 200#CE93D8206, 147, 216
 300#BA68C8186, 104, 200
 400#AB47BC171, 71, 188
 500#9C27B0156, 39, 176
 600#8E24AA142, 36, 170
 700#7B1FA2123, 31, 162
 800#6A1B9A106, 27, 154
 900#4A148C74, 20, 140
 A100#EA80FC234, 128, 252
 A200#E040FB224, 64, 251
 A400#D500F9213, 0, 249
 A700#AA00FF170, 0, 255
DEEP PURPLE – KOYU MOR
 50#EDE7F6237, 231, 246
 100#D1C4E9209, 196, 233
 200#B39DDB179, 157, 219
 300#9575CD149, 117, 205
 400#7E57C2126, 87, 194
 500#673AB7103, 58, 183
 600#5E35B194, 53, 177
 700#512DA881, 45, 168
 800#4527A069, 39, 160
 900#311B9249, 27, 146
 A100#B388FF179, 136, 255
 A200#7C4DFF124, 77, 255
 A400#651FFF101, 31, 255
 A700#6200EA98, 0, 234
INDIGO
 50#E8EAF6232, 234, 246
 100#C5CAE9197, 202, 233
 200#9FA8DA159, 168, 218
 300#7986CB121, 134, 203
 400#5C6BC092, 107, 192
 500#3F51B563, 81, 181
 600#3949AB57, 73, 171
 700#303F9F48, 63, 159
 800#28359340, 53, 147
 900#1A237E26, 35, 126
 A100#8C9EFF140, 158, 255
 A200#536DFE83, 109, 254
 A400#3D5AFE61, 90, 254
 A700#304FFE48, 79, 254
BLUE – MAVİ
 50#E3F2FD227, 242, 253
 100#BBDEFB187, 222, 251
 200#90CAF9144, 202, 249
 300#64B5F6100, 181, 246
 400#42A5F566, 165, 245
 500#2196F333, 150, 243
 600#1E88E530, 136, 229
 700#1976D225, 118, 210
 800#1565C021, 101, 192
 900#0D47A113, 71, 161
 A100#82B1FF130, 177, 255
 A200#448AFF68, 138, 255
 A400#2979FF41, 121, 255
 A700#2962FF41, 98, 255
LIGHT BLUE – AÇIK MAVİ
 50#E1F5FE225, 245, 254
 100#B3E5FC179, 229, 252
 200#81D4FA129, 212, 250
 300#4FC3F779, 195, 247
 400#29B6F641, 182, 246
 500#03A9F43, 169, 244
 600#039BE53, 155, 229
 700#0288D12, 136, 209
 800#0277BD2, 119, 189
 900#01579B1, 87, 155
 A100#80D8FF128, 216, 255
 A200#40C4FF64, 196, 255
 A400#00B0FF0, 176, 255
 A700#0091EA0, 145, 234
CYAN
 50#E0F7FA224, 247, 250
 100#B2EBF2178, 235, 242
 200#80DEEA128, 222, 234
 300#4DD0E177, 208, 225
 400#26C6DA38, 198, 218
 500#00BCD40, 188, 212
 600#00ACC10, 172, 193
 700#0097A70, 151, 167
 800#00838F0, 131, 143
 900#0060640, 96, 100
 A100#84FFFF132, 255, 255
 A200#18FFFF24, 255, 255
 A400#00E5FF0, 229, 255
 A700#00B8D40, 184, 212
TEAL
 50#E0F2F1224, 242, 241
 100#B2DFDB178, 223, 219
 200#80CBC4128, 203, 196
 300#4DB6AC77, 182, 172
 400#26A69A38, 166, 154
 500#0096880, 150, 136
 600#00897B0, 137, 123
 700#00796B0, 121, 107
 800#00695C0, 105, 92
 900#004D400, 77, 64
 A100#A7FFEB167, 255, 235
 A200#64FFDA100, 255, 218
 A400#1DE9B629, 233, 182
 A700#00BFA50, 191, 165
GREEN – YEŞİL
 50#E8F5E9232, 245, 233
 100#C8E6C9200, 230, 201
 200#A5D6A7165, 214, 167
 300#81C784129, 199, 132
 400#66BB6A102, 187, 106
 500#4CAF5076, 175, 80
 600#43A04767, 160, 71
 700#388E3C56, 142, 60
 800#2E7D3246, 125, 50
 900#1B5E2027, 94, 32
 A100#B9F6CA185, 246, 202
 A200#69F0AE105, 240, 174
 A400#00E6760, 230, 118
 A700#00C8530, 200, 83
LIGHT GREEN – AÇIK YEŞİL
 50#F1F8E9241, 248, 233
 100#DCEDC8220, 237, 200
 200#C5E1A5197, 225, 165
 300#AED581174, 213, 129
 400#9CCC65156, 204, 101
 500#8BC34A139, 195, 74
 600#7CB342124, 179, 66
 700#689F38104, 159, 56
 800#558B2F85, 139, 47
 900#33691E51, 105, 30
 A100#CCFF90204, 255, 144
 A200#B2FF59178, 255, 89
 A400#76FF03118, 255, 3
 A700#64DD17100, 221, 23
LIME – MİSKET LİMONU
 50#F9FBE7249, 251, 231
 100#F0F4C3240, 244, 195
 200#E6EE9C230, 238, 156
 300#DCE775220, 231, 117
 400#D4E157212, 225, 87
 500#CDDC39205, 220, 57
 600#C0CA33192, 202, 51
 700#AFB42B175, 180, 43
 800#9E9D24158, 157, 36
 900#827717130, 119, 23
 A100#F4FF81244, 255, 129
 A200#EEFF41238, 255, 65
 A400#C6FF00198, 255, 0
 A700#AEEA00174, 234, 0
YELLOW – SARI
 50#FFFDE7255, 253, 231
 100#FFF9C4255, 249, 196
 200#FFF59D255, 245, 157
 300#FFF176255, 241, 118
 400#FFEE58255, 238, 88
 500#FFEB3B255, 235, 59
 600#FDD835253, 216, 53
 700#FBC02D251, 192, 45
 800#F9A825249, 168, 37
 900#F57F17245, 127, 23
 A100#FFFF8D255, 255, 141
 A200#FFFF00255, 255, 0
 A400#FFEA00255, 234, 0
 A700#FFD600255, 214, 0
AMBER – KEHRİBAR/KOYU SARI
 50#FFF8E1255, 248, 225
 100#FFECB3255, 236, 179
 200#FFE082255, 224, 130
 300#FFD54F255, 213, 79
 400#FFCA28255, 202, 40
 500#FFC107255, 193, 7
 600#FFB300255, 179, 0
 700#FFA000255, 160, 0
 800#FF8F00255, 143, 0
 900#FF6F00255, 111, 0
 A100#FFE57F255, 229, 127
 A200#FFD740255, 215, 64
 A400#FFC400255, 196, 0
 A700#FFAB00255, 171, 0
ORANGE – TURUNCU
 50#FFF3E0255, 243, 224
 100#FFE0B2255, 224, 178
 200#FFCC80255, 204, 128
 300#FFB74D255, 183, 77
 400#FFA726255, 167, 38
 500#FF9800255, 152, 0
 600#FB8C00251, 140, 0
 700#F57C00245, 124, 0
 800#EF6C00239, 108, 0
 900#E65100230, 81, 0
 A100#FFD180255, 209, 128
 A200#FFAB40255, 171, 64
 A400#FF9100255, 145, 0
 A700#FF6D00255, 109, 0
DEEP ORANGE – KOYU TURUNCU
 50#FBE9E7251, 233, 231
 100#FFCCBC255, 204, 188
 200#FFAB91255, 171, 145
 300#FF8A65255, 138, 101
 400#FF7043255, 112, 67
 500#FF5722255, 87, 34
 600#F4511E244, 81, 30
 700#E64A19230, 74, 25
 800#D84315216, 67, 21
 900#BF360C191, 54, 12
 A100#FF9E80255, 158, 128
 A200#FF6E40255, 110, 64
 A400#FF3D00255, 61, 0
 A700#DD2C00221, 44, 0
BROWN – KAHVERENGİ
 50#EFEBE9239, 235, 233
 100#D7CCC8215, 204, 200
 200#BCAAA4188, 170, 164
 300#A1887F161, 136, 127
 400#8D6E63141, 110, 99
 500#795548121, 85, 72
 600#6D4C41109, 76, 65
 700#5D403793, 64, 55
 800#4E342E78, 52, 46
 900#3E272362, 39, 35
GREY – GRİ
 50#FAFAFA250, 250, 250
 100#F5F5F5245, 245, 245
 200#EEEEEE238, 238, 238
 300#E0E0E0224, 224, 224
 400#BDBDBD189, 189, 189
 500#9E9E9E158, 158, 158
 600#757575117, 117, 117
 700#61616197, 97, 97
 800#42424266, 66, 66
 900#21212133, 33, 33
BLUE GREY – MAVİ GRİ
 50#ECEFF1236, 239, 241
 100#CFD8DC207, 216, 220
 200#B0BEC5176, 190, 197
 300#90A4AE144, 164, 174
 400#78909C120, 144, 156
 500#607D8B96, 125, 139
 600#546E7A84, 110, 122
 700#455A6469, 90, 100
 800#37474F55, 71, 79
 900#26323838, 50, 56

Temel Renk Kodları ve Adları

HTML 4.01 standartlarında 16 tane temel renk adları tanımlanmıştır. Bu renkler aslında standart EGA renk paleti olarak kullanılmaktadır.

Renk ÖnizlemesiRenk AdlarıHex KoduDecimal Kodu(RGB)
 white#FFFFFF255,255,255
 gray#808080128,128,128
 silver#C0C0C0192,192,192
 black#0000000,0,0
 maroon#800000128,0,0
 red#FF0000255,0,0
 purple#800080128,0,128
 fuchsia#FF00FF255,0,255
 green#0080000,128,0
 lime#00FF000,255,0
 olive#808000128,128,0
 yellow#FFFF00255,255,0
 navy#0000800,0,128
 blue#0000FF0,0,255
 teal#0080800,128,128
 aqua#00FFFF0,255,255
 orange#FFA500255,165,0

X11 Renk Adları (W3C Renk Adları)

W3C standartlarına göre tüm tarayıcılar tarafından kabul görmüş X11 renk setinin tümünü alttaki uzun tablodan ulaşabilirsiniz.

Renk ÖnizlemesiRenk AdlarıHex KoduDecimal Kodu(RGB)
Kırmızı Renk Adları (Red Color Names)
 indianred#CD5C5C205,92,92
 lightcoral#F08080240,128,128
 salmon#FA8072250,128,114
 darksalmon#E9967A233,150,122
 lightsalmon#FFA07A255,160,122
 crimson#DC143C220,20,60
 red#FF0000255,0,0
 firebrick#B22222178,34,34
 darkred#8B0000139,0,0
Pembe Renk Adları (Pink Color Names)
 pink#FFC0CB255,192,203
 lightpink#FFB6C1255,182,193
 hotpink#FF69B4255,105,180
 deeppink#FF1493255,20,147
 mediumvioletred#C71585199,21,133
 palevioletred#DB7093219,112,147
Turuncu Renk Adları (Orange Color Names)
 lightsalmon#FFA07A255,160,122
 coral#FF7F50255,127,80
 tomato#FF6347255,99,71
 orangered#FF4500255,69,0
 darkorange#FF8C00255,140,0
 orange#FFA500255,165,0
Sarı Renk Adları (Yellow Color Names)
 gold#FFD700255,215,0
 yellow#FFFF00255,255,0
 lightyellow#FFFFE0255,255,224
 lemonchiffon#FFFACD255,250,205
 lightgoldenrodyellow#FAFAD2250,250,210
 papayawhip#FFEFD5255,239,213
 moccasin#FFE4B5255,228,181
 peachpuff#FFDAB9255,218,185
 palegoldenrod#EEE8AA238,232,170
 khaki#F0E68C240,230,140
 darkkhaki#BDB76B189,183,107
Mor Renk Adları (Purple Color Names)
 lavender#E6E6FA230,230,250
 thistle#D8BFD8216,191,216
 plum#DDA0DD221,160,221
 violet#EE82EE238,130,238
 orchid#DA70D6218,112,214
 fuchsia#FF00FF255,0,255
 magenta#FF00FF255,0,255
 mediumorchid#BA55D3186,85,211
 mediumpurple#9370DB147,112,219
 blueviolet#8A2BE2138,43,226
 darkviolet#9400D3148,0,211
 darkorchid#9932CC153,50,204
 darkmagenta#8B008B139,0,139
 purple#800080128,0,128
 indigo#4B008275,0,130
 slateblue#6A5ACD106,90,205
 darkslateblue#483D8B72,61,139
 mediumslateblue#7B68EE123,104,238
Yeşil Renk Adları (Green Color Names)
 greenyellow#ADFF2F173,255,47
 chartreuse#7FFF00127,255,0
 lawngreen#7CFC00124,252,0
 lime#00FF000,255,0
 limegreen#32CD3250,205,50
 palegreen#98FB98152,251,152
 lightgreen#90EE90144,238,144
 mediumspringgreen#00FA9A0,250,154
 springgreen#00FF7F0,255,127
 mediumseagreen#3CB37160,179,113
 seagreen#2E8B5746,139,87
 forestgreen#228B2234,139,34
 green#0080000,128,0
 darkgreen#0064000,100,0
 yellowgreen#9ACD32154,205,50
 olivedrab#6B8E23107,142,35
 olive#808000128,128,0
 darkolivegreen#556B2F85,107,47
 mediumaquamarine#66CDAA102,205,170
 darkseagreen#8FBC8F143,188,143
 lightseagreen#20B2AA32,178,170
 darkcyan#008B8B0,139,139
 teal#0080800,128,128
Mavi Renk Adları (Blue Color Names)
 aqua#00FFFF0,255,255
 cyan#00FFFF0,255,255
 lightcyan#E0FFFF224,255,255
 paleturquoise#AFEEEE175,238,238
 aquamarine#7FFFD4127,255,212
 turquoise#40E0D064,224,208
 mediumturquoise#48D1CC72,209,204
 darkturquoise#00CED10,206,209
 cadetblue#5F9EA095,158,160
 steelblue#4682B470,130,180
 lightsteelblue#B0C4DE176,196,222
 powderblue#B0E0E6176,224,230
 lightblue#ADD8E6173,216,230
 skyblue#87CEEB135,206,235
 lightskyblue#87CEFA135,206,250
 deepskyblue#00BFFF0,191,255
 dodgerblue#1E90FF30,144,255
 cornflowerblue#6495ED100,149,237
 mediumslateblue#7B68EE123,104,238
 royalblue#4169E165,105,225
 blue#0000FF0,0,255
 mediumblue#0000CD0,0,205
 darkblue#00008B0,0,139
 navy#0000800,0,128
 midnightblue#19197025,25,112
Kahverengi Renk Adları (Brown Color Names)
 cornsilk#FFF8DC255,248,220
 blanchedalmond#FFEBCD255,235,205
 bisque#FFE4C4255,228,196
 navajowhite#FFDEAD255,222,173
 wheat#F5DEB3245,222,179
 burlywood#DEB887222,184,135
 tan#D2B48C210,180,140
 rosybrown#BC8F8F188,143,143
 sandybrown#F4A460244,164,96
 goldenrod#DAA520218,165,32
 darkgoldenrod#B8860B184,134,11
 peru#CD853F205,133,63
 chocolate#D2691E210,105,30
 saddlebrown#8B4513139,69,19
 sienna#A0522D160,82,45
 brown#A52A2A165,42,42
 maroon#800000128,0,0
Beyaz Renk Adları (White Color Names)
 white#FFFFFF255,255,255
 snow#FFFAFA255,250,250
 honeydew#F0FFF0240,255,240
 mintcream#F5FFFA245,255,250
 azure#F0FFFF240,255,255
 aliceblue#F0F8FF240,248,255
 ghostwhite#F8F8FF248,248,255
 whitesmoke#F5F5F5245,245,245
 seashell#FFF5EE255,245,238
 beige#F5F5DC245,245,220
 oldlace#FDF5E6253,245,230
 floralwhite#FFFAF0255,250,240
 ivory#FFFFF0255,255,240
 antiquewhite#FAEBD7250,235,215
 linen#FAF0E6250,240,230
 lavenderblush#FFF0F5255,240,245
 mistyrose#FFE4E1255,228,225
Gri Renk Adları
 gainsboro#DCDCDC220,220,220
 lightgrey#D3D3D3211,211,211
 silver#C0C0C0192,192,192
 darkgray#A9A9A9169,169,169
 gray#808080128,128,128
 dimgray#696969105,105,105
 lightslategray#778899119,136,153
 slategray#708090112,128,144
 darkslategray#2F4F4F47,79,79
 black#0000000,0,0

Hex Koduna Saydamlık Ekleme

W3C standart renklerinden biri kırmızı renk koduna ait hex(#FF0000) koduna 100 seviyesinden 0 seviyesine kadar saydamlık nasıl ekleriz onu göreceğiz. Her saydamlık seviyesinin kod karşılığı bulunmaktadır. Saydamlık seviyeleri, hex kodu karşılığı, mevcut hex koduna dahil edilmiş hali ile son olarak saydamlık uygulanmış hex kodunun sonucunu alttaki tabloda bulabilirsiniz. Mevcut hex koduna 2 karakter saydamlık kodunu en sona ekleyerek hex kodunuza saydamlık ekleyebilirsiniz.

Saydamlık seviyesiKod karşılığıHex kodu ile kullanımıSonuç
100%FF#FF0000FF 
99%FC#FF0000FC 
98%FA#FF0000FA 
97%F7#FF0000F7 
96%F5#FF0000F5 
95%F2#FF0000F2 
94%F0#FF0000F0 
93%ED#FF0000ED 
92%EB#FF0000EB 
91%E8#FF0000E8 
90%E6#FF0000E6 
89%E3#FF0000E3 
88%E0#FF0000E0 
87%DE#FF0000DE 
86%DB#FF0000DB 
85%D9#FF0000D9 
84%D6#FF0000D6 
83%D4#FF0000D4 
82%D1#FF0000D1 
81%CF#FF0000CF 
80%CC#FF0000CC 
79%C9#FF0000C9 
78%C7#FF0000C7 
77%C4#FF0000C4 
76%C2#FF0000C2 
75%BF#FF0000BF 
74%BD#FF0000BD 
73%BA#FF0000BA 
72%B8#FF0000B8 
71%B5#FF0000B5 
70%B3#FF0000B3 
69%B0#FF0000B0 
68%AD#FF0000AD 
67%AB#FF0000AB 
66%A8#FF0000A8 
65%A6#FF0000A6 
64%A3#FF0000A3 
63%A1#FF0000A1 
62%9E#FF00009E 
61%9C#FF00009C 
60%99#FF000099 
59%96#FF000096 
58%94#FF000094 
57%91#FF000091 
56%8F#FF00008F 
55%8C#FF00008C 
54%8A#FF00008A 
53%87#FF000087 
52%85#FF000085 
51%82#FF000082 
50%80#FF000080 
49%7D#FF00007D 
48%7A#FF00007A 
47%78#FF000078 
46%75#FF000075 
45%73#FF000073 
44%70#FF000070 
43%6E#FF00006E 
42%6B#FF00006B 
41%69#FF000069 
40%66#FF000066 
39%63#FF000063 
38%61#FF000061 
37%5E#FF00005E 
36%5C#FF00005C 
35%59#FF000059 
34%57#FF000057 
33%54#FF000054 
32%52#FF000052 
31%4F#FF00004F 
30%4D#FF00004D 
29%4A#FF00004A 
28%47#FF000047 
27%45#FF000045 
26%42#FF000042 
25%40#FF000040 
24%3D#FF00003D 
23%3B#FF00003B 
22%38#FF000038 
21%36#FF000036 
20%33#FF000033 
19%30#FF000030 
18%2E#FF00002E 
17%2B#FF00002B 
16%29#FF000029 
15%26#FF000026 
14%24#FF000024 
13%21#FF000021 
12%1F#FF00001F 
11%1C#FF00001C 
10%1A#FF00001A 
9%17#FF000017 
8%14#FF000014 
7%12#FF000012 
6%0F#FF00000F 
5%0D#FF00000D 
4%0A#FF00000A 
3%08#FF000008 
2%05#FF000005 
1%03#FF000003 
0%00#FF000000 

Hex Kodunu 3 Karakter Olarak Kullanmak

Hex kodları normalde r-g-b hex kodu karşılıkları ile 6 karakter olarak yazılmaktadır ve şimdiye kadar üstteki örneklerimizin tümünde 6 karakter şeklinde kullandık(saydamlık uygulanmış 8 karakterli hex kodları hariç). Bu başlık altında hex kodlarını 3 karakter şeklinde nasıl kullanırız onu göreceğiz. Eğer r-g-b renk kombinasyonundaki her 2 karakter aynı ise 3 karakter olarak kullanılabilir diyebiliriz. Bu açıklama pek yeterli olmadığı düşüncesindeyim o yüzden örnekle açıklayalım. Siyah(#000000) ve Beyaz(#FFFFFF) renklerine ait 6 karakterli hex kodları en sık 3 karakter şeklinde kullanılan hex kodlarıdır. Siyah renge ait hex kodunu #000 ve beyaz renge ait hex kodunu ise #FFF şeklinde kullanabiliyoruz.


📚 İlginizi Çekebilecek Diğer Konular


📚 Kaynaklar

html / css renk kodları, en popüler html / css renk kodları, en sık kullanılan html / css renk kodları, html / css renk kodları nedir, html / css renk kodları örneği, html / css renk kodları nasıl kullanılır?