Русское название | In English | Код / Сode |
| Белоснежный | Snow | FFFAFA |
| Призрачно-белый | Ghostwhite | F8F8FF |
| Белый-антик | Antique White | FAEBD7 |
| Кремовый | Cream | FFFBF0 |
| Персиковый | Peachpuff | |
| Белый-навахо | Navajo White | FFDEAD |
| Шелковый оттенок | Cornsilk | FFF8DC |
| Слоновая кость | Ivory | FFFFF0 |
| Лимонный | Lemon Chiffon | FFFACD |
| Морская раковина | Seashell | FFF5EE |
| Медовый | Honeydew | F0FFF0 |
| Лазурный | Azure | F0FFFF |
| Бледно-лиловый | Lavender | E6E6FA |
| Голубой с красным отливом | Lavender Blush | FFF0F5 |
| Тускло-розовый | Misty Rose | FFE4E1 |
| Белый | White (*) | FFFFFF |
| Черный | Black (*) | 000000 |
| Тускло-серый | Dim Gray | 696969 |
| Синевато-серый | Slate Gray | 708090 |
| Грифельно-серый | Light Slate Gray | 778899 |
| Серый | Gray | BEBEBE |
| Светло-серый | Light Gray | C0C0C0 |
| Серый нейтральный | Medium Gray | A0A0A4 |
| Темно-серый | Dark Gray | 808080 |
| Полуночно-синий | Midnight Blue | 191970 |
| Темно-синий | Navy (*), Dark Blue | 000080 |
| Васильковый | Cornflower | 6495ED |
| Грифельно-синий | Slate Blue | 6A5ACD |
| Светлый грифельно-синий | Light Slate Blue | |
| Голубой королевский | Royal Blue | 4169E1 |
| Синий | Blue | 0000FF |
| Небесно-голубой | Sky Blue | 87CEEB |
| Небесно-голубой светлый | Light Sky Blue | 87CEFA |
| Синий со стальным оттенком | Steel Blue | 4682B4 |
| Голубой со стальным оттенком | Light Steel Blue | B0C4DE |
| Светло-синий | Light Blue | A6CAF0 |
| Синий с пороховым оттенком | Powder Blue | B0E0E6 |
| Бледно-бирюзовый | Pale Turquoise | AFEEEE |
| Бирюзовый | Turquoise | 40E0D0 |
| Зеленовато-голубой | Cyan (*) | 00FFFF |
| Светлый циан | E0FFFF | |
| Темный циан | Dark Cyan | 008080 |
| Серо-синий | Cadet Blue | 5F9EA0 |
| Аквамарин | Aquamarine | 7FFFD4 |
| Цвет морской волны | Seagreen | 54FF9F |
| Цвет морской волны, светлый | Light Seagreen | 20B2AA |
| Бледно-зеленый | Pale Green | 98FB98 |
| Весенне-зеленый | Spring Green | 00FF7F |
| Зеленая лужайка | Lawn Green | 7CFC00 |
| Зеленый | Green (*) | 00FF00 |
| Средне-зеленый | Medium Green | C0DCC0 |
| Темно-зеленый | Dark Green | 008000 |
| Зеленовато-желтый | 7FFF00 | |
| Зелено-желтый | Green Yellow | ADFF2F |
| Лимонно-зеленый | Lime Green | 32CD32 |
| Желто-зеленый | Yellow Green | 9ACD32 |
| Зеленый лесной | Forest Green | 228B22 |
| Хаки | Forest Green | F0E68C |
| Бледно-золотистый | Pale Goldenrod | EEE8AA |
| Светло-желтый золотистый | Light Goldenrod Yellow | FAFAD2 |
| Светло-желтый | Light Yellow | FFFFE0 |
| Желтый | Yellow (*) | FFFF00 |
| Темно-желтый | Dark Yellow | 808000 |
| Золотой | Gold | FFD700 |
| Light Goldenrod | FFEC8B | |
| Золотистый | Goldenrod | DAA520 |
| Желтоватый | Burly Wood | DEB887 |
| Розово-коричневый | Rosy Brown | BC8F8F |
| Кожано-коричневый | Saddle Brown | 8B4513 |
| Охра | Sienna | A0522D |
| Бежевый | Beige | F5F5DC |
| Пшеничный | Wheat | F5DEB3 |
| Рыжевато-коричневый | Tan | D2B48C |
| Шоколадный | Chocolate | D2691E |
| Кирпичный | Firebrick | B22222 |
| Коричневый | Brown | A52A2A |
| Сомон | Salmon | FA8072 |
| Светлый сомон | Light Salmon | FFA07A |
| Оранжевый | Orange | FFA500 |
| Коралловый | Coral | FF7F50 |
| Коралловый светлый | Light Coral | F08080 |
| Оранжево-красный | Orange Red | FF4500 |
| Красный | Red (*) | FF0000 |
| Темно-красный | Dark Red | 800000 |
| Теплый розовый | Hot Pink | FF69B4 |
| Розовый | Pink | FFC0CB |
| Светло-розовый | Light Pink | FFB6C1 |
| Красно-фиолетовый бледный | Pale Violet Red | DB7093 |
| Темно-бордовый | Maroon (*) | B03060 |
| Красно-фиолетовый | Violet Red | D02090 |
| Фуксин | Magenta (*) | FF00FF |
| Фуксин темный | Dark Magenta | 800080 |
| Фиолетовый | Violet | EE82EE |
| Темно-фиолетовый | Plum | DDA0DD |
| Орсель | Orchid | DA70D6 |
| Фиолетово-синий | Blue Violet | 8A2BE2 |
| Пурпурный | Purple | A020F0 |
Палитра веб цветов -Будни программиста
Иногда все таки нужна такая вещь как цветовая палитра, и не важно что во многих программах она встроена. Иногда возникает необходимость и все тут… Ладно, не важно просто размещу у себя, может кому пригодится.
| Цвет | Код цвета | RGB |
| White | #FFFFFF | 255 255 255 |
| Snow | #FFFAFA | 255 250 250 |
| Whitesmoke | #F5F5F5 | 245 245 245 |
| Ghostwhite | #F8F8FF | 248 248 255 |
| Floralwhite | #FFFAF0 | 255 250 240 |
| Oldlace | #FDF5E6 | 253 245 230 |
| Seashell | #FFE5EE | 255 229 238 |
| Mistyrose | #FFE4E1 | 255 228 225 |
| Lavenderblush | #FFF0F5 | 255 240 245 |
| Linen | #FAF0F6 | 250 240 246 |
| Lavender | #E6E6FA | 230 230 250 |
| Aliceblue | #F0F8FF | 240 248 255 |
| Mintcream | #F5FFFA | 245 255 250 |
| Lightcyan | #E0FFFF | 224 255 255 |
| Azure | #F0FFFF | 240 255 255 |
| Honeydew | #F0FFF0 | 240 255 240 |
| Ivory | #FFFFF0 | 255 255 240 |
| Beige | #F5F5DC | 245 245 220 |
| Cornsilk | #FFF8DC | 255 248 220 |
| Antiquewhite | #FAEBD7 | 250 235 215 |
| Papayawhip | #FFEED5 | 255 239 213 |
| Blanchedalmond | #FFEBCD | 255 235 205 |
| Bisque | #FFE4C4 | 255 228 196 |
| Peachpuff | #FFDAB9 | 255 218 185 |
| Moccasin | #FFE4B5 | 225 228 181 |
| Navajowhite | #FFDEAD | 255 222 173 |
| Wheat | #F5DEB3 | 245 222 179 |
| Tan | #D2B48C | 210 180 140 |
| Lightyellow | #FFFFE0 | 255 255 224 |
| Lightgoldenrodyellow | #FAFAD2 | 250 250 210 |
| Lemonchiffon | #FFFACD | 255 250 205 |
| Yellow | #FFFF00 | 255 255 0 |
| Gold | #FFD700 | 255 215 0 |
| Goldenrod | #DAA520 | 218 165 32 |
| Darkgoldenrod | #B8860B | 184 134 11 |
| Sandybrown | #F4A460 | 244 164 96 |
| Orange | #FFA500 | 255 165 0 |
| Darkorange | #FF8C00 | 255 140 0 |
| Orangered | #FF4500 | 255 69 0 |
| Tomato | #FF6347 | 255 99 71 |
| Coral | #FF7F50 | 255 127 80 |
| Lightsalmon | #FFA07A | 255 160 122 |
| Salmon | #FA8072 | 250 128 114 |
| Darksalmon | #E9967A | 233 150 122 |
| Chocolate | #D2691E | 210 105 30 |
| Peru | #CD853F | 205 133 63 |
| Sienna | #A0522D | 160 82 45 |
| Brown | #A52A2A | 165 42 42 |
| Maroon | #800000 | 128 0 0 |
| Darkred | #8B0000 | 139 0 0 |
| Firebrick | #B22222 | 178 34 34 |
| Indianred | #CD5C5C | 205 92 92 |
| Lightcoral | #F08080 | 240 128 128 |
| Burlywood | #DE8887 | 222 136 135 |
| Crimson | #DC143C | 220 20 60 |
| Red | #FF0000 | 255 0 0 |
| Pink | #FFC0CB | 255 192 203 |
| Lightpink | #FFB6C1 | 255 182 193 |
| Hotpink | #FF69B4 | 255 105 180 |
| Deeppink | #FF1493 | 255 20147 79 |
| Palevioletred | #DB7093 | 219 112 147 |
| Rosybrown | #BC8F8F | 188 143 143 |
| Thistle | #D8BFD8 | 216 191 216 |
| Plum | #DDA0DD | 221 160 221 |
| Violet | #EE82EE | 238 130 238 |
| Fuchsia | #FF00FF | 255 0 255 |
| Mediumvioletred | #C71585 | 199 21 133 |
| Orchid | #DA70D6 | 218 112 214 |
| Mediumorchid | #BA55D3 | 186 85 211 |
| Darkorchid | #9932CC | 153 50 204 |
| Darkviolet | #9400D3 | 148 0 211 |
| Darkmagenta | #8B008B | 139 0 139 |
| Purple | #800080 | 128 00 128 |
| Indigo | #4B0082 | 75 0 130 |
| Blueviolet | #8A2BE2 | 138 43 226 |
| Slateblue | #6A5ACD | 106 90 205 |
| Mediumpurple | #9370DB | 147 112 219 |
| Mediumslateblue | #7B68EE | 123 104 238 |
| Cornflowerblue | #6495ED | 100 149 237 |
| Royalblue | #4169E1 | 65 105 225 |
| Darkslateblue | #483D8B | 72 61 139 |
| Midnightblue | #191970 | 25 25 112 |
| Navy | #000080 | 0 0 128 |
| Darkblue | #00008B | 0 0 139 |
| Mediumblue | #0000CD | 0 0 205 |
| Blue | #0000FF | 0 0 255 |
| Dodgerblue | #1E90FF | 30 144 255 |
| Deepskyblue | #00BFFF | 0 191 255 |
| Lightskyblue | #87CEFA | 135 206 250 |
| Skyblue | #87CEEB | 135 206 235 |
| Steelblue | #4682B4 | 70 130 180 |
| Lightsteelblue | #B0C4DE | 176 196 222 |
| Lightblue | #ADD8E6 | 173 216 230 |
| Powderblue | #B0E0E6 | 176 224 230 |
| Paleturquoise | #AFEEEE | 175 238 238 |
| Darkturquoise | #00CED1 | 0 206 209 |
| Mediumturquoise | #48D1CC | 72 209 204 |
| Turquoise | #40E0D0 | 64 224 208 |
| Aqua | #00FFFF | 0 255 255 |
| Aquamarine | #7FFFD4 | 127 255 212 |
| Mediumaquamarine | #66CDAA | 102 205 170 |
| Palegreen | #98FB98 | 152 251 152 |
| Lightgreen | #90EE90 | 144 238 144 |
| Greenyellow | #ADFF2F | 173 255 47 |
| Mediumspringgreen | #00FA9A | 0 250 154 |
| Springgreen | #00FF7F | 0 255 127 |
| Lime | #00FF00 | 0 255 0 |
| Limegreen | #32CD32 | 50 205 50 |
| Mediumseagreen | #3CB371 | 60 179 113 |
| Yellowgreen | #9ACD32 | 154 205 50 |
| Darkseagreen | #8FBC8F | 143 188 143 |
| Lightseagreen | #20B2AA | 32 178 170 |
| Cadetblue | #5F9EA0 | 95 158 160 |
| Darkcyan | #008B8B | 0 139 139 |
| Teal | #008080 | 0 128 128 |
| Darkslategray | #2F4F4F | 47 79 79 |
| Palegoldenrod | #EEE8AA | 238 232 170 |
| Khaki | #F0E68C | 240 230 140 |
| Darkkhaki | #BDB76D | 189 183 109 |
| Olive | #808000 | 128 128 0 |
| Darkolivegreen | #556B2F | 85 107 47 |
| Olivedrab | #6B8E233 | 107 142 35 |
| Forestgreen | #228B22 | 34 139 34 |
| Green | #008000 | 0 128 0 |
| Darkgreen | #006400 | 0 100 0 |
| Gainsboro | #DCDCDC | 220 220 220 |
| Lightslategray | #778899 | 119 136 153 |
| Slategray | #708090 | 112 128 144 |
| Seagreen | #2E2B57 | 43 46 87 |
| Silver | #C0C0C0 | 192 192 192 |
| Darkgray | #A9A9A9 | 169 169 169 |
| Gray | #808080 | 128 128 128 |
| Dimgray | #696969 | 105 105 105 |
| Black | #000000 | 0 0 0 |
| snow1 | #fffafa | 255 250 250 |
| snow2 | #eee9e9 | 238 233 233 |
| snow3 | #cdc9c9 | 205 201 201 |
| snow4 | #8b8989 | 139 137 137 |
| seashell1 | #fff5ee | 255 245 238 |
| seashell2 | #eee5de | 238 229 222 |
| seashell3 | #cdc5bf | 205 197 191 |
| seashell4 | #8b8682 | 139 134 130 |
| AntiqueWhite1 | #ffefdb | 255 239 219 |
| AntiqueWhite2 | #eedfcc | 238 223 204 |
| AntiqueWhite3 | #cdc0b0 | 205 192 176 |
| AntiqueWhite4 | #8b8378 | 139 131 120 |
| bisque1 | #ffe4c4 | 255 228 196 |
| bisque2 | #eed5b7 | 238 213 183 |
| bisque3 | #cdb79e | 205 183 158 |
| bisque4 | #8b7d6b | 139 125 107 |
| PeachPuff1 | #ffdab9 | 255 218 185 |
| PeachPuff2 | #eecbad | 238 203 173 |
| PeachPuff3 | #cdaf95 | 205 175 149 |
| PeachPuff4 | #8b7765 | 139 119 101 |
| NavajoWhite1 | #ffdead | 255 222 173 |
| NavajoWhite2 | #eecfa0 | 238 207 161 |
| NavajoWhite3 | #cdb38b | 205 179 139 |
| NavajoWhite4 | #8b795e | 139 121 94 |
| LemonChiffon1 | #fffacd | 255 250 205 |
| LemonChiffon2 | #eee9bf | 238 233 191 |
| LemonChiffon3 | #cdc9a5 | 205 201 165 |
| LemonChiffon4 | #8b8970 | 139 137 112 |
| cornsilk1 | #fff8dc | 255 248 220 |
| cornsilk2 | #eee8cd | 238 232 205 |
| cornsilk3 | #cdc8b1 | 205 200 177 |
| cornsilk4 | #8b8878 | 139 136 120 |
| ivory1 | #fffff0 | 255 255 240 |
| ivory2 | #eeeee0 | 238 238 224 |
| ivory3 | #cdcdc1 | 205 205 193 |
| ivory4 | #8b8b83 | 139 139 131 |
| honeydew1 | #f0fff0 | 240 255 240 |
| honeydew2 | #e0eee0 | 224 238 224 |
| honeydew3 | #c1cdc1 | 193 205 193 |
| honeydew4 | #838b83 | 131 139 131 |
| LavenderBlush2 | #fff0f5 | 255 240 245 |
| LavenderBlush3 | #eee0e5 | 238 224 229 |
| LavenderBlush4 | #cdc1c5 | 205 193 197 |
| LavenderBlush5 | #8b8386 | 139 131 134 |
| MistyRose1 | #ffe4e1 | 255 228 225 |
| MistyRose2 | #eed5d2 | 238 213 210 |
| MistyRose3 | #cdb7b5 | 205 183 181 |
| MistyRose4 | #8b7d7b | 139 125 123 |
| azure1 | #f0ffff | 240 255 255 |
| azure2 | #e0eeee | 224 238 238 |
| azure3 | #c1cdcd | 193 205 205 |
| azure4 | #838b8b | 131 139 139 |
| SlateBlue1 | #836fff | 131 111 255 |
| SlateBlue2 | #7a67ee | 122 103 238 |
| SlateBlue3 | #6959cd | 105 89 205 |
| SlateBlue4 | #473c8b | 71 60 139 |
| RoyalBlue1 | #4876ff | 72 118 255 |
| RoyalBlue2 | #436eee | 67 110 238 |
| RoyalBlue3 | #3a5fcd | 58 95 205 |
| RoyalBlue4 | #27408b | 39 64 139 |
| blue1 | #0000ff | 0 0 255 |
| blue2 | #0000ee | 0 0 238 |
| blue3 | #0000cd | 0 0 205 |
| blue4 | #00008b | 0 0 139 |
| DodgerBlue1 | #1e90ff | 30 144 255 |
| DodgerBlue2 | #1c86ee | 28 134 238 |
| DodgerBlue3 | #1874cd | 24 116 205 |
| DodgerBlue4 | #104e8b | 16 78 139 |
| SteelBlue1 | #63b8ff | 99 184 255 |
| SteelBlue2 | #5cacee | 92 172 238 |
| SteelBlue3 | #4f94cd | 79 148 205 |
| SteelBlue4 | #36648b | 54 100 139 |
| DeepSkyBlue1 | #00bfff | 0 191 255 |
| DeepSkyBlue2 | #00b2ee | 0 178 238 |
| DeepSkyBlue3 | #009acd | 0 154 205 |
| DeepSkyBlue4 | #00688b | 0 104 139 |
| SkyBlue1 | #87ceff | 135 206 255 |
| SkyBlue2 | #7ec0ee | 126 192 238 |
| SkyBlue3 | #6ca6cd | 108 166 205 |
| SkyBlue4 | #4a708b | 74 112 139 |
| LightSkyBlue1 | #b0e2ff | 176 226 255 |
| LightSkyBlue2 | #a4d3ee | 164 211 238 |
| LightSkyBlue3 | #8db6cd | 141 182 205 |
| LightSkyBlue4 | #607b8b | 96 123 139 |
| SlateGray1 | #c6e2ff | 198 226 255 |
| SlateGray2 | #b9d3ee | 185 211 238 |
| SlateGray3 | #9fb6cd | 159 182 205 |
| SlateGray4 | #6c7b8b | 108 123 139 |
| LightSteelBlue1 | #cae1ff | 202 225 255 |
| LightSteelBlue2 | #bcd2ee | 188 210 238 |
| LightSteelBlue3 | #a2b5cd | 162 181 205 |
| LightSteelBlue4 | #6e7b8b | 110 123 139 |
| LightBlue1 | #bfefff | 191 239 255 |
| LightBlue2 | #b2dfee | 178 223 238 |
| LightBlue3 | #9ac0cd | 154 192 205 |
| LightBlue4 | #68838b | 104 131 139 |
| LightCyan1 | #e0ffff | 224 255 255 |
| LightCyan2 | #d1eeee | 209 238 238 |
| LightCyan3 | #b4cdcd | 180 205 205 |
| LightCyan4 | #7a8b8b | 122 139 139 |
| PaleTurquoise1 | #bbffff | 187 255 255 |
| PaleTurquoise2 | #aeeeee | 174 238 238 |
| PaleTurquoise3 | #96cdcd | 150 205 205 |
| PaleTurquoise4 | #668b8b | 102 139 139 |
| CadetBlue1 | #98f5ff | 152 245 255 |
| CadetBlue2 | #8ee5ee | 142 229 238 |
| CadetBlue3 | #7ac5cd | 122 197 205 |
| CadetBlue4 | #53868b | 83 134 139 |
| turquoise1 | #00f5ff | 0 245 255 |
| turquoise2 | #00e5ee | 0 229 238 |
| turquoise3 | #00c5cd | 0 197 205 |
| turquoise4 | #00868b | 0 134 139 |
| cyan1 | #00ffff | 0 255 255 |
| cyan2 | #00eeee | 0 238 238 |
| cyan3 | #00cdcd | 0 205 205 |
| cyan4 | #008b8b | 0 139 139 |
| DarkSlateGray1 | #97ffff | 151 255 255 |
| DarkSlateGray2 | #8deeee | 141 238 238 |
| DarkSlateGray3 | #79cdcd | 121 205 205 |
| DarkSlateGray4 | #528b8b | 82 139 139 |
| aquamarine1 | #7fffd4 | 127 255 212 |
| aquamarine2 | #76eec6 | 118 238 198 |
| aquamarine3 | #66cdaa | 102 205 170 |
| aquamarine4 | #458b74 | 69 139 116 |
| DarkSeaGreen1 | #c1ffc1 | 193 255 193 |
| DarkSeaGreen2 | #b4eeb4 | 180 238 180 |
| DarkSeaGreen3 | #9bcd9b | 155 205 155 |
| DarkSeaGreen4 | #698b69 | 105 139 105 |
| SeaGreen1 | #54ff9f | 84 255 159 |
| SeaGreen2 | #4eee94 | 78 238 148 |
| SeaGreen3 | #43cd80 | 67 205 128 |
| SeaGreen4 | #2e8b57 | 46 139 87 |
| PaleGreen1 | #9aff9a | 154 255 154 |
| PaleGreen2 | #90ee90 | 144 238 144 |
| PaleGreen3 | #7ccd7c | 124 205 124 |
| PaleGreen4 | #548b54 | 84 139 84 |
| SpringGreen1 | #00ff7f | 0 255 127 |
| SpringGreen2 | #00ee76 | 0 238 118 |
| SpringGreen3 | #00cd66 | 0 205 102 |
| SpringGreen4 | #008b45 | 0 139 69 |
| green1 | #00ff00 | 0 255 0 |
| green2 | #00ee00 | 0 238 0 |
| green3 | #00cd00 | 0 205 0 |
| green4 | #008b00 | 0 139 0 |
| chartreuse1 | #7fff00 | 127 255 0 |
| chartreuse2 | #76ee00 | 118 238 0 |
| chartreuse3 | #66cd00 | 102 205 0 |
| chartreuse4 | #458b00 | 69 139 0 |
| OliveDrab1 | #c0ff3e | 192 255 62 |
| OliveDrab2 | #b3ee3a | 179 238 58 |
| OliveDrab3 | #9acd32 | 154 205 50 |
| OliveDrab4 | #698b22 | 105 139 34 |
| DarkOliveGreen1 | #caff70 | 202 255 112 |
| DarkOliveGreen2 | #bcee68 | 188 238 104 |
| DarkOliveGreen3 | #a2cd5a | 162 205 90 |
| DarkOliveGreen4 | #6e8b3d | 110 139 61 |
| khaki1 | #fff68f | 255 246 143 |
| khaki2 | #eee685 | 238 230 133 |
| khaki3 | #cdc673 | 205 198 115 |
| khaki4 | #8b864e | 139 134 78 |
| LightGoldenrod1 | #ffec8b | 255 236 139 |
| LightGoldenrod2 | #eedc82 | 238 220 130 |
| LightGoldenrod3 | #cdbe70 | 205 190 112 |
| LightGoldenrod4 | #8b814c | 139 129 76 |
| LightYellow1 | #ffffe0 | 255 255 224 |
| LightYellow2 | #eeeed1 | 238 238 209 |
| LightYellow3 | #cdcdb4 | 205 205 180 |
| LightYellow4 | #8b8b7a | 139 139 122 |
| yellow1 | #ffff00 | 255 255 0 |
| yellow2 | #eeee00 | 238 238 0 |
| yellow3 | #cdcd00 | 205 205 0 |
| yellow4 | #8b8b00 | 139 139 0 |
| gold1 | #ffd700 | 255 215 0 |
| gold2 | #eec900 | 238 201 0 |
| gold3 | #cdad00 | 205 173 0 |
| gold4 | #8b7500 | 139 117 0 |
| goldenrod1 | #ffc125 | 255 193 37 |
| goldenrod2 | #eeb422 | 238 180 34 |
| goldenrod3 | #cd9b1d | 205 155 29 |
| goldenrod4 | #8b6914 | 139 105 20 |
| DarkGoldenrod1 | #ffb90f | 255 185 15 |
| DarkGoldenrod2 | #eead0e | 238 173 14 |
| DarkGoldenrod3 | #cd950c | 205 149 12 |
| DarkGoldenrod4 | #8b6508 | 139 101 8 |
| RosyBrown1 | #ffc1c1 | 255 193 193 |
| RosyBrown2 | #eeb4b4 | 238 180 180 |
| RosyBrown3 | #cd9b9b | 205 155 155 |
| RosyBrown4 | #8b6969 | 139 105 105 |
| IndianRed1 | #ff6a6a | 255 106 106 |
| IndianRed2 | #ee6363 | 238 99 99 |
| IndianRed3 | #cd5555 | 205 85 85 |
| IndianRed4 | #8b3a3a | 139 58 58 |
| sienna1 | #ff8247 | 255 130 71 |
| sienna2 | #ee7942 | 238 121 66 |
| sienna3 | #cd6839 | 205 104 57 |
| sienna4 | #8b4726 | 139 71 38 |
| burlywood1 | #ffd39b | 255 211 155 |
| burlywood2 | #eec591 | 238 197 145 |
| burlywood3 | #cdaa7d | 205 170 125 |
| burlywood4 | #8b7355 | 139 115 85 |
| wheat1 | #ffe7ba | 255 231 186 |
| wheat2 | #eed8ae | 238 216 174 |
| wheat3 | #cdba96 | 205 186 150 |
| wheat4 | #8b7e66 | 139 126 102 |
| tan1 | #ffa54f | 255 165 79 |
| tan2 | #ee9a49 | 238 154 73 |
| tan3 | #cd853f | 205 133 63 |
| tan4 | #8b5a2b | 139 90 43 |
| chocolate1 | #ff7f24 | 255 127 36 |
| chocolate2 | #ee7621 | 238 118 33 |
| chocolate3 | #cd661d | 205 102 29 |
| chocolate4 | #8b4513 | 139 69 19 |
| firebrick1 | #ff3030 | 255 48 48 |
| firebrick2 | #ee2c2c | 238 44 44 |
| firebrick3 | #cd2626 | 205 38 38 |
| firebrick4 | #8b1a1a | 139 26 26 |
| brown1 | #ff4040 | 255 64 64 |
| brown2 | #ee3b3b | 238 59 59 |
| brown3 | #cd3333 | 205 51 51 |
| brown4 | #8b2323 | 139 35 35 |
| salmon1 | #ff8c69 | 255 140 105 |
| salmon2 | #ee8262 | 238 130 98 |
| salmon3 | #cd7054 | 205 112 84 |
| salmon4 | #8b4c39 | 139 76 57 |
| LightSalmon1 | #ffa07a | 255 160 12 |
| LightSalmon2 | #ee9572 | 238 149 114 |
| LightSalmon3 | #cd8162 | 205 129 98 |
| LightSalmon4 | #8b5742 | 139 87 66 |
| orange1 | #ffa500 | 255 165 0 |
| orange2 | #ee9a00 | 238 154 0 |
| orange3 | #cd8500 | 205 133 0 |
| orange4 | #8b5a00 | 139 90 0 |
| DarkOrange1 | #ff7f00 | 255 127 0 |
| DarkOrange2 | #ee7600 | 238 118 0 |
| DarkOrange3 | #cd6600 | 205 102 0 |
| DarkOrange4 | #8b4500 | 139 69 0 |
| coral1 | #ff7256 | 255 114 86 |
| coral2 | #ee6a50 | 238 106 80 |
| coral3 | #cd5b45 | 205 91 69 |
| coral4 | #8b3e2f | 139 62 47 |
| tomato1 | #ff6347 | 255 99 71 |
| tomato2 | #ee5c42 | 238 92 66 |
| tomato3 | #cd4f39 | 205 79 57 |
| tomato4 | #8b3626 | 139 54 38 |
| OrangeRed1 | #ff4500 | 255 69 0 |
| OrangeRed2 | #ee4000 | 238 64 0 |
| OrangeRed3 | #cd3700 | 205 55 0 |
| OrangeRed4 | #8b2500 | 139 37 0 |
| red1 | #ff0000 | 255 0 0 |
| red2 | #ee0000 | 238 0 0 |
| red3 | #cd0000 | 205 0 0 |
| red4 | #8b0000 | 139 0 0 |
| DeepPink1 | #ff1493 | 255 20 147 |
| DeepPink2 | #ee1289 | 238 18 137 |
| DeepPink3 | #cd1076 | 205 16 118 |
| DeepPink4 | #8b0a50 | 139 10 80 |
| HotPink1 | #ff6eb4 | 255 110 180 |
| HotPink2 | #ee6aa7 | 238 106 167 |
| HotPink3 | #cd6090 | 205 96 144 |
| HotPink4 | #8b3a62 | 139 58 98 |
| pink1 | #ffb5c5 | 255 181 197 |
| pink2 | #eea9b8 | 238 169 184 |
| pink3 | #cd919e | 205 145 158 |
| pink4 | #8b636c | 139 99 108 |
| LightPink1 | #ffaeb9 | 255 174 185 |
| LightPink2 | #eea2ad | 238 162 173 |
| LightPink3 | #cd8c95 | 205 140 149 |
| LightPink4 | #8b5f65 | 139 95 101 |
| PaleVioletRed1 | #ff82ab | 255 130 171 |
| PaleVioletRed2 | #ee799f | 238 121 159 |
| PaleVioletRed3 | #cd6889 | 205 104 137 |
| PaleVioletRed4 | #8b475d | 139 71 93 |
| maroon1 | #ff34b3 | 255 52 179 |
| maroon2 | #ee30a7 | 238 48 167 |
| maroon3 | #cd2990 | 205 41 144 |
| maroon4 | #8b1c62 | 139 28 98 |
| VioletRed1 | #ff3e96 | 255 62 150 |
| VioletRed2 | #ee3a8c | 238 58 140 |
| VioletRed3 | #cd3278 | 205 50 120 |
| VioletRed4 | #8b2252 | 139 34 82 |
| magenta1 | #ff00ff | 255 0 255 |
| magenta2 | #ee00ee | 238 0 238 |
| magenta3 | #cd00cd | 205 0 205 |
| magenta4 | #8b008b | 139 0 139 |
| orchid1 | #ff83fa | 255 131 250 |
| orchid2 | #ee7ae9 | 238 122 233 |
| orchid3 | #cd69c9 | 205 105 201 |
| orchid4 | #8b4789 | 139 71 137 |
| plum1 | #ffbbff | 255 187 255 |
| plum2 | #eeaeee | 238 174 238 |
| plum3 | #cd96cd | 205 150 205 |
| plum4 | #8b668b | 139 102 139 |
| MediumOrchid1 | #e066ff | 224 102 255 |
| MediumOrchid2 | #d15fee | 209 95 238 |
| MediumOrchid3 | #b452cd | 180 82 205 |
| MediumOrchid4 | #7a378b | 122 55 139 |
| DarkOrchid1 | #bf3eff | 191 62 255 |
| DarkOrchid2 | #b23aee | 178 58 238 |
| DarkOrchid3 | #9a32cd | 154 50 205 |
| DarkOrchid4 | #68228b | 104 34 139 |
| purple1 | #9b30ff | 155 48 255 |
| purple2 | #912cee | 145 44 238 |
| purple3 | #7d26cd | 125 38 205 |
| purple4 | #551a8b | 85 26 139 |
| MediumPurple1 | #ab82ff | 171 130 255 |
| MediumPurple2 | #9f79ee | 159 121 238 |
| MediumPurple3 | #8968cd | 137 104 205 |
| MediumPurple4 | #5d478b | 93 71 139 |
| thistle1 | #ffe1ff | 255 225 255 |
| thistle2 | #eed2ee | 238 210 238 |
| thistle3 | #cdb5cd | 205 181 205 |
| thistle4 | #8b7b8b | 139 123 139 |
Теория цвета в цифрах / Habr
Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.Основы
Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.
Насыщенность цвета зависит от того, насколько разные в парах числа. Чем больше значение пар, тем светлее цвет. Вторая цифра каждой пары уточняет оттенок:
То есть величина чисел в парах означает количество цвета, проще говоря, если все числа максимальные, то в результате будет белый цвет — #FFFFFF, если числа минимальные, нули, то цвета нет, получается черный — #000000. Если изменять каждую пару, то получается: #FF0000 — самый яркий красный, #00FF00 — самый яркий зеленый и #0000FF — самый яркий синий. Соответственно, #00FFFF — самый яркий голубой, #FF00FF — самый яркий пурпурный и #FFFF00 — самый яркий желтый.
Распознавание цвета
Шестнадцатеричный код может быть сокращен с шести символов до трех. Например цвет #FAE означает #FFAAEE. Такая возможность иногда помогает упростить код, и что важнее, легко сократить количество оттенков, если это требуется.
В большинстве случаев распознать цвет по hex-коду можно, учитывая только первые цифры пар. В примере ниже понятно, что цвет смешан из большого количества красного, немного синего, а зеленого совсем нет.
Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы, кроме того, можно всегда произвести впечатление на коллег или клиентов, сказав «Ах, какой прекрасный оттенок бордового».
Можно также легко менять яркость, оттенок или насыщенность цвета, отредактировав лишь его шестнадцатеричный код. В первом примере ниже одна из пар меняется с шагом в 10%, при этом растет яркость цвета. Во втором примере яркость растет, но насыщенность падает:
Подчеркивание ссылок
По умолчанию браузеры подчеркивают гиперссылки на веб-страницах. При использовании не слишком крупных шрифтов подчеркивание может смешиваться с буквами ссылки, и выглядит такая конструкция не очень. Но можно сделать подчеркивание менее насыщенным:
- Для темного текста на светлом фоне делаем ссылки ярче.
- Для яркого текста на темном фоне делаем ссылки темнее.
Чтобы это работало, необходимо использовать тег span внутри каждого тега a, например:
a { text-decoration:underline;color:#aaaaff; }
a span { text-decoration:none;color:#0000ff; }
Получившиеся ссылки легче читаются, т.к. подчеркивание не смешивается с символами. Однако добавлять span в каждую ссылку не очень рационально. Поэтому можно убрать подчеркивание ссылок, но при этом добавить border-bottom:
a { text-decoration: none; border-bottom: 1px solid #aaaaff; }
Цвета контента
Зачастую на сайтах используется один и тот же цвет для заголовков и основного текста. Но при таком подходе снижается читабельность контента: чем мельче шрифт, тем контрастнее он должен быть. Пример:
h2, p { color: #797979; }
Уменьшение первых цифр в парах hex-кода повысит контрастность текста, а значит читабельность улучшится:
h2 { color: #797979; }
p { color: #393939; }
Редактирование фона
Легко управлять фоном, изменяя hex-код цвета:
- #404040 — нейтральный
- #504030 — теплее
- #304050 — холоднее
Фон страницы визуально более чувствителен к изменениям цвета, чем контент. Поэтому можно легко сделать его теплее или холоднее, корректируя и вторую цифру в парах hex-кода. Например:
- #404040 — нейтральный
- #594039 — теплее
- #394059 — холоднее
Подбор и комбинирование цветов
Понимание структуры шестнадцатеричного кода цветов дает дизайнеру возможность точно подбирать комбинации цветов и выбирать цветовые схемы. Самая простая техника — это переставлять одну пару в разные места кода. Еще один способ — удвоение первой цифры в первой паре и разделение на два остальных первых цифр. Также можно комбинировать цвета, взятые из фото. Описанные способы наглядно продемонстрированы на рисунке ниже:
Использованный материал и полезное чтиво
Справочно: спецсимволы HTMLТаблица цветов HTML . Таблица цветов CSS. HTML safe Color Codes. «Безопасные» цвета HTML. Палитра цветов HTML.Сперва брузеры не поддерживали никаких цветов, кроме 256 «безопсных»:
|
Таблица html цветов. Названия и коды цветов в RGB. Палитра цветов : WEBCodius
В языках html и css, для того чтобы страницы не были серыми и однотипными, имеется возможность цветового оформления документов. Для этого обычно используют модель RGB — аббревиатура от трех английских слов — названий цветов: red (красный), green (зеленый) и blue (синий).
В html и css для обозначения цвета используются ключевые слова — названия цвета, либо шестнадцатеричный цветовой код.
Формат цветового кода html представляет из себя символ «#» и набор из шести цифр и латинских букв от A до F . Это так называемый шестнадцатеричный код, в котором, например, буква «A» соответствует десятеричному числу 10, а комбинация «FF» — десятеричному 255.
Каждый символ в шестнадцатеричном коде имеет определенное значение. Так первые два символа в коде цвета HTML обозначают насыщенность красного цвета (00 — минимальная насыщенность; FF — максимальная насыщенность). Третий и четвертый символ определяют насыщенность зеленого цвета, а пятый и шестой синего. Например, код красного цвета #FF0000, зеленого соответственно #00FF00.
Далее представлены таблицы ключевых слов — названий цветов и их шестнадцатеричных значений, которые можно использовать при разработке сайтов на языках html и css.
Таблица базовых названий цветов
| Название цвета | HEX | Цвет |
|---|---|---|
| Black | #000000 | |
| silver | #C0C0C0 | |
| gray | #808080 | |
| white | #FFFFFF | |
| maroon | #800000 | |
| red | #FF0000 | |
| purple | #800080 | |
| fuchsia | #FF00FF | |
| green | #008000 | |
| lime | #00FF00 | |
| olive | #808000 | |
| yellow | #FFFF00 | |
| navy | #000080 | |
| blue | #0000FF | |
| teal | #008080 | |
| aqua | #00FFFF |
Расширенная таблица названий цветов
| Название цвета | HEX | Цвет |
|---|---|---|
| Black | #000000 | |
| Navy | #000080 | |
| DarkBlue | #00008B | |
| MediumBlue | #0000CD | |
| Blue | #0000FF | |
| DarkGreen | #006400 | |
| Green | #008000 | |
| Teal | #008080 | |
| DarkCyan | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| DarkTurquoise | #00CED1 | |
| MediumSpringGreen | #00FA9A | |
| Lime | #00FF00 | |
| SpringGreen | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| MidnightBlue | #191970 | |
| DodgerBlue | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| ForestGreen | #228B22 | |
| SeaGreen | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| LimeGreen | #32CD32 | |
| MediumSeaGreen | #3CB371 | |
| Turquoise | #40E0D0 | |
| RoyalBlue | #4169E1 | |
| SteelBlue | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| MediumTurquoise | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| CadetBlue | #5F9EA0 | |
| CornflowerBlue | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #696969 | |
| SlateBlue | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| SlateGray | #708090 | |
| LightSlateGray | #778899 | |
| MediumSlateBlue | #7B68EE | |
| LawnGreen | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Aquamarine | #7FFFD4 | |
| Maroon | #800000 | |
| Purple | #800080 | |
| Olive | #808000 | |
| Gray | #808080 | |
| SkyBlue | #87CEEB | |
| LightSkyBlue | #87CEFA | |
| BlueViolet | #8A2BE2 | |
| DarkRed | #8B0000 | |
| DarkMagenta | #8B008B | |
| SaddleBrown | #8B4513 | |
| DarkSeaGreen | #8FBC8F | |
| LightGreen | #90EE90 | |
| MediumPurple | #9370D8 | |
| DarkViolet | #9400D3 | |
| PaleGreen | #98FB98 | |
| DarkOrchid | #9932CC | |
| YellowGreen | #9ACD32 | |
| Sienna | #A0522D | |
| Brown | #A52A2A | |
| DarkGray | #A9A9A9 | |
| LightBlue | #ADD8E6 | |
| GreenYellow | #ADFF2F | |
| PaleTurquoise | #AFEEEE | |
| LightSteelBlue | #B0C4DE | |
| PowderBlue | #B0E0E6 | |
| FireBrick | #B22222 | |
| DarkGoldenRod | #B8860B | |
| MediumOrchid | #BA55D3 | |
| RosyBrown | #BC8F8F | |
| DarkKhaki | #BDB76B | |
| Silver | #C0C0C0 | |
| MediumVioletRed | #C71585 | |
| IndianRed | #CD5C5C | |
| Peru | #CD853F | |
| Chocolate | #D2691E | |
| Tan | #D2B48C | |
| LightGray | #D3D3D3 | |
| PaleVioletRed | #D87093 | |
| Thistle | #D8BFD8 | |
| Orchid | #DA70D6 | |
| GoldenRod | #DAA520 | |
| Crimson | #DC143C | |
| Gainsboro | #DCDCDC | |
| Plum | #DDA0DD | |
| BurlyWood | #DEB887 | |
| LightCyan | #E0FFFF | |
| Lavender | #E6E6FA | |
| DarkSalmon | #E9967A | |
| Violet | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| LightCoral | #F08080 | |
| Khaki | #F0E68C | |
| AliceBlue | #F0F8FF | |
| HoneyDew | #F0FFF0 | |
| Azure | #F0FFFF | |
| SandyBrown | #F4A460 | |
| Wheat | #F5DEB3 | |
| Beige | #F5F5DC | |
| WhiteSmoke | #F5F5F5 | |
| MintCream | #F5FFFA | |
| GhostWhite | #F8F8FF | |
| Salmon | #FA8072 | |
| AntiqueWhite | #FAEBD7 | |
| Linen | #FAF0E6 | |
| LightGoldenRodYellow | #FAFAD2 | |
| OldLace | #FDF5E6 | |
| Red | #FF0000 | |
| Fuchsia | #FF00FF | |
| Magenta | #FF00FF | |
| DeepPink | #FF1493 | |
| OrangeRed | #FF4500 | |
| Tomato | #FF6347 | |
| HotPink | #FF69B4 | |
| Coral | #FF7F50 | |
| Darkorange | #FF8C00 | |
| LightSalmon | #FFA07A | |
| Orange | #FFA500 | |
| LightPink | #FFB6C1 | |
| Pink | #FFC0CB | |
| Gold | #FFD700 | |
| PeachPuff | #FFDAB9 | |
| NavajoWhite | #FFDEAD | |
| Moccasin | #FFE4B5 | |
| Bisque | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| BlanchedAlmond | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| LavenderBlush | #FFF0F5 | |
| SeaShell | #FFF5EE | |
| Cornsilk | #FFF8DC | |
| LemonChiffon | #FFFACD | |
| FloralWhite | #FFFAF0 | |
| Snow | #FFFAFA | |
| Yellow | #FFFF00 | |
| LightYellow | #FFFFE0 | |
| Ivory | #FFFFF0 | |
| White | #FFFFFF |
Использование цветовых кодов HTML
При помощи цветовых html кодов и соответствующих css свойств можно задавать цвет фона для элементов веб страницы или цвет текста.
Например, используя css свойство background и любой из цветовых кодов можно задать цвет фона страницы:
<body>
А с помощью свойства color можно управлять цветом текста любого html элемента:
<p>
На этом все! До новых встреч!
Loading…как цвет помогает в работе с кодом / Habr
Как программист, работающий с разными языками и на разных платформах, я столкнулась в определенный момент времени с одной неожиданной проблемой: для проведения ревью или же написания собственного кода, приходилось тратить достаточно много времени на переключение между IDE и языками. Возникла потребность в каком нибудь инструменте, который помог бы мне делать это эффективнее и без потери концентрации. И внезапно мне на помощь пришел цвет. И я хочу поделиться этим маленьким лайфхаком.Во всех IDE есть такая замечательная функция, как подсветка синтаксиса. Все бы хорошо, но везде она разная и даже внутри одной среды разработки может отличаться для разных языков. Но главное то, что подсветка не помогает достаточно часто (лично мне) различать структурные компоненты, такие как методы, переменные, классы, структуры… Они, как правило, отрисовываются одним цветом и я решила подобрать свою цветовую схему, которая бы выполняла функцию дифференциации не только синтаксических элементов (как то ключевые слова), но и семантических (классы, структуры, методы и функции).Пример цветовой схемы Darkula в Android StudioПодсвечены в принципе только ключевые слова и константы
Начало концепции положила цветовая схема Ciapre для Xcode. Она изначально (да и стоит признать, сама IDE) предоставляет такое семантическое деление именно цветом. Flat цвета не режут глаза и достаточно сильно отличаются для разных типов семантических элементов.
В результате получилось примерно следующее разделение:
- Ключевые слова — красный
- Reference Types (классы) — желтый
- Интерфейсы — оранжевый
- Value Types — фиолетовый
- Константные значения — тоже фиолетовый, но поярче
- Методы и функции — синий (внешние, из пакетов/модулей — чуть ярче)
- Поля и свойства типов — зеленый
После переноса в разные IDE получилось примерно следующее (да-да, я знаю первую реакцию — «что за кислятина» 🙂 ):
- Swift (Xcode)
В Xcode проблемы с интерфейсами (в плане разделения от классов), они считаются за reference type и тоже отображаются желтым. - Kotlin (Android Studio) (можно сравнить с примером выше — darkula)
В котлине существуют разного рода квалифаеры и метки, для них тоже есть отдельный цвет - Java (Android Studio)
- C# (Visual Studio)
В шарпе есть неймспейсы, для них — отдельный цвет. Ну а еще студия огорчает тем, что нет четкого семантического разделения в настройках (поле класса, метод и т.п.). В этом мне помогает ReSharper.
Из дополнительных бонусов — зрение позволяет сразу находить странности уже на уровне цветового восприятия даже не прочитав текст. Если я знаю, что должен быть интерфейс, то я увижу, что не хватает оранжевого цвета там, где я это ожидаю (например, может быть написан тип, соответствующий интерфейсу и все вроде как валидно, но нет).
Собственно и все 🙂
Для желающих прикладываю цветовые схемыХорошего и красивого кода всем!
Алгоритм генерирования цветовых палитр / Mail.ru Group corporate blog / Habr
Ищете красивую цветовую палитру для сайта? Недавно установили дома RGB-подсветку, или хотите покрасить комнату в новые цвета? Или купили клавиатуру с цветной подсветкой и хотите использовать её по полной? В какой бы ситуации вы ни оказались, наверняка постоянно настраиваете цветовые схемы.
Будучи программистом, я быстро написал несколько строк кода для генерирования случайных цветовых палитр. Сразу почуяв, что такой подход может дать не лучшие результаты, я за пару минут реализовал кнопку «перезагрузки» палитры. Мне представлялось, что для получения прекрасной схемы просто нужно немного удачи и терпения.
Я ошибался. Генерирование палитр из случайных цветов — отстой. Время от времени красивый цвет соседствует с уродливым, грязным оттенком коричневого или жёлтого. Подборки цветов получаются всегда либо слишком тёмные, либо слишком светлые и малоконтрастные, либо наборы состоят из очень похожих цветов. Нужно было придумать другое решение.
Цветовые пространства
Начнём с теории. Сегодня для классификации цветов широко используются такие цветовые пространства:
sRGB
RGB означает
Red Green Blue. Так работают дисплеи: они излучают свет в трёх цветовых каналах, которые смешиваются в разной пропорции для получения всевозможных цветов. Значение в каждом канале варьируется от 0 до 255. R:0, G:0, B:0 (или #000000 в шестнадцатеричном выражении) — это чёрный цвет, а R:255, G:255, B:255 (или #ffffff) — белый.CIE Lab
Цветовое пространство CIE Lab шире sRGB и включает в себя все цвета, воспринимаемые человеком. Оно создавалось с расчётом на универсальность восприятия. Иными словами, расстояние между цветами соответствует субъективной разнице: если значения двух цветов близки друг к другу, то и выглядят они похоже. С другой стороны, два далеко расположенных друг от друга цвета также воспринимаются как совсем непохожие. В CIE Lab для насыщенных цветов выделено больше места, чем для тёмных и светлых. К слову, для человеческого глаза очень тёмный зелёный почти неотличим от чёрного. Кроме того, это цветовое пространство трёхмерное:
L означает светлоту (от 0.0 до 1.0), a и b (примерно от -1.0 до 1.0) — цветовые каналы.HCL
Если RGB описывает, как дисплей отображает цвета, а CIE Lab — как мы их воспринимаем, то HCL — это цветовое пространство, которое ближе всего описывает то, как мы думаем о цветах. Оно тоже трёхмерное,
H означает цветовой тон (hue) (от 0 до 360 градусов), С — насыщенность (chroma) и L — яркость (luminance) (оба параметра измеряются от 0,0 до 1,0).Для вычислений рекомендую использовать CIE Lab, а для представления палитр пользователю — HCL. При желании можно преобразовать значения из этих пространств в RGB.
Разложение цветового пространства
Поскольку мне нужно было получить набор уникальных, индивидуальных цветов, сначала отбросим те, что выглядят очень похожими. Цветовое пространство будет трёхмерным, и для разделения таких низкоразмерных наборов данных прекрасно подходит алгоритм кластеризации методом k-средних. Он пытается разложить данные (в нашем случае — цветовое пространство) на k отдельных областей. И затем палитра собирается из центральных точек кластеров в этих областях. На гифке показано двумерное отображение работы алгоритма в трёхмерном пространстве CIE Lab.
Пишем код
С помощью реализованного на Go алгоритма метода k-средних задача решается всего в несколько строк кода. Сначала подготовим значения цветов в пространстве CIE Lab:
var d clusters.Observations
for l := 0.2; l <= 0.8; l += 0.05 {
for a := -1.0; a < 1.0; a += 0.1 {
for b := -1.0; b < 1.0; b += 0.1 {
d = append(d, clusters.Coordinates{l, a, b})
}
}
}Я уже подобрал пару параметров и ввёл определённые ограничения для генерируемых цветов. В этом примере мы выкинем цвета слишком тёмные (яркость 0,8).
Разложим только что созданное цветовое пространство:
km := kmeans.New()
clusters, _ := km.Partition(d, 8)Функция
Partition возвратит кусочки восьми кластеров. У каждого кластера есть точка Center, представляющая собой отдельный цвет в заданном пространстве. Её координаты легко можно преобразовать в шестнадцатеричное RGB-значение:col := colorful.Lab(c.Center[0], c.Center[1], c.Center[2])
col.Clamped().Hex()Помните, что CIE Lab шире RGB, и значит некоторые Lab-значения нельзя преобразовать в RGB. Такие значения можно с помощью
Clamped преобразовать в наиболее близкие цвета RGB-пространства.Полный код
package main
import (
"github.com/muesli/kmeans"
"github.com/muesli/clusters"
colorful "github.com/lucasb-eyer/go-colorful"
)
func main() {
// Create data points in the CIE L*a*b* color space
// l for lightness, a & b for color channels
var d clusters.Observations
for l := 0.2; l <= 0.8; l += 0.05 {
for a := -1.0; a <= 1.0; a += 0.1 {
for b := -1.0; b <= 1.0; b += 0.1 {
d = append(d, clusters.Coordinates{l, a, b})
}
}
}
// Partition the color space into 8 clusters
km := kmeans.New()
clusters, _ := km.Partition(d, 8)
for _, c := range clusters {
col := colorful.Lab(c.Center[0], c.Center[1], c.Center[2])
fmt.Println("Color as Hex:", col.Clamped().Hex())
}
}Набор из восьми (не очень) случайных цветов, сгенерированный этим кодом:
Определяем собственное цветовое пространство
Добавим больше контроля над генерированием цветов. Мы легко можем управлять данными, используемыми для дальнейших вычислений, тем самым подбирая цветовое пространство под свои нужды. Сгенерируем пастельную палитру:
func pastel(c colorful.Color) bool {
_, s, v := col.Hsv()
return 0.2 <= s && s <= 0.4 && 0.7 <= v && v <= 1.0
}
for l := 0.0; l <= 1.0; l += 0.05 {
for a := -1.0; a <= 1.0; a += 0.1 {
for b := -1.0; b <= 1.0; b += 0.1 {
col := colorful.Lab(l, a, b)
if col.IsValid() && pastel(col) {
d = append(d, clusters.Coordinates{l, a, b})
}
}
}
}Ещё одно цветовое пространство — HSV, буквы в названии означают оттенок (hue), насыщенность (saturation) и яркость (value). В этом пространстве пастельные цвета обычно имеют высокие значения яркости и низкие значения насыщенности.
Вот что получилось:
Также вы можете фильтровать цвета по их насыщенности (chroma) и яркости, чтобы получить набор «тёплых» тонов:
func warm(col colorful.Color) bool {
_, c, l := col.Hcl()
return 0.1 <= c && c <= 0.4 && 0.2 <= l && l <= 0.5
}Результат:
Пакет gamut
Я работаю над библиотекой под названием gamut, в которой соберу все описанные здесь кусочки в один удобный пакет на Go, позволяющий генерировать и управлять цветовыми палитрами и темами. Вы уже можете его попробовать, но он пока в работе.