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 Önizlemesi | Renk Adları | Hex Kodu | Decimal Kodu(RGB) |
RED – KIRMIZI | |||
50 | #FFEBEE | 255, 235, 238 | |
100 | #FFCDD2 | 255, 205, 210 | |
200 | #EF9A9A | 239, 154, 154 | |
300 | #E57373 | 229, 115, 115 | |
400 | #EF5350 | 239, 83, 80 | |
500 | #F44336 | 244, 67, 54 | |
600 | #E53935 | 229, 57, 53 | |
700 | #D32F2F | 211, 47, 47 | |
800 | #C62828 | 198, 40, 40 | |
900 | #B71C1C | 183, 28, 28 | |
A100 | #FF8A80 | 255, 138, 128 | |
A200 | #FF5252 | 255, 82, 82 | |
A400 | #FF1744 | 255, 23, 68 | |
A700 | #D50000 | 213, 0, 0 | |
PINK – PEMBE | |||
50 | #FCE4EC | 252, 228, 236 | |
100 | #F8BBD0 | 248, 187, 208 | |
200 | #F48FB1 | 244, 143, 177 | |
300 | #F06292 | 240, 98, 146 | |
400 | #EC407A | 236, 64, 122 | |
500 | #E91E63 | 233, 30, 99 | |
600 | #D81B60 | 216, 27, 96 | |
700 | #C2185B | 194, 24, 91 | |
800 | #AD1457 | 173, 20, 87 | |
900 | #880E4F | 136, 14, 79 | |
A100 | #FF80AB | 255, 128, 171 | |
A200 | #FF4081 | 255, 64, 129 | |
A400 | #F50057 | 245, 0, 87 | |
A700 | #C51162 | 197, 17, 98 | |
PURPLE – MOR | |||
50 | #F3E5F5 | 243, 229, 245 | |
100 | #E1BEE7 | 225, 190, 231 | |
200 | #CE93D8 | 206, 147, 216 | |
300 | #BA68C8 | 186, 104, 200 | |
400 | #AB47BC | 171, 71, 188 | |
500 | #9C27B0 | 156, 39, 176 | |
600 | #8E24AA | 142, 36, 170 | |
700 | #7B1FA2 | 123, 31, 162 | |
800 | #6A1B9A | 106, 27, 154 | |
900 | #4A148C | 74, 20, 140 | |
A100 | #EA80FC | 234, 128, 252 | |
A200 | #E040FB | 224, 64, 251 | |
A400 | #D500F9 | 213, 0, 249 | |
A700 | #AA00FF | 170, 0, 255 | |
DEEP PURPLE – KOYU MOR | |||
50 | #EDE7F6 | 237, 231, 246 | |
100 | #D1C4E9 | 209, 196, 233 | |
200 | #B39DDB | 179, 157, 219 | |
300 | #9575CD | 149, 117, 205 | |
400 | #7E57C2 | 126, 87, 194 | |
500 | #673AB7 | 103, 58, 183 | |
600 | #5E35B1 | 94, 53, 177 | |
700 | #512DA8 | 81, 45, 168 | |
800 | #4527A0 | 69, 39, 160 | |
900 | #311B92 | 49, 27, 146 | |
A100 | #B388FF | 179, 136, 255 | |
A200 | #7C4DFF | 124, 77, 255 | |
A400 | #651FFF | 101, 31, 255 | |
A700 | #6200EA | 98, 0, 234 | |
INDIGO | |||
50 | #E8EAF6 | 232, 234, 246 | |
100 | #C5CAE9 | 197, 202, 233 | |
200 | #9FA8DA | 159, 168, 218 | |
300 | #7986CB | 121, 134, 203 | |
400 | #5C6BC0 | 92, 107, 192 | |
500 | #3F51B5 | 63, 81, 181 | |
600 | #3949AB | 57, 73, 171 | |
700 | #303F9F | 48, 63, 159 | |
800 | #283593 | 40, 53, 147 | |
900 | #1A237E | 26, 35, 126 | |
A100 | #8C9EFF | 140, 158, 255 | |
A200 | #536DFE | 83, 109, 254 | |
A400 | #3D5AFE | 61, 90, 254 | |
A700 | #304FFE | 48, 79, 254 | |
BLUE – MAVİ | |||
50 | #E3F2FD | 227, 242, 253 | |
100 | #BBDEFB | 187, 222, 251 | |
200 | #90CAF9 | 144, 202, 249 | |
300 | #64B5F6 | 100, 181, 246 | |
400 | #42A5F5 | 66, 165, 245 | |
500 | #2196F3 | 33, 150, 243 | |
600 | #1E88E5 | 30, 136, 229 | |
700 | #1976D2 | 25, 118, 210 | |
800 | #1565C0 | 21, 101, 192 | |
900 | #0D47A1 | 13, 71, 161 | |
A100 | #82B1FF | 130, 177, 255 | |
A200 | #448AFF | 68, 138, 255 | |
A400 | #2979FF | 41, 121, 255 | |
A700 | #2962FF | 41, 98, 255 | |
LIGHT BLUE – AÇIK MAVİ | |||
50 | #E1F5FE | 225, 245, 254 | |
100 | #B3E5FC | 179, 229, 252 | |
200 | #81D4FA | 129, 212, 250 | |
300 | #4FC3F7 | 79, 195, 247 | |
400 | #29B6F6 | 41, 182, 246 | |
500 | #03A9F4 | 3, 169, 244 | |
600 | #039BE5 | 3, 155, 229 | |
700 | #0288D1 | 2, 136, 209 | |
800 | #0277BD | 2, 119, 189 | |
900 | #01579B | 1, 87, 155 | |
A100 | #80D8FF | 128, 216, 255 | |
A200 | #40C4FF | 64, 196, 255 | |
A400 | #00B0FF | 0, 176, 255 | |
A700 | #0091EA | 0, 145, 234 | |
AQUA / CYAN / CAMGÖBEĞİ | |||
50 | #E0F7FA | 224, 247, 250 | |
100 | #B2EBF2 | 178, 235, 242 | |
200 | #80DEEA | 128, 222, 234 | |
300 | #4DD0E1 | 77, 208, 225 | |
400 | #26C6DA | 38, 198, 218 | |
500 | #00BCD4 | 0, 188, 212 | |
600 | #00ACC1 | 0, 172, 193 | |
700 | #0097A7 | 0, 151, 167 | |
800 | #00838F | 0, 131, 143 | |
900 | #006064 | 0, 96, 100 | |
A100 | #84FFFF | 132, 255, 255 | |
A200 | #18FFFF | 24, 255, 255 | |
A400 | #00E5FF | 0, 229, 255 | |
A700 | #00B8D4 | 0, 184, 212 | |
TEAL | |||
50 | #E0F2F1 | 224, 242, 241 | |
100 | #B2DFDB | 178, 223, 219 | |
200 | #80CBC4 | 128, 203, 196 | |
300 | #4DB6AC | 77, 182, 172 | |
400 | #26A69A | 38, 166, 154 | |
500 | #009688 | 0, 150, 136 | |
600 | #00897B | 0, 137, 123 | |
700 | #00796B | 0, 121, 107 | |
800 | #00695C | 0, 105, 92 | |
900 | #004D40 | 0, 77, 64 | |
A100 | #A7FFEB | 167, 255, 235 | |
A200 | #64FFDA | 100, 255, 218 | |
A400 | #1DE9B6 | 29, 233, 182 | |
A700 | #00BFA5 | 0, 191, 165 | |
GREEN – YEŞİL | |||
50 | #E8F5E9 | 232, 245, 233 | |
100 | #C8E6C9 | 200, 230, 201 | |
200 | #A5D6A7 | 165, 214, 167 | |
300 | #81C784 | 129, 199, 132 | |
400 | #66BB6A | 102, 187, 106 | |
500 | #4CAF50 | 76, 175, 80 | |
600 | #43A047 | 67, 160, 71 | |
700 | #388E3C | 56, 142, 60 | |
800 | #2E7D32 | 46, 125, 50 | |
900 | #1B5E20 | 27, 94, 32 | |
A100 | #B9F6CA | 185, 246, 202 | |
A200 | #69F0AE | 105, 240, 174 | |
A400 | #00E676 | 0, 230, 118 | |
A700 | #00C853 | 0, 200, 83 | |
LIGHT GREEN – AÇIK YEŞİL | |||
50 | #F1F8E9 | 241, 248, 233 | |
100 | #DCEDC8 | 220, 237, 200 | |
200 | #C5E1A5 | 197, 225, 165 | |
300 | #AED581 | 174, 213, 129 | |
400 | #9CCC65 | 156, 204, 101 | |
500 | #8BC34A | 139, 195, 74 | |
600 | #7CB342 | 124, 179, 66 | |
700 | #689F38 | 104, 159, 56 | |
800 | #558B2F | 85, 139, 47 | |
900 | #33691E | 51, 105, 30 | |
A100 | #CCFF90 | 204, 255, 144 | |
A200 | #B2FF59 | 178, 255, 89 | |
A400 | #76FF03 | 118, 255, 3 | |
A700 | #64DD17 | 100, 221, 23 | |
LIME – MİSKET LİMONU | |||
50 | #F9FBE7 | 249, 251, 231 | |
100 | #F0F4C3 | 240, 244, 195 | |
200 | #E6EE9C | 230, 238, 156 | |
300 | #DCE775 | 220, 231, 117 | |
400 | #D4E157 | 212, 225, 87 | |
500 | #CDDC39 | 205, 220, 57 | |
600 | #C0CA33 | 192, 202, 51 | |
700 | #AFB42B | 175, 180, 43 | |
800 | #9E9D24 | 158, 157, 36 | |
900 | #827717 | 130, 119, 23 | |
A100 | #F4FF81 | 244, 255, 129 | |
A200 | #EEFF41 | 238, 255, 65 | |
A400 | #C6FF00 | 198, 255, 0 | |
A700 | #AEEA00 | 174, 234, 0 | |
YELLOW – SARI | |||
50 | #FFFDE7 | 255, 253, 231 | |
100 | #FFF9C4 | 255, 249, 196 | |
200 | #FFF59D | 255, 245, 157 | |
300 | #FFF176 | 255, 241, 118 | |
400 | #FFEE58 | 255, 238, 88 | |
500 | #FFEB3B | 255, 235, 59 | |
600 | #FDD835 | 253, 216, 53 | |
700 | #FBC02D | 251, 192, 45 | |
800 | #F9A825 | 249, 168, 37 | |
900 | #F57F17 | 245, 127, 23 | |
A100 | #FFFF8D | 255, 255, 141 | |
A200 | #FFFF00 | 255, 255, 0 | |
A400 | #FFEA00 | 255, 234, 0 | |
A700 | #FFD600 | 255, 214, 0 | |
AMBER – KEHRİBAR/KOYU SARI | |||
50 | #FFF8E1 | 255, 248, 225 | |
100 | #FFECB3 | 255, 236, 179 | |
200 | #FFE082 | 255, 224, 130 | |
300 | #FFD54F | 255, 213, 79 | |
400 | #FFCA28 | 255, 202, 40 | |
500 | #FFC107 | 255, 193, 7 | |
600 | #FFB300 | 255, 179, 0 | |
700 | #FFA000 | 255, 160, 0 | |
800 | #FF8F00 | 255, 143, 0 | |
900 | #FF6F00 | 255, 111, 0 | |
A100 | #FFE57F | 255, 229, 127 | |
A200 | #FFD740 | 255, 215, 64 | |
A400 | #FFC400 | 255, 196, 0 | |
A700 | #FFAB00 | 255, 171, 0 | |
ORANGE – TURUNCU | |||
50 | #FFF3E0 | 255, 243, 224 | |
100 | #FFE0B2 | 255, 224, 178 | |
200 | #FFCC80 | 255, 204, 128 | |
300 | #FFB74D | 255, 183, 77 | |
400 | #FFA726 | 255, 167, 38 | |
500 | #FF9800 | 255, 152, 0 | |
600 | #FB8C00 | 251, 140, 0 | |
700 | #F57C00 | 245, 124, 0 | |
800 | #EF6C00 | 239, 108, 0 | |
900 | #E65100 | 230, 81, 0 | |
A100 | #FFD180 | 255, 209, 128 | |
A200 | #FFAB40 | 255, 171, 64 | |
A400 | #FF9100 | 255, 145, 0 | |
A700 | #FF6D00 | 255, 109, 0 | |
DEEP ORANGE – KOYU TURUNCU | |||
50 | #FBE9E7 | 251, 233, 231 | |
100 | #FFCCBC | 255, 204, 188 | |
200 | #FFAB91 | 255, 171, 145 | |
300 | #FF8A65 | 255, 138, 101 | |
400 | #FF7043 | 255, 112, 67 | |
500 | #FF5722 | 255, 87, 34 | |
600 | #F4511E | 244, 81, 30 | |
700 | #E64A19 | 230, 74, 25 | |
800 | #D84315 | 216, 67, 21 | |
900 | #BF360C | 191, 54, 12 | |
A100 | #FF9E80 | 255, 158, 128 | |
A200 | #FF6E40 | 255, 110, 64 | |
A400 | #FF3D00 | 255, 61, 0 | |
A700 | #DD2C00 | 221, 44, 0 | |
BROWN – KAHVERENGİ | |||
50 | #EFEBE9 | 239, 235, 233 | |
100 | #D7CCC8 | 215, 204, 200 | |
200 | #BCAAA4 | 188, 170, 164 | |
300 | #A1887F | 161, 136, 127 | |
400 | #8D6E63 | 141, 110, 99 | |
500 | #795548 | 121, 85, 72 | |
600 | #6D4C41 | 109, 76, 65 | |
700 | #5D4037 | 93, 64, 55 | |
800 | #4E342E | 78, 52, 46 | |
900 | #3E2723 | 62, 39, 35 | |
GREY – GRİ | |||
50 | #FAFAFA | 250, 250, 250 | |
100 | #F5F5F5 | 245, 245, 245 | |
200 | #EEEEEE | 238, 238, 238 | |
300 | #E0E0E0 | 224, 224, 224 | |
400 | #BDBDBD | 189, 189, 189 | |
500 | #9E9E9E | 158, 158, 158 | |
600 | #757575 | 117, 117, 117 | |
700 | #616161 | 97, 97, 97 | |
800 | #424242 | 66, 66, 66 | |
900 | #212121 | 33, 33, 33 | |
BLUE GREY – MAVİ GRİ | |||
50 | #ECEFF1 | 236, 239, 241 | |
100 | #CFD8DC | 207, 216, 220 | |
200 | #B0BEC5 | 176, 190, 197 | |
300 | #90A4AE | 144, 164, 174 | |
400 | #78909C | 120, 144, 156 | |
500 | #607D8B | 96, 125, 139 | |
600 | #546E7A | 84, 110, 122 | |
700 | #455A64 | 69, 90, 100 | |
800 | #37474F | 55, 71, 79 | |
900 | #263238 | 38, 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 Önizlemesi | Renk Adları | Hex Kodu | Decimal Kodu(RGB) |
white | #FFFFFF | 255,255,255 | |
gray | #808080 | 128,128,128 | |
silver | #C0C0C0 | 192,192,192 | |
black | #000000 | 0,0,0 | |
maroon | #800000 | 128,0,0 | |
red | #FF0000 | 255,0,0 | |
purple | #800080 | 128,0,128 | |
fuchsia | #FF00FF | 255,0,255 | |
green | #008000 | 0,128,0 | |
lime | #00FF00 | 0,255,0 | |
olive | #808000 | 128,128,0 | |
yellow | #FFFF00 | 255,255,0 | |
navy | #000080 | 0,0,128 | |
blue | #0000FF | 0,0,255 | |
teal | #008080 | 0,128,128 | |
aqua | #00FFFF | 0,255,255 | |
orange | #FFA500 | 255,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 Önizlemesi | Renk Adları | Hex Kodu | Decimal Kodu(RGB) |
Kırmızı Renk Adları (Red Color Names) | |||
indianred | #CD5C5C | 205,92,92 | |
lightcoral | #F08080 | 240,128,128 | |
salmon | #FA8072 | 250,128,114 | |
darksalmon | #E9967A | 233,150,122 | |
lightsalmon | #FFA07A | 255,160,122 | |
crimson | #DC143C | 220,20,60 | |
red | #FF0000 | 255,0,0 | |
firebrick | #B22222 | 178,34,34 | |
darkred | #8B0000 | 139,0,0 | |
Pembe Renk Adları (Pink Color Names) | |||
pink | #FFC0CB | 255,192,203 | |
lightpink | #FFB6C1 | 255,182,193 | |
hotpink | #FF69B4 | 255,105,180 | |
deeppink | #FF1493 | 255,20,147 | |
mediumvioletred | #C71585 | 199,21,133 | |
palevioletred | #DB7093 | 219,112,147 | |
Turuncu Renk Adları (Orange Color Names) | |||
lightsalmon | #FFA07A | 255,160,122 | |
coral | #FF7F50 | 255,127,80 | |
tomato | #FF6347 | 255,99,71 | |
orangered | #FF4500 | 255,69,0 | |
darkorange | #FF8C00 | 255,140,0 | |
orange | #FFA500 | 255,165,0 | |
Sarı Renk Adları (Yellow Color Names) | |||
gold | #FFD700 | 255,215,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 | |
Mor Renk Adları (Purple Color Names) | |||
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 | |
slateblue | #6A5ACD | 106,90,205 | |
darkslateblue | #483D8B | 72,61,139 | |
mediumslateblue | #7B68EE | 123,104,238 | |
Yeşil Renk Adları (Green Color Names) | |||
greenyellow | #ADFF2F | 173,255,47 | |
chartreuse | #7FFF00 | 127,255,0 | |
lawngreen | #7CFC00 | 124,252,0 | |
lime | #00FF00 | 0,255,0 | |
limegreen | #32CD32 | 50,205,50 | |
palegreen | #98FB98 | 152,251,152 | |
lightgreen | #90EE90 | 144,238,144 | |
mediumspringgreen | #00FA9A | 0,250,154 | |
springgreen | #00FF7F | 0,255,127 | |
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 | |
yellowgreen | #9ACD32 | 154,205,50 | |
olivedrab | #6B8E23 | 107,142,35 | |
olive | #808000 | 128,128,0 | |
darkolivegreen | #556B2F | 85,107,47 | |
mediumaquamarine | #66CDAA | 102,205,170 | |
darkseagreen | #8FBC8F | 143,188,143 | |
lightseagreen | #20B2AA | 32,178,170 | |
darkcyan | #008B8B | 0,139,139 | |
teal | #008080 | 0,128,128 | |
Mavi Renk Adları (Blue Color Names) | |||
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 | |
cadetblue | #5F9EA0 | 95,158,160 | |
steelblue | #4682B4 | 70,130,180 | |
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 | |
mediumslateblue | #7B68EE | 123,104,238 | |
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 | |
Kahverengi Renk Adları (Brown Color Names) | |||
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 | |
Beyaz Renk Adları (White Color Names) | |||
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 | |
Gri Renk Adları | |||
gainsboro | #DCDCDC | 220,220,220 | |
lightgrey | #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 |
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 seviyesi | Kod 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
- Html, Javascript, CSS Kod Editörü
- HTML5 Web Workers
- HTML5 Hidden Attribute Nedir?
- Turuncu HTML/CSS Renk Kodları ve Adları (Color Codes and Names)
📚 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?, car parking renk kodları
Abi kralsın ya senin sayende profilime renkli yazdım çok sağol abi
İşine yaramasına sevindim 👍
Sayfanız çok faydalı. Teşekkürler.
Teşekkür ederim, faydası olmasına sevindim
çok teşekkürler şu kodlarını öğrenemmdim gitti çok teşekkürler
5-10 koddan sonrasını ezberlemek zor oluyor. 5-10 kod şimdilik yetiyor geliştirmelerimde 😀
Aga cok iyi geldi bi de iyiki en başta cıktı kralsın hocam
Teşekkür ederim, işinize yaramış olmasına çok sevindim.
teşekürler yarabbil alemin hocam
Rica ederim 🙂
teşekürler hocam
Rica ederim 🙂
Elinize sağlık.
Teşekkürler 👍
çk tşk
Rica ederim 🙂
hocam eyvallah ya valla mükemmel bir insansınız
Teşekkür ederim.
Murat hocam teşekkürler html renk kodları aramamızda ilk olarak sitenizle karşılaşıp gayet kaliteli bir sayfada işimizi çözebiliyoruz. İyi çalışmalar diliyoruz.
Teşekkür ederim.