Помощь в выборе цветa
Для максимального понимания того, что именно хочет клиент, мы разработали простую таблицу цветов, где Вы можете выбрать понравившиеся оттенки и сообщить нам их номера, избегая размытых формулировок «розовее», «салатовый», «не такой серый», «цвет заката на песке» и тому подобных фраз.
ВНИМАНИЕ: не стоит выбирать более 2-3 цветов или оттенков, обозначьте для дизайнера основное цветовое направление, а гармоничное сочетание подберёт для вас профессионал самостоятельно.
ТАБЛИЦА HTML ЦВЕТОВ
| Красные тона: |
| #CD5C5C |
| #F08080 |
| #FA8072 |
| #E9967A |
| #FFA07A |
| #DC143C |
| #FF0000 |
| #B22222 |
| #8B0000 |
| Розовые тона: |
| #FFC0CB |
| #FFB6C1 |
| #FF69B4 |
| #FF1493 |
| #C71585 |
| #DB7093 |
| Оранжевые тона: |
| #FFA07A |
| #FF7F50 |
| #FF6347 |
| #FF4500 |
| #FF8C00 |
| #FFA500 |
| Жёлтые тона: |
| #FFD700 |
| #FFFF00 |
| #FFFFE0 |
| #FFFACD |
| #FAFAD2 |
| #FFEFD5 |
| #FFE4B5 |
| #FFDAB9 |
| #EEE8AA |
| #F0E68C |
| #BDB76B |
| Фиолетовые тона: |
| #E6E6FA |
| #D8BFD8 |
| #DDA0DD |
| #EE82EE |
| #DA70D6 |
| #FF00FF |
| #FF00FF |
| #BA55D3 |
| #9370DB |
| #8A2BE2 |
| #9400D3 |
| #9932CC |
| #8B008B |
| #800080 |
| #4B0082 |
| #6A5ACD |
| #483D8B |
| Коричневые тона: |
| #FFF8DC |
| #FFEBCD |
| #FFE4C4 |
| #FFDEAD |
| #F5DEB3 |
| #DEB887 |
| #D2B48C |
| #BC8F8F |
| #645452 |
| #F4A460 |
| #DAA520 |
| #B8860B |
| #CD853F |
| #D2691E |
| #8B4513 |
| #A0522D |
| #A52A2A |
| #800000 |
| Основные цвета: |
| #000000 |
| #808080 |
| #C0C0C0 |
| #FFFFFF |
| #FF00FF |
| #800080 |
| #FF0000 |
| #800000 |
| #FFFF00 |
| #808000 |
| #00FF00 |
| #008000 |
| #00FFFF |
| #008080 |
| #0000FF |
| #000080 |
| Зелёные тона: |
| #ADFF2F |
| #7FFF00 |
| #7CFC00 |
| #00FF00 |
| #32CD32 |
| #98FB98 |
| #90EE90 |
| #00FA9A |
| #00FF7F |
| #3CB371 |
| #2E8B57 |
| #228B22 |
| #008000 |
| #006400 |
| #9ACD32 |
| #6ba300 |
| #6B8E23 |
| #556B2F |
| #808000 |
| #8FBC8F |
| #66CDAA |
| #20B2AA |
| #008B8B |
| #008080 |
| Синие тона: |
| #00FFFF |
| #00FFFF |
| #E0FFFF |
| #AFEEEE |
| #7FFFD4 |
| #40E0D0 |
| #48D1CC |
| #00CED1 |
| #5F9EA0 |
| #4682B4 |
| #B0C4DE |
| #B0E0E6 |
| #ADD8E6 |
| #87CEEB |
| #87CEFA |
| #00BFFF |
| #1E90FF |
| #6495ED |
| #7B68EE |
| #4169E1 |
| #0000FF |
| #0000CD |
| #00008B |
| #000080 |
| #191970 |
| Белые тона: |
| #FFFFFF |
| #FFFAFA |
| #F0FFF0 |
| #F5FFFA |
| #F0FFFF |
| #F0F8FF |
| #F8F8FF |
| #F5F5F5 |
| #FFF5EE |
| #F5F5DC |
| #FDF5E6 |
| #FFFAF0 |
| #FFFFF0 |
| #FAEBD7 |
| #FAF0E6 |
| #FFF0F5 |
| #FFE4E1 |
| Серые тона: |
| #DCDCDC |
| #D3D3D3 |
| #C0C0C0 |
| #A9A9A9 |
| #808080 |
| #696969 |
| #778899 |
| #708090 |
| #2F4F4F |
| #000000 |
| Цветовая константа | Red | Green | Blue | Образец |
|---|---|---|---|---|
| alicemblue | F0 | F8 | FF | |
| antiquewhite | FA | EB | D7 | |
| aqua | 00 | FF | FF | |
| aquamarine | 7F | FF | D4 | |
| azure | F0 | FF | FF | |
| beige | F5 | F5 | DC | |
| bisque | FF | E4 | C4 | |
| black | 00 | 00 | 00 | |
| blanchedalmond | FF | EB | CD | |
| blue | 00 | 00 | FF | |
| blueviolet | 8A | 2B | E2 | |
| brown | A5 | 2A | 2A | |
| burlywood | DE | B8 | 87 | |
| cadetblue | 5F | 9E | A0 | |
| chartreuse | 7F | FF | 00 | |
| chocolate | D2 | 69 | 1E | |
| coral | FF | 7F | 50 | |
| cornflowerblue | 64 | 95 | ED | |
| cornsilk | FF | F8 | DC | |
| crimson | DC | 14 | 3C | |
| cyan | 00 | FF | FF | |
| darkblue | 00 | 00 | 8B | |
| darkcyan | 00 | 8B | 8B | |
| darkgoldenrod | B8 | 86 | 0B | |
| darkgray | A9 | A9 | A9 | |
| darkgreen | 00 | 64 | 00 | |
| darkkhaki | BD | B7 | 6B | |
| darkmagenta | 8B | 00 | 8b | |
| darkolivegreen | 55 | 6B | 2F | |
| darkorange | FF | 8C | 00 | |
| darkochid | 99 | 32 | CC | |
| darkred | 8B | 00 | 00 | |
| darksalmon | E9 | 96 | 7A | |
| darkseagreen | 8F | BC | 8F | |
| darkslateblue | 48 | 3D | 8B | |
| darkslategray | 2F | 4F | 4F | |
| darkturquoise | 00 | CE | D1 | |
| darkviolet | 94 | 00 | D3 | |
| deeppink | FF | 14 | 93 | |
| deepskyblue | 00 | BF | FF | |
| dimgray | 69 | 69 | 69 | |
| dodgerblue | 1E | 90 | FF | |
| firebrick | B2 | 22 | 22 | |
| floralwhite | FF | FA | F0 | |
| forestgreen | 22 | 8B | 22 | |
| fushsia | FF | 00 | FF | |
| gainsboro | DC | DC | DC | |
| ghostwhite | F8 | F8 | FF | |
| gold | FF | D7 | 00 | |
| goldenrod | DA | A5 | 20 | |
| gray | 80 | 80 | 80 | |
| green | 00 | 80 | 00 | |
| greenyellow | AD | FF | 2F | |
| honeydew | F0 | FF | F0 | |
| hotpink | FF | 69 | B4 | |
| indiandred | CD | 5C | 5C | |
| indigo | 4B | 00 | 82 | |
| ivory | FF | FF | F0 | |
| khaki | F0 | E6 | 8C | |
| lavender | E6 | E6 | FA | |
| lavenderblush | FF | F0 | F5 | |
| lawngreen | 7C | FC | 00 | |
| lemonchiffon | FF | FA | CD | |
| ligtblue | AD | D8 | E6 | |
| lightcoral | F0 | 80 | 80 | |
| lightcyan | E0 | FF | FF | |
| lightgoldenrodyellow | FA | FA | D2 | |
| lightgreen | 90 | EE | 90 | |
| lightgrey | D3 | D3 | D3 | |
| lightpink | FF | B6 | C1 | |
| lightsalmon | FF | A0 | 7A | |
| lightseagreen | 20 | B2 | AA | |
| lightscyblue | 87 | CE | FA | |
| lightslategray | 77 | 88 | 99 | |
| lightsteelblue | B0 | C4 | DE | |
| lightyellow | FF | FF | E0 | |
| lime | 00 | FF | 00 | |
| limegreen | 32 | CD | 32 | |
| linen | FA | F0 | E6 | |
| magenta | FF | 00 | FF | |
| maroon | 80 | 00 | 00 | |
| mediumaquamarine | 66 | CD | AA | |
| mediumblue | 00 | 00 | CD | |
| mediumorchid | BA | 55 | D3 | |
| mediumpurple | 93 | 70 | DB | |
| mediumseagreen | 3C | B3 | 71 | |
| mediumslateblue | 7B | 68 | EE | |
| mediumspringgreen | 00 | FA | 9A | |
| mediumturquoise | 48 | D1 | CC | |
| medium violetred | C7 | 15 | 85 | |
| midnightblue | 19 | 19 | 70 | |
| mintcream | F5 | FF | FA | |
| mistyrose | FF | E4 | E1 | |
| moccasin | FF | E4 | B5 | |
| navajowhite | FF | DE | AD | |
| navy | 00 | 00 | 80 | |
| oldlace | FD | F5 | E6 | |
| olive | 80 | 80 | 00 | |
| olivedrab | 6B | 8E | 23 | |
| orange | FF | A5 | 00 | |
| orengered | FF | 45 | 00 | |
| orchid | DA | 70 | D6 | |
| palegoldenrod | EE | E8 | AA | |
| palegreen | 98 | FB | 98 | |
| paleturquose | AF | EE | EE | |
| palevioletred | DB | 70 | 93 | |
| papayawhop | FF | EF | D5 | |
| peachpuff | FF | DA | B9 | |
| peru | CD | 85 | 3F | |
| pink | FF | C0 | CB | |
| plum | DD | A0 | DD | |
| powderblue | B0 | E0 | E6 | |
| purple | 80 | 00 | 80 | |
| red | FF | 00 | 00 | |
| rosybrown | BC | 8F | 8F | |
| royalblue | 41 | 69 | E1 | |
| saddlebrown | 8B | 45 | 13 | |
| salmon | FA | 80 | 72 | |
| sandybrown | F4 | A4 | 60 | |
| seagreen | 2E | 8B | 57 | |
| seashell | FF | F5 | EE | |
| sienna | A0 | 52 | 2D | |
| silver | C0 | C0 | C0 | |
| skyblue | 87 | CE | EB | |
| slateblue | 6A | 5A | CD | |
| slategray | 70 | 80 | 80 | |
| snow | FF | FA | FA | |
| springgreen | 00 | FF | 7F | |
| steelblue | 46 | 82 | B4 | |
| tan | D2 | B4 | 8C | |
| teal | 00 | 80 | 80 | |
| thistle | D8 | BF | D8 | |
| tomato | FF | 63 | 47 | |
| turquose | 40 | E0 | D0 | |
| violet | EE | 82 | EE | |
| wheat | F5 | DE | B3 | |
| white | FF | FF | FF | |
| whitesmoke | F5 | F5 | F5 | |
| yellow | FF | FF | 00 | |
| yellowgreen | 9A | CD | 32 |
HTML цвета
HTML цвета — это специальные ключевые слова, принятые для обозначения цветов в HTML и CSS при верстке интернет сайтов.
Современная спецификая веб-стандартов (W3C) содержит 147 наименований цветов. Среди них есть синонимы, ссылающиеся на один и тот же цвет. Например Magenta и Fuchsia — оба ключевых слова ссылаются на цвет #FF00FF. Все цвета представлены в таблице.
Первая колонка содержит ключевое слово, обозначающее цвет. Вторая колонка содержит представление этого цвета в шестнадцатеричном (HEX). Третья колонка это классический RGB (красный зеленый синий).
| HTML имя цвета | HEX | RGB |
|---|---|---|
| Красные тона | ||
| 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 |
| Розовые тона | ||
| 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 |
| Оранжевые тона | ||
| 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 |
| Жёлтые тона | ||
| 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 |
| Фиолетовые тона | ||
| 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 |
| Коричневые тона | ||
| 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 |
| Зелёные тона | ||
| 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 |
| Синие тона | ||
| 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 |
| Белые тона | ||
| 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 |
| 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 |
Проектирование отчетов > HTML теги > HTML тег > Параметр color
Параметр color изменяет цвет выводимого текста внутри текстового компонента. Значение цвета можно задавать двумя способами:
С использованием наименования цвета
В данном случае указывается наименование цвета. Всего поддерживается 147 наименований цветов. Если генератор отчетов не можем распознать заданный цвет, то он игнорирует параметр color. Например:
<font color=»red» …>
<font color=»black» …>
<font color=»white» …>
С использованием шестнадцатеричного значения цвета
Во втором случае для задания цветов используются числа в шестнадцатеричном виде. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом указывается символ решетки #, например #555777. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Обозначение цвета разбивается на три составляющие цвета — красная, зеленая и синяя (#rrggbb). Первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Цвет можно задавать и в сокращенной форме, по одному символу на компонент цвета. При невозможности распознать значение цвета, используется цвет текста заданный у текстового компонента или определенный предыдущим тегом <font>. Ниже приведены примеры задания цвета в виде шестнадцатеричного значения:
<font color=»#FF0000″ …>
<font color=»#F00″ …>
<font color=»#FF0000″ …>
<font color=»#998877″ …>
<font color=»#FF00FF» …>
Кроме параметра color тега <font>, цвет текста также можно изменить отдельным тегом <font-color> или просто <color>. Например:
<font-color=»red»>
<color=»red»>
Кодирование цвета на web-страницах
Тип урока: урок-закрепление изученного.
Вид: урок-практикум.
Технология: проблемно-исследовательская технология.
Оборудование: компьютер с установленной программой Adobe Photoshop; мультимедийный проектор; интерактивная доска; таблицы заданий для компьютерного практикума, подготовленные, для заполнения на интерактивной доске; раздаточный материал.
Цели урока:
- развитие у учащихся теоретического, творческого мышления, а также формирование операционного мышления, направленного на выбор оптимальных решений;
- подготовка к сдаче ЕГЭ.
Задачи урока.
Воспитательная – развитие познавательного интереса, воспитание информационной культуры.
Образовательная – систематизация знаний, умений и навыков работы по темам: “Технология создания и обработки графической информации”, “Создание интерактивных Web-страниц”.
Развивающая – развитие логического мышления, расширение кругозора.
Ход урока
I. Организационный момент
Сегодня мы подведем итог изученному материалу. В ходе выполнения практических работ вы должны будете показать умения и навыки, применить теоретические знания, полученные вами при изучении тем: “Технология создания и обработки графической информации”, “Создание интерактивных Web- страниц”.
II. Повторение изученного материала. Фронтальный опрос
Вопросы.
- Перечислите все виды графики.
- В каких форматах хранится графическая информация?
- Как формируется векторное изображение?
- Как формируется растровое изображение?
- Что такое пиксель?
- Что такое глубина цвета?
- Опишите цветовую модель RGB.
- Сколько различных цветов можно закодировать, используя модель RGB в режиме истинного цвета (True Color)?
- Сколько памяти нужно для хранения цвета одного пикселя?
- Сколько различных цветов можно закодировать?
- Как кодируется и записывается цвет на Web - страницах?
- Какой используется атрибут для кодирования цвета фона интернет – страницы?
I. Компьютерный практикум. При выполнении практических работ можно воспользоваться программой Adobe Photoshop. По ходу выполнения работ, учащиеся, заполняют таблицы на интерактивной доске.
Практическая работа 1. По цвету определить код. Заполнить таблицу, сделать выводы:
Практическая работа 2. По коду определить цвет. Заполнить таблицу, сделать выводы:
| Шестнадцатеричный код | #FFFF00 | #FF00FF | #00FFFF | #CCCCCC | #787878 |
| Десятичный код | |||||
| Название цвета | |||||
| Цвет |
Практическая работа 3. Получение светлых оттенков базового цвета. Заполнить таблицу, сделать выводы:
Практическая работа 4. Получение темных оттенков базового цвета. Заполнить таблицу, сделать выводы:
II. Подведение итогов практических работ. Учащиеся делают выводы и зачитывают их вслух.
III. Закрепление. Тестирование. (При тестировании нельзя пользоваться программой Adobe Photoshop).
Для кодирования цвета фона страницы Интернет используется атрибут bgcolor=»#ХХХХХХ», где в кавычках задаются шестнадцатеричные значения интенсивности цветовых компонент в 24-битной RGB-модели. К какому цвету будет близок цвет страницы, заданной тэгом:
1. <body bgcolor=»#999999″>?
1) белый 2) серый 3) желтый 4) фиолетовый
2. <body bgcolor=»#992299″>?
1) белый 2) серый 3) желтый 4) фиолетовый
3. <body bgcolor=»#999900″>?
1) белый 2) серый 3)желтый 4) фиолетовый
4. <body bgcolor=»#40FF40″>?
1) темно-фиолетовый 2) светло-зеленый 3) желтый 4) светло-желтый
5. <body bgcolor=»#FFFF40″>?
1) темно-фиолетовый 2) светло-зеленый 3) желтый 4) светло-желтый
6. <body bgcolor=»#800080″>?
1) темно-фиолетовый 2) светло-зеленый 3)желтый 4) светло-желтый
7. <body bgcolor=»#008000″>?
1) черный 2) темно-синий 3) темно-зеленый 4) темно-красный
8. <body bgcolor=»#00FFFF»>?
1) красный 2) желтый 3) фиолетовый 4) голубой
9. <body bgcolor=»#FF8080″>?
1) желтый 2) розовый 3) светло-зеленый 4) светло-синий
10. <body bgcolor=»#80FF80″>?
1) желтый 2) розовый 3) светло-зеленый 4) светло-синий
11. <body bgcolor=»#F20FF2″>?
1) фиолетовый 2) серый 3) белый 4) черный
12. <body bgcolor=»#747474″>?
1) серый 2) белый 3) черный 4) фиолетовый
Результат выполнения работы практической работы 1
Результат выполнения работы практической работы 2
Выводы.
Цвет на Web-страницах кодируется в виде RGB-кода в шестнадцатеричной системе: #RRGGBB, где RR, GG и BB – яркости красного, зеленого и синего, записанные в виде двух шестнадцатеричных цифр; это позволяет закодировать 256 значений от 0 (0016) до 255 (FF16) для каждой составляющей; коды некоторых цветов:
#FFFFFF – белый, #000000 – черный,
#CCCCCC и любой цвет, где R = G = B, – это серый разных яркостей
#FF0000 – красный, #00FF00 – зеленый, #0000FF – синий,
#FFFF00 – желтый, #FF00FF – фиолетовый, #00FFFF – бирюзовый.
Результат выполнения работы практической работы 3:
Выводы: чтобы получить светлый оттенок какого-то базового цвета, нужно одинаково увеличить нулевые составляющие; например, чтобы получить светло-красный цвет, нужно сделать максимальной красную составляющую и, кроме этого, одинаково увеличить остальные – синюю и зеленую;
Результат выполнения работы практической работы 4:
Выводы: чтобы получить темный оттенок базового цвета, нужно одинаково уменьшить все составляющие.
Тест
| № вопроса | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| № ответа | 2 | 4 | 3 | 2 | 4 | 1 | 3 | 4 | 2 | 3 | 1 | 1 |
IV. Подведение итогов урока
Источники заданий: Учебник, Н.Д. Угринович “Информатика и ИКТ”, профильный уровень, 11 кл.; демонстрационные варианты ЕГЭ 2004-2011 гг.
Ff0000 какой цвет — Seoblog
В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.
Шестнадцатеричные цвета
Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.
| Десятичные | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Шестнадцатеричные | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
| Десятичные | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Шестнадцатеричные | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C |
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.
Типичный цвет, используемый в HTML, выглядит следующим образом.
<body bgcolor="#fa8e47">Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.
- Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
- Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
- Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.
Рис. 6.1. Цветовой круг
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.
Рис. 6.2. Окно для выбора цвета в программе Photoshop
Веб-цвета
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный.
обы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зеленой и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.
| Имя цвета | Цвет | Описание | Шестнадцатеричное значение |
|---|---|---|---|
| black | Черный | #000000 | |
| blue | Синий | #0000FF | |
| fuchsia | Светло-фиолетовый | #FF00FF | |
| gray | Темно-серый | #808080 | |
| green | Зеленый | #008000 | |
| lime | Светло-зеленый | #00FF00 | |
| maroon | Темно-красный | #800000 | |
| navy | Темно-синий | #000080 | |
| olive | Оливковый | #808000 | |
| purple | Темно-фиолетовый | #800080 | |
| red | Красный | #FF0000 | |
| silver | Светло-серый | #C0C0C0 | |
| teal | Сине-зеленый | #008080 | |
| white | Белый | #FFFFFF | |
| yellow | Желтый | #FFFF00 |
Не имеет значения, каким способом вы задаете цвет — по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В примере 6.1 показано, как установить цвет фона и текста веб-страницы.
Пример 6.1. Цвет фона и текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Цвета</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body bgcolor="teal" text="#ffffff"> <p>Пример текста</p> </body> </html>
В данном примере цвет фона задается с помощью атрибута bgcolor тега <body>, а цвет текста через атрибут text. Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal.
htmlbook.ru
Как использовать пользовательские цвета в редакторе Microsoft VBA?
принимая приманку из ответа dnissley (где он спрашивает, Может ли кто-то сделать надстройку), я сделал надстройку для VB6. Это немного грубо (и я объясню, почему в ближайшее время), но он делает свою работу.
Я создал новый проект надстройки в VB6, который дал мне форму по умолчанию «frmAddin «(которую я не использую) и конструктор» Connect». Я сам добавил класс Colour, который содержит следующее:
Option Explicit
Dim m_iForeColour As Integer
Dim m_iBackColour As Integer
Dim m_iIndicatorColour As Integer
Public Property Let ForeColour(ByVal iID As Integer)
m_iForeColour = iID
End Property
Public Property Get ForeColour() As Integer
ForeColour = m_iForeColour
End Property
Public Property Let BackColour(ByVal iID As Integer)
m_iBackColour = iID
End Property
Public Property Get BackColour() As Integer
BackColour = m_iBackColour
End Property
Public Property Let IndicatorColour(ByVal iID As Integer)
m_iIndicatorColour = iID
End Property
Public Property Get IndicatorColour() As Integer
IndicatorColour = m_iIndicatorColour
End Property
и затем я изменил код в конструкторе» Connect » на быть следующим:
Option Explicit
Public FormDisplayed As Boolean
Public VBInstance As VBIDE.VBE
Dim mcbMenuCommandBar As Office.CommandBarControl
Dim mfrmAddIn As New frmAddIn
Public WithEvents MenuHandler As CommandBarEvents 'command bar event handler
Dim mcbToolbar As Office.CommandBarControl
Public WithEvents MenuHandler2 As CommandBarEvents
Dim codeColours() As Colour
'*****************************************************************************
' RunScript Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' Runs the code that sets the required colours for the code window in the
' active IDE.
' *** A PROJECT MUST BE LOADED BEFORE THIS WILL ACTUALLY WORK ***
'*****************************************************************************
Sub RunScript()
ReadColoursFile
' Select Tools > Options
SendKeys "%to", 5
' Go to tabs, select "Options"
SendKeys "+{TAB}"
SendKeys "{RIGHT}"
' Select listbox
SendKeys "{TAB}"
Dim colourSetting As Colour
Dim iColour As Integer
For iColour = 0 To 9
SetColours iColour, codeColours(iColour)
Next iColour
SendKeys "~"
End Sub
'*****************************************************************************
' ReadColoursFile Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' Reads the colour file from disk and populates the codeColours array which
' is used by the SetColour* methods for selecting the correct colours from
' the options screen.
'*****************************************************************************
Sub ReadColoursFile()
Dim colourLine As String
Dim colourArray() As String
Dim colourSetting As Colour
Dim oFSO As FileSystemObject
Set oFSO = New FileSystemObject
If Not oFSO.FileExists(App.Path & "\VB6CodeColours.dat") Then
MsgBox "VB6CodeColours.dat not found in " & App.Path, vbOKOnly, "VB6CodeColours Settings file not found!"
Exit Sub
End If
Set oFSO = Nothing
Open App.Path & "\VB6CodeColours.dat" For Input As #1
ReDim codeColours(9) As Colour
While Not EOF(1)
Line Input #1, colourLine
colourArray = Split(colourLine, ",")
If IsNumeric(colourArray(0)) Then
If codeColours(colourArray(0)) Is Nothing Then
Set colourSetting = New Colour
If IsNumeric(colourArray(1)) Then
colourSetting.ForeColour = CInt(colourArray(1))
End If
If IsNumeric(colourArray(2)) Then
colourSetting.BackColour = CInt(colourArray(2))
End If
If IsNumeric(colourArray(3)) Then
colourSetting.IndicatorColour = CInt(colourArray(3))
End If
Set codeColours(colourArray(0)) = colourSetting
End If
End If
Wend
Close #1
Set colourSetting = Nothing
End Sub
'*****************************************************************************
' SetColours Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' Selects the colour item from the list and then iterates the colour selector
' controls associated with that item and sets them according to the values
' set in the VB6CodeColours.dat file.
'*****************************************************************************
Sub SetColours(ByVal iColour As Integer, ByRef colourSetting As Colour)
Dim iKey As Integer
SendKeys "{HOME}"
For iKey = 1 To iColour
SendKeys "{DOWN}"
Next iKey
SetColourSelector colourSetting.ForeColour
SetColourSelector colourSetting.BackColour
SetColourSelector colourSetting.IndicatorColour
SendKeys "+{TAB}"
SendKeys "+{TAB}"
SendKeys "+{TAB}"
End Sub
'*****************************************************************************
' SetColourSelector Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' Sets the colour in the selector combo. Assumes the focus is on the
' preceeding control before the code is run (first line tabs to the
' assumed control).
'*****************************************************************************
Sub SetColourSelector(ByVal iColour As Integer)
Dim iKey As Integer
SendKeys "{TAB}"
SendKeys "{HOME}"
For iKey = 1 To iColour
SendKeys "{DOWN}"
Next iKey
End Sub
'*****************************************************************************
' AddinInstance_OnConnection Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' This method runs when the addin is loaded by the IDE
'*****************************************************************************
Private Sub AddinInstance_OnConnection(ByVal Application As Object, ByVal ConnectMode As AddInDesignerObjects.ext_ConnectMode, ByVal AddInInst As Object, custom() As Variant)
On Error GoTo ErrorHandler
'save the vb instance
Set VBInstance = Application
If ConnectMode ext_cm_External Then
Set mcbMenuCommandBar = AddToAddInCommandBar("VB6 Code Colouring")
'sink the event
Set Me.MenuHandler = VBInstance.Events.CommandBarEvents(mcbMenuCommandBar)
Dim oStdToolbar As Office.CommandBar
Dim oStdToolbarItem As Office.CommandBarControl
Set oStdToolbar = VBInstance.CommandBars("Standard")
Set oStdToolbarItem = oStdToolbar.Controls.Add(Type:=msoControlButton)
oStdToolbarItem.Style = msoButtonCaption
oStdToolbarItem.Caption = "Set IDE Colours"
oStdToolbarItem.BeginGroup = True
Set Me.MenuHandler2 = VBInstance.Events.CommandBarEvents(oStdToolbarItem)
End If
Exit Sub
ErrorHandler:
MsgBox Err.Description
End Sub
'*****************************************************************************
' AddinInstance_OnDisconnection Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' This method runs when the addin is removed by the IDE and cleans up any
' references etc.
'*****************************************************************************
Private Sub AddinInstance_OnDisconnection(ByVal RemoveMode As AddInDesignerObjects.ext_DisconnectMode, custom() As Variant)
On Error Resume Next
'delete the command bar entry
mcbMenuCommandBar.Delete
'shut down the Add-In
If FormDisplayed Then
SaveSetting App.Title, "Settings", "DisplayOnConnect", "1"
FormDisplayed = False
Else
SaveSetting App.Title, "Settings", "DisplayOnConnect", "0"
End If
Unload mfrmAddIn
Set mfrmAddIn = Nothing
Set MenuHandler = Nothing
Set MenuHandler2 = Nothing
End Sub
'*****************************************************************************
' MenuHandler_Click Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' This method performs the tasks needed when the menu item is clicked.
'*****************************************************************************
Private Sub MenuHandler_Click(ByVal CommandBarControl As Object, handled As Boolean, CancelDefault As Boolean)
RunScript
End Sub
'*****************************************************************************
' MenuHandler2_Click Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' This method performs the tasks needed when the toolbar button is clicked.
'*****************************************************************************
Private Sub MenuHandler2_Click(ByVal CommandBarControl As Object, handled As Boolean, CancelDefault As Boolean)
RunScript
End Sub
'*****************************************************************************
' AddToAddInCommandBar Sub
'-----------------------------------------------------------------------------
' DESCRIPTION:
' Adds the specified item to the menu list.
'*****************************************************************************
Function AddToAddInCommandBar(sCaption As String) As Office.CommandBarControl
Dim cbMenuCommandBar As Office.CommandBarControl 'command bar object
Dim cbMenu As Object
On Error Resume Next
'see if we can find the Add-Ins menu
Set cbMenu = VBInstance.CommandBars("Add-Ins")
If cbMenu Is Nothing Then
'not available so we fail
Exit Function
End If
On Error GoTo ErrorHandler
'add it to the command bar
Set cbMenuCommandBar = cbMenu.Controls.Add(1)
'set the caption
cbMenuCommandBar.Caption = sCaption
Set AddToAddInCommandBar = cbMenuCommandBar
Exit Function
ErrorHandler:
' Exit gracefully
End Function
этот код позволяет приложению считывать цвета, которые я хочу из файла, который находится в том же каталоге, что и.dll файлы (так называемый VB6CodeColours.dat). Этот файл содержит следующее (И он будет варьироваться в зависимости от того, какие цвета вы заменяете в VB6.EXE, так что прямая копия и вставка, вероятно, не будет работать.
0,14,12,0 1,0,0,0 2,16,13,0 3,0,15,15 4,16,5,5 5,7,12,0 6,11,12,0 7,8,12,0 8,16,10,10 9,16,3,3
выглядит тарабарщиной, но я объясню. Он имеет формат «цвет кода», «передний план», «фон», индикатор», поэтому верхняя строка установит «Обычный текст» на 14-й пункт в комбо на переднем плане, 12-й для фона и 1-й для индикатора.
почему я сказал, что это довольно грубое решение: * Он использует SendKeys. Я уверен, что никаких дальнейших объяснений не требуется 🙂 * Пользователь должен нажать кнопку меню / Панель инструментов для того, чтобы он вступил в силу. * Код не является наилучшим структурированным (на мой взгляд), но был основан на количестве времени, которое я мог бы посвятить ему в то время. Я стремлюсь улучшить его в будущем, но он отлично работает для меня в текущем состоянии (так что я, вероятно, оставлю его!)
возможно с основанием, кто-то сможет расшириться на нем дальше.
Значение пурпурного, комбинации и шестнадцатеричный код
Цвет, веками покорявший многих, пурпурный — это смесь фиолетового и красного. Его шестнадцатеричный код — # FF00FF. Один из самых захватывающих аспектов пурпурного цвета — это споры о его реальном существовании. Человеческий мозг воспринимает свет разных длин волн как разные цвета, но, поскольку пурпурный не имеет собственной длины волны, некоторые утверждают, что этот цвет придуман.
Помимо метафизических аспектов своего существования, пурпурный известен как цвет гармонии и баланса.Он используется в фен-шуй и часто считается духовным.
Для женственности сочетайте пурпурный с другими розовыми оттенками или сочетайте его с яркими синими и желтыми оттенками для создания более современной палитры.
Ищете другой оттенок? Следующие цвета относятся к пурпурному.
Информация о пурпурном / # FF00FF
В цветовом пространстве RGB (состоящем из трех цветных источников света для красного, зеленого и синего) шестнадцатеричный # FF00FF состоит из 100% красного, 0% зеленого и 100% синего. В цветовом пространстве CMYK (также известном как триадный или четырехцветный и используемый при цветной печати) шестнадцатеричный # FF00FF состоит из 0% голубого, 100% пурпурного, 0% желтого и 0% черного.Пурпурный имеет угол оттенка 300 градусов, насыщенность 100% и яркость 50%.
Преобразование цвета
Шестнадцатеричный цвет # FF00FF имеет значения RGB R: 100, G: 0, B: 100 и значения CMYK C: 0, M: 1, Y: 0, K: 0.
| Значение | CSS | |
|---|---|---|
| Hex | ff00ff | # ff00ff |
| RGB Decimal | 255, 0, 255 | 900gb35 9000 , 0, 255) |
| Процент RGB | 100, 0, 100 | RGB (100%, 0%, 100%) |
| CMYK | 0, 100, 0, 0 | |
| HSL | 300 °, 100, 50 | hsl (300 °, 100%, 50%) |
| HSV (или HSB) | 300 °, 100, 100 | |
| Веб-сейф | ff00ff | # ff00ff |
| CIE-LAB | 60.324, 98,234, -60,825 | |
| XYZ | 59,289, 28,485, 96,964 | |
| xyY | 0,321, 0,154, 28,485 | |
| 35, | ||
| CIE-LCH2 115.541, 328.235 | ||
| CIE-LUV | 60.324, 84.071, -108.683 | |
| Hunter-Lab | 53.371, 109.457, -76.079 | |
| 2 | ||
| 2 9002 900 , 00000000, 11111111 |
Пурпурный # ff00ff шестнадцатеричный цвет
В цветовом пространстве RGB шестнадцатеричный цвет # ff00ff (также известный как пурпурный) состоит из 100% красного, 0% зеленого и 100% синего.Тогда как в цветовом пространстве CMYK он состоит из 0% голубого, 100% пурпурного, 0% желтого и 0% черного. Он имеет угол оттенка 300 градусов, насыщенность 100% и яркость 50%. Шестнадцатеричный цвет # ff00ff может быть получен смешиванием # ff00ff с # ff00ff. # ff00ff (или # f0f) — цвет, безопасный для Интернета.
# ff00ff описание цвета: яркий яркий пурпурный / яркий яркий пурпурный
# ff00ff Преобразование цвета
Шестнадцатеричный цвет # ff00ff имеет значения RGB R: 255, G: 0, B: 255 и значения CMYK C: 0, М: 1, Г: 0, К: 0.Его десятичное значение — 16711935.
| Шестнадцатеричный триплет | ff00ff | # ff00ff |
| RGB Decimal | 255, 0, 255 | rgb (255,0,255) |
| Процент RGB | 100, 0, 100 | rgb (100%, 0%, 100%) |
| CMYK | 0, 100, 0, 0 | |
| HSL | 300 °, 100, 50 | hsl (300,100%, 50%) |
| HSV (HSB) | 300 °, 100, 100 | |
| Web Safe | ff00ff | # f0f |
| XYZ | 59.29, 28,48, 96,98 |
| xyY | 0,321, 0,154, 28,48 |
| CIE-LAB | 60,32, 98,254, -60,843 |
| CIE-LCH | , 328.233 |
| CIE-LUV | 60.32, 84.075, -108.712 |
| Hunter-Lab | 53.367, 104.921, -70.387 |
| Двоичный , 000035 1111 |
# ff00ff Анализ цвета
Цветовые схемы с # ff00ff
Разделенный дополнительный цвет
Альтернативы # ff00ff
Ниже вы можете увидеть некоторые цвета, близкие к # ff00ff.Набор связанных цветов может быть полезен, если вам нужна вдохновляющая альтернатива исходному выбору цвета.
# ff00ff Preview
Текст с шестнадцатеричным цветом # ff00ff
Этот текст имеет цвет шрифта # ff00ff.
Текст здесь # ff00ff цвет фона
Этот абзац имеет цвет фона # ff00ff.
Содержимое здесь
# ff00ff цвет границы
Этот элемент имеет цвет границы # ff00ff.
Содержимое
CSS-коды
.text {color: # ff00ff;} .background {background-color: # ff00ff;} .border {border: 1px solid # ff00ff ;} .text-shadow {border: 1px solid # ff00ff;} Оттенки и оттенки # ff00ff
Оттенок достигается путем добавления черного к любому чистому оттенку, а оттенок создается путем смешивания белого с любым чистым цвет. В этом примере # 000000 — самый темный цвет, а #ffeaff — самый светлый.
Оттенки # ff00ff
Тон получается путем добавления серого к любому чистому оттенку. В этом случае # 807f80 — менее насыщенный цвет, а # f40bf4 — самый насыщенный.
Преобразование цветов — Fuchsia
Примеры CSSТекст
Свойство CSS для изменения цвета текста на шестнадцатеричный FF00FF называется «цвет». Свойство цвета можно установить для классов, идентификаторов или непосредственно в элементе HTML.
В этом примере показано, как выглядит текст цвета # FF00FF.
.text, #text, p {color: # FF00FF}📋 Код копирования
Если вы хотите добавить текстовую тень этого цвета, используйте свойство text-shadow, вы можете сгенерировать текстовую тень непосредственно с наш 🔧 Генератор теней текста CSS.
Здесь вы видите, как выглядит черный текст с цветной тенью в 4 пикселя # FF00FF.
.shadow {text-shadow: 4px 4px 2px # FF00FF}📋 Копировать код
Border
Свойство CSS для изменения границы элемента на Hex FF00FF называется «границей».Свойство границы можно установить для классов, идентификаторов или непосредственно в элементе HTML.
В этом примере цвет показан как граница, его можно применить через свойство CSS «border» или «border-color».
.border, #border, table {border: 4px solid # FF00FF}📋 Код копирования
Если нужно изменить только цвет границы, используйте свойство border-color.
.border {border-color: # FF00FF}📋 Код копирования
Если вы хотите добавить тень блока в этом цвете, используйте:
Здесь вы видите, как блок с 4-пиксельной тенью цвета # FF00FF похоже.
.boxshadow {-moz-box-shadow: 4px 4px 4px 4px # FF00FF; -webkit-box-shadow: 4px 4px 4px 4px # FF00FF; box-shadow: 4px 4px 4px 4px # FF00FF}📋 Копировать код
Фон
Свойство CSS для изменения цвета фона элемента на Hex FF00FF называется «background». Свойство background можно установить для классов, идентификаторов или непосредственно в элементе HTML.
.background, #background, body {background: # FF00FF}📋 Копировать код
Если нужно изменить только цвет фона, можно использовать:
.background {background-color: # FF00FF}📋 Код копирования
В этом примере цвет показан как фон, он применяется через свойство CSS «background».
Для оптимизации и сжатия кода CSS вы можете использовать наш онлайн-компрессор и оптимизатор CSS на основе csstidy. Если вы хотите создать линейный или радиальный градиент в качестве фона или границы, проверьте наш 🌈 CSS Gradient Generator.
Как использовать Преобразование цветовПреобразование
Чтобы преобразовать, вставьте строку в одном из этих цветовых форматов, например, «FF00FF», в поле ввода и нажмите «Преобразовать».Результат будет в разделе «Конверсии», а в следующих разделах вы найдете более подробную информацию о цвете.
В некоторых цветовых форматах используются одинаковые обозначения, и преобразование угадывает состав поискового запроса. Например, если вы попытаетесь преобразовать строку «300 °, 100%, 100%», это может быть цвет HSV или HSL, в этом случае преобразование будет принимать HSL.
Так как это может привести к неправильному преобразованию, вы можете определить, какой формат вы передаете, заключив цветовую строку в скобки с форматом впереди.Строка поиска «HSV (300 °, 100%, 100%)» даст вам правильный цвет HSV, поскольку нет необходимости угадывать формат. Другими примерами могут быть «CIELAB (60,32, 98,25, -60,84)», «CIELCH (60, 115,567, 328,233)», «YXY (28,4800, 0,3209, 0,1542)» и «CMYK (0,00, 1,00, 0,00, 0,00)». .
Подробности
В разделе подробностей вы сначала получаете сводку цвета и, если доступно, описание, например, «темно-красный приглушенный». Вы можете увидеть распределение цвета в разных форматах. Например, в формате RGB вы узнаете количество красного, зеленого и синего в вашем цвете.
Наконец, вы получаете градиенты яркости и насыщенности вашего цвета с шагом 10%. Так что, если вам нужна более яркая или темная версия, вы можете выбрать ее здесь.
Гармонии
Гармонии в основном показывают вам цвета, которые хорошо сочетаются с цветом, который вы просматриваете в данный момент. Если вам нравится одна из гармоний, вы можете напрямую создать 🌈 CSS-градиент или 🔧 CSS-текстовую тень из нее или просмотреть гармонию как 🖌️ Color Bucket.
Изображения SVG
В этом коротком разделе показан выбор файлов SVG, использующих текущий цвет.Вы можете скачать эти файлы и использовать их в своих проектах, например, в качестве фонового изображения.
Анонсы
Хотите увидеть, как ваш цвет смотрится на белом или черном фоне? Затем вам следует проверить раздел «Предварительный просмотр» на цветной странице.
Вы также видите цветовой контраст вашего цвета на этих фонах и получаете ссылку на средство проверки контрастности цвета с предварительно выбранным цветом.
Моделирование дальтонизма
Когда вы выбираете цвет для своего проекта, вы можете иметь в виду, как этот цвет воспринимается людьми с дефицитом цветового зрения.Поэтому я добавил этот раздел, показывающий вам предварительный просмотр вашего цвета для различных недостатков цветового зрения.
Примеры CSS
Если вы новичок в веб-разработке, вы можете узнать, как применить свой цвет в качестве цвета переднего плана, фона или границы. Раздел «Примеры CSS» дает вам именно это, помогает, как использовать текущий цвет в CSS.
Если вы просматриваете цвет в формате, недоступном в CSS, вы увидите, что цвет преобразован в совместимый формат.
Color Bucket
Вы выбрали цвета для своего следующего проекта и хотите загрузить их в виде палитры или поделиться ими с друзьями, чтобы обсудить свое решение? Тогда вам стоит взглянуть на цветное ведро. Он позволяет хранить до 10 цветов, автоматически создает цветовые палитры для каждого из этих цветов на основе яркости и дает вам матрицу WCAG.
Вы можете загрузить каждую цветовую палитру или выбранные цвета как палитру GIMP, Adobe® ASE или Tailwind CSS. Кроме того, вы можете просматривать все как 🌈 Градиент CSS, 🔧 Тень текста CSS или 📷 Изображение цветовой палитры.
Чтобы добавить цвет в цветовую корзину, я поместил ссылку «❤️ Добавить этот цвет в корзину» в разделе заголовка каждой страницы на этом веб-сайте.
Проверка цветового контраста
Когда вы выбираете цвета для проекта, важно помнить о цветовом контрасте. My Color Contrast Checker позволяет вам проверять цвета, которые вы выбрали, в соответствии с Руководством по обеспечению доступности веб-контента (WCAG) 2.0.
цветной переводчик — npm
Библиотека JavaScript, написанная на TypeScript, для преобразования различных цветовых моделей.
Демо
https: // elchininet.github.io/ColorTranslator/
Установка
Использование NPM
npm установить colortranslator
Использование пряжи
В браузере
Можно включить скомпилированную версию пакета непосредственно в файл HTML. Он создаст глобальную переменную ColorTranslator , к которой можно будет получить доступ из любого места вашего кода JavaScript.
- Скопируйте файл JavaScript
colortranslator.web.js, расположенный в папкеdist - Поместите его в предпочитаемую папку на своем веб-сервере
- Включите его в свой HTML-файл
Импорт с использованием CommonJS
const {ColorTranslator, Harmony, Mix} = require ('colortranslator');
Импорт с использованием модулей ES6
импортировать {ColorTranslator, Harmony, Mix} из colortranslator;
Использование в браузере
/ * Используйте его прямо в вашем коде JavaScript * / ColorTranslator; Гармония; Смешивание; / * Или доступ к глобальной переменной, если есть переменная с таким именем в той же области * / окно.ColorTranslator; window.Harmony; window.Mix;
Скрипты
сборка
npm запустить сборку
Транспортирует код TypeScript и создает два пакета в папке dist ( index.js для сред узлов и colortranslator.web.js для использования непосредственно в браузере).
тест
npm run test
Выполняет несколько динамических тестов с преобразованием из / во все доступные цветовые модели (кроме CMYK) с использованием таблицы цветов.
lint
npm run lint
Запускает eslint в исходных файлах.
демо
npm запустить демонстрацию
Открывает сервер разработки, который обеспечивает перезагрузку в реальном времени с помощью webpack-dev-server. Будут показаны некоторые демонстрационные примеры, расположенные в папке @demo . Вы можете изменить код демонстраций, и изменения будут перезагружены в браузере.
API
Примечание: Преобразование в цвет CMYK выполняется с использованием случайного значения черного в качестве основы (в данном случае с использованием большего значения красного, зеленого или синего).Когда предполагается значение черного, остальные цвета могут быть рассчитаны на его основе. Результат будет визуально похож на исходный цвет света, но если вы попытаетесь преобразовать его обратно, вы не получите то же исходное значение.
Вход
Входными данными может быть строка CSS или объект:
Строковые входы CSS
| Пример ввода строки CSS | Описание |
|---|---|
# FF00FF |
Цвет в шестнадцатеричной системе счисления |
# F0F |
Шестнадцатеричное сокращенное обозначение цвета |
# FF00FF80 |
Шестнадцатеричный цвет с альфа-каналом |
RGB (255, 0, 255) |
Функциональное обозначение RGB |
rgba (255, 0, 255, 0.5) |
Функциональная нотация RGB с альфа-каналом |
hsl (300, 100%, 50%) |
Функциональная нотация HSL |
hsla (300, 100%, 50%, 0,5) |
Функциональная нотация HSL с альфа-каналом |
cmyk (0%, 100%, 100%, 0%) |
Функциональное обозначение CMYK с процентами |
cmyk (0, 1, 1, 0) |
Функциональное обозначение CMYK с номерами |
устройство-cmyk (0%, 100%, 100%, 0%) |
Функциональное обозначение CMYK, зависящее от устройства, с процентами |
устройство-cmyk (0, 1, 1, 0) |
Функциональная нотация CMYK, зависящая от устройства, с номерами |
Входы объекта
| Пример ввода объекта | Описание |
|---|---|
{r: "0xFF", g: "0x00", b: "0xFF"} |
Цвет в шестнадцатеричной системе счисления |
{r: "0xF", g: "0x0", b: "0xF"} |
Шестнадцатеричное сокращенное обозначение цвета |
{r: "0xFF", g: "0x00", b: "0xFF", a: "0x80"} |
Шестнадцатеричный цвет с альфа-каналом |
{r: 255, g: 0, b: 255} |
Обозначение RGB |
{r: 255, g: 0, b: 255, a: 0.5} |
Обозначение RGB с альфа-каналом |
{h: 300, s: "100%", l: "50%"} |
Обозначение HSL в процентах |
{h: 300, s: 100, l: 50} |
Обозначение HSL с использованием чисел |
{h: 300, s: "100%", l: "50%", a: 0.5} |
Обозначение HSL с альфой в процентах |
{h: 300, s: 100, l: 50, a: 0,5} |
Обозначение HSL с альфа-каналом с использованием чисел |
{c: "0%", m: "100%", y: "100%", k: "0%"} |
Обозначение CMYK в процентах |
{c: 0, m: 1, y: 1, k: 0} |
Обозначение CMYK с использованием чисел |
Создание экземпляра класса
Можно создать экземпляр класса, используя любой из предыдущих входов:
Примеры создания экземпляров класса
const hex = новый ColorTranslator ('# FF00FF');
const rgb = новый ColorTranslator ('rgb (255, 0, 0)');
const hsl = new ColorTranslator ('hsl (50, 20%, 90%)');
const hsla = новый ColorTranslator ({r: 115, g: 200, b: 150, a: 0.5});
const cmyk = новый ColorTranslator ({c: 100, m: 100, y: 0, k: 0});
Публичные методы класса
Существует 11 связанных общедоступных методов, и все они принимают число в качестве входных данных:
| Общедоступные методы | Вход | Описание |
|---|---|---|
| НАБОР | 0 ≤ вход ≤ 360 | Установить оттенок цвета |
| НАБОР | 0 ≤ вход ≤ 100 | Установите процент насыщенности цвета |
| набор L | 0 ≤ вход ≤ 100 | Установить процент яркости цвета |
| набор R | 0 ≤ вход ≤ 255 | Установить красное значение цвета |
| набор G | 0 ≤ вход ≤ 255 | Установите значение зеленого цвета |
| набор B | 0 ≤ вход ≤ 255 | Установить значение синего цвета |
| комплект C | 0 ≤ вход ≤ 100 | Установите процентное значение голубого CMYK для цвета. |
| набор M | 0 ≤ вход ≤ 100 | Установите процентное значение пурпурного CMYK для цвета. |
| набор | 0 ≤ вход ≤ 100 | Установите процентное значение желтого CMYK для цвета. |
| набор K | 0 ≤ вход ≤ 100 | Установите процентное значение черного CMYK для цвета. |
| комплект A | 0 ≤ вход ≤ 1 | Установить альфа-значение цвета |
Примеры публичных методов класса
Вы также можете обратиться к демонстрации 1 и демонстрации 2, чтобы проверить использование общедоступных методов.
const color = новый ColorTranslator ('# FF00FF');
цвет
.setH (120)
.setS (80)
.setA (0,5);
цвет
.setR (255)
.setG (150)
.setA (0,25);
Класс общедоступных свойств только для чтения
Есть 7 свойств, чтобы получить представление цвета в CSS:
| Объект | Описание |
|---|---|
| ШЕСТИГР. | Получить шестнадцатеричное представление цвета объекта |
| HEXA | Получить шестнадцатеричное представление цвета объекта |
| RGB | Получить объект RGB-представление цвета |
| RGBA | Получить представление объекта rgba цвета |
| HSL | Получить объект hsl-представление цвета |
| HSLA | Получить объект hsla представление цвета |
| CMYK | Получить представление объекта cmyk цвета |
Есть 7 свойств, чтобы получить объектное представление цвета:
| Объект | Описание |
|---|---|
| HEXObject | Получить шестнадцатеричное представление цвета объекта |
| HEXAObject | Получить шестнадцатеричное представление цвета объекта |
| RGB объект | Получить объект RGB-представление цвета |
| RGBAO объект | Получить представление объекта rgba цвета |
| HSLObject | Получить объект hsl-представление цвета |
| HSLAObject | Получить объект hsla представление цвета |
| CMYKObject | Получить представление объекта cmyk цвета |
Есть 11 свойств для получения индивидуальных значений цвета:
| Объект | Описание |
|---|---|
| H | Получить цветовой оттенок |
| S | Получить процент насыщенности цвета |
| л | Получить процент яркости цвета |
| R | Получить значение красного цвета |
| G | Получить значение зеленого цвета |
| B | Получить значение синего цвета |
| С | Получить процентное значение голубого CMYK для цвета |
| M | Получить процентное значение пурпурного CMYK для цвета |
| Y | Получить процентное значение желтого CMYK для цвета |
| К | Получить процентное значение черного CMYK для цвета |
| А | Получить альфа-значение цвета |
Примеры общедоступных свойств классов
Вы также можете просмотреть демонстрацию 1 и демонстрацию 2, чтобы проверить использование общедоступных свойств.
const color = новый ColorTranslator ('# FF00FF');
color.R; // 255
color.G; // 0
цвет.B; // 255
цвет.RGB; // rgb (255,0,255)
color.HSLA; // hsla (300,100%, 50%, 1)
Статические методы класса
Не нужно указывать цветовую модель ввода для любого из методов, API определит формат. Вам нужно только указать, в какую цветовую модель вы хотите преобразовать, вызывая конкретный статический метод.
Доступно 22 статических метода, 7 из них для преобразования цветов, 6 для создания цветовых сочетаний, один для получения оттенков, один для получения оттенков, 6 для смешивания цветов и один для создания цветовых гармоний.
Статические методы преобразования цвета
Статические методы преобразования цветов принимают любой из упомянутых входных параметров в качестве первого параметра. Второй параметр является необязательным и указывает, должен ли вывод быть строкой CSS или объектом:
convertColorStaticMethod ( цвет: строка | объект, css: логическое = истина )
Описание статических методов преобразования цвета
| Статический метод | Описание |
|---|---|
| к HEX | Преобразовать в шестнадцатеричное представление |
| по HEXA | Преобразование в шестнадцатеричную систему счисления с альфа-каналом |
| кRGB | Преобразовать в нотацию RGB |
| toRGBA | Преобразование в нотацию RGB с альфа-каналом |
| по HSL | Преобразовать в нотацию HSL |
| по HSLA | Преобразование в нотацию HSL с альфа-каналом |
| по CMYK | Преобразовать в нотацию CMYK |
Примеры статических методов преобразования цвета
ColorTranslator.toRGB ('# FF00FF'); // rgb (255,0,255)
ColorTranslator.toRGBA ('hsl (50, 20%, 90%)'); // rgba (235,233,224,1)
ColorTranslator.toHSL ('rgb (255, 0, 0)'); // hsl (0,100%, 50%)
ColorTranslator.toHSLA ('rgba (0, 255, 255, 0,5)'); // hsla (180,100%, 50%, 0,5)
ColorTranslator.toCMYK ('# F0F', ложь); // {c: 0, m: 100, y: 0, k: 0}
ColorTranslator.toCMYK ('# F0F'); // cmyk (0%, 100%, 0%, 0%)
ColorTranslator.toRGB ({h: 115, s: '70% ', l: '45%'}); // rgb (48,195,34)
ColorTranslator.toHSLA ({r: 115, g: 200, b: 150, a: 0,5}); // hsla (145,44%, 62%, 0.5)
Вы также можете обратиться к демонстрации 3 и демонстрации 4, чтобы проверить использование этих статических методов.
Статические методы смешивания цветов
Статические методы для создания цветовых смесей принимают любой из упомянутых входных параметров в качестве первого и второго параметра, третий параметр является необязательным и представляет собой количество шагов смешивания, а четвертый параметр также является необязательным и указывает, будет ли выходной цвета должны быть строкой CSS или объектом:
getBlendColorsStaticMethod ( fromColor: строка | объект, toColor: строка | объект, шаги: число = 5, css: логическое = истина )
Описание статических методов смешивания цветов
| Статический метод | Описание |
|---|---|
| getBlendHEX | Создать массив относительно смеси двух цветов в шестнадцатеричной системе счисления |
| getBlendHEXA | Создать массив относительно смеси двух цветов в шестнадцатеричной системе счисления с альфа-каналом |
| getBlendRGB | Создать массив относительно смеси двух цветов в нотации RGB |
| getBlendRGBA | Создать массив относительно наложения двух цветов в нотации RGB с альфа-каналом |
| getBlendHSL | Создать массив относительно смеси двух цветов в нотации HSL |
| getBlendHSLA | Создать массив относительно смеси двух цветов в нотации HSL с альфа-каналом |
Примеры статических методов смешивания цветов
ColorTranslator.getBlendHEX ('# FF0000', '# 0000FF', 5);
// [
// "# FF0000",
// "# BF003F",
// "# 7F007F",
// "# 3F00BF",
// "# 0000FF"
//]
ColorTranslator.getBlendHSLA ('# FF000000', '# 0000FFFF', 3);
// [
// "hsla (0,100%, 50%, 0)",
// "hsla (300,100%, 25%, 0,5)",
// "hsla (240,100%, 50%, 1)"
//]
ColorTranslator.getBlendRGBA ('# F000', 'rgba (0,0,255,1)', 5, ложь);
// [
// {r: 255, g: 0, b: 0, a: 0},
// {r: 191,25, g: 0, b: 63,75, a: 0,25},
// {r: 127,5, g: 0, b: 127,5, a: 0,5},
// {r: 63,75, g: 0, b: 191.25, а: 0,75},
// {r: 0, g: 0, b: 255, a: 1}
//]
Вы также можете обратиться к демонстрации 5, чтобы проверить использование этих статических методов.
Цветовые оттенки и цветовые оттенки статическими методами
Статические методы получения оттенков или оттенков цвета принимают любой из упомянутых входных параметров в качестве первого параметра и второго параметра, который указывает количество оттенков или оттенков, которые должны быть возвращены. Этот метод вернет цвета в том же формате, который был отправлен в качестве входных данных:
getShades ( цвет: строка | объект, оттенки: номер ) getTints ( цвет: строка | объект, оттенки: число )
Цветовые оттенки и цветовые оттенки Описание статических методов
| Статический метод | Описание |
|---|---|
| getShades | Получите оттенки цвета (смешайте цвет с черным, увеличивая его темноту) |
| getTints | Получение оттенков цвета (смешивание цвета с белым для увеличения его яркости) |
Цветовые оттенки и цветовые оттенки примеры статических методов
ColorTranslator.getShades ('# FF0000', 5);
// [
// "# D40000",
// "# AA0000",
// "# 800000",
// "# 550000",
// "# 2A0000"
//]
ColorTranslator.getTints ({r: 255, g: 0, b: 0, a: 0,5}, 5);
// [
// {r: 255, g: 43, b: 43, a: 0,5},
// {r: 255, g: 85, b: 85, a: 0,5},
// {r: 255, g: 128, b: 128, a: 0,5},
// {r: 255, g: 170, b: 170, a: 0,5},
// {r: 255, g: 213, b: 213, a: 0,5}
//]
Вы также можете обратиться к демонстрации 6, чтобы проверить использование этих статических методов.
Статические методы смешивания цветов
Статические методы смешивания цветов принимают массив любого из упомянутых входов в качестве первого параметра.Второй параметр является необязательным и указывает режим микширования (по умолчанию это Mix.ADDITIVE ). Третий параметр также является необязательным и указывает, должен ли вывод быть строкой CSS или объектом:
Примечание: Вычитающее смешение имитирует смешение пигментов, для этого цвета rgb преобразуются в цветовую модель Ryb, в этом режиме выполняется сложение, а в конце результат конвертируется обратно в rgb. Результат в большинстве случаев удовлетворительный, но, поскольку это не настоящая смесь пигментов, иногда результат может отличаться от реальности.
getMixColorsStaticMethod ( цвета: [строка | объект][], режим: Mix = Mix.ADDITIVE, css: логическое = истина )
Описание статических методов смешения цветов
| Статический метод | Описание |
|---|---|
| getMixHEX | Получить сочетание входных цветов в шестнадцатеричной системе счисления |
| getMixHEXA | Получите сочетание входных цветов в шестнадцатеричной системе счисления с альфа-каналом |
| getMixRGB | Получите сочетание входных цветов в нотации RGB |
| getMixRGBA | Получите сочетание входных цветов в нотации RGB с альфа-каналом |
| getMixHSL | Получить сочетание входных цветов в нотации HSL |
| getMixHSLA | Получите сочетание входных цветов в нотации HSL с альфа-каналом |
Примеры статических методов смешивания цветов
ColorTranslator.getMixHEX (['# FF0000', '# 0000FF']);
// # FF00FF
ColorTranslator.getMixHSL (['rgba (255, 0, 0, 1)', '# 00FF00']);
// hsl (60,100%, 50%)
ColorTranslator.getMixHEXA (['# F00', 'rgb (0, 0, 255)'], Mix.ADDITIVE, true);
// {r: '0xFF', g: '0x00', b: '0xFF', a: '0xFF'}
ColorTranslator.getMixHEX (['# FF0', '# F00'], Mix.SUBTRACTIVE);
// # FF7F00
Вы также можете обратиться к демонстрации 7 и демонстрации 8, чтобы проверить использование этих статических методов.
Цветовые гармонии статический метод
Статический метод создания цветовых гармоний принимает три параметра, первый может быть любым из упомянутых входов, второй является необязательным и предназначен для указания типа гармонии (по умолчанию это будет Harmony.ДОПОЛНИТЕЛЬНЫЙ ), а третий также является необязательным и указывает, основана ли возвращаемая гармония на аддитивных или вычитаемых цветах (по умолчанию это будет Mix.ADDITIVE ). Этот метод вернет цвета в том же формате, который был отправлен в качестве входных данных:
getHarmony ( цвет: строка | объект гармония: Гармония = Гармония.ДОПОЛНИТЕЛЬНАЯ, режим: Mix = Mix.ADDITIVE )
Цветовые гармонии статическое описание метода
| Статический метод | Описание |
|---|---|
| getHarmony | Возвращает массив цветов, представляющих запрошенную гармонию.Первый цвет будет таким же, как и входной | .
Доступные ароматы
| Гармония | Описание | Возвращенные цвета |
|---|---|---|
| АНАЛОГОВЫЙ | Возвращает тот же цвет плюс два относительных аналогичных цвета. | 3 |
| ДОПОЛНИТЕЛЬНАЯ | Возвращает тот же цвет плюс относительный дополнительный цвет. | 2 |
| SPLIT_COMPLEMENTARY | Возвращает тот же цвет плюс два относительных разделенных дополнительных цвета. | 3 |
| ПЛОЩАДЬ | Возвращает тот же цвет плюс три относительно равномерно квадратных цвета. | 4 |
| ТЕТРАДИКА | Возвращает тот же цвет плюс три относительных четырехцветных цвета. | 4 |
| TRIADIC | Возвращает тот же цвет плюс два относительно равномерно триадных цвета. | 3 |
Примеры статических методов гармонии цветов
ColorTranslator.getHarmony ('# FF00FF');
// ["# FF00FF", "# 00FF00"]
ColorTranslator.getHarmony ('rgba (0, 255, 255, 0,5)', Harmony.ANALOGOUS);
// [
// "rgba (0,255,255,0.5)",
// "rgba (0,128,255,0.5)",
// "rgba (0,255,128,0.5)"
//]
ColorTranslator.getHarmony ({r: 115, g: 200, b: 150, a: 0,5}, Harmony.COMPLEMENTARY);
// [
// {r: 115, g: 201, b: 151, a: 0,5},
// {r: 201, g: 115, b: 165, a: 0,5}
//]
ColorTranslator.getHarmony ('# FF0000', Harmony.COMPLEMENTARY, Mix.SUBTRACTIVE);
// ["# FF0000", "# 00FF00"]
Вы также можете обратиться к демонстрации 9 и демонстрации 10, чтобы проверить использование этого статического метода.
Поддержка TypeScript
Пакет имеет собственные определения типов, поэтому его можно без проблем использовать в проекте TypeScript . Следующие интерфейсы доступны и могут быть импортированы в ваш проект:
HEXObject
Этот тип возвращается свойствами HEXObject и HEXAObject , toHEX , toHEXA , getBlendHEX , getBlendHEXA , getMixHEX , когда свойство getMixHEX is false ), и метод getHarmony (когда на входе HEXObject или когда на входе строка и в метод отправляется Generic с этим типом).
interface HEXObject {
r: строка;
г: строка;
b: строка;
строка;
}
RGBObject
Этот тип возвращается свойствами RGBObject и RGBAObject , toRGB , toRGBA , getBlendRGB , getBlendRGBA , getMixRGB , когда свойство getMixRGB и getMixRGB методы is false ), и метод getHarmony (когда входом является RGBObject или когда вход представляет собой строку и в метод отправляется Generic с этим типом).
interface RGBObject {
r: число;
г: число;
б: число;
число;
}
HSLObject
Этот тип возвращается свойствами HSLObject и HSLAObject , toHSL , toHSLA , getBlendHSL , getBlendHSLA , getMixHSL , когда свойство getMixHSL is false ), и метод getHarmony (когда на входе HSLObject или когда на входе строка и в метод отправляется Generic с этим типом).
interface HSLObject {
h: число;
s: число;
l: число;
число;
}
CMYKObject
Этот тип возвращается свойством CMYKObject и методом toCMYK .
interface CMYKObject {
c: число;
м: число;
y: число;
k: число;
}
, цвет #FFFFFFF | Sololearn: научитесь программировать БЕСПЛАТНО!
Шестнадцатеричный код цвета немного интересен! Шестнадцатеричный = 6 и десятичный = 10, поэтому шестнадцатеричный = 16.Он начинается с 00 и заканчивается на FF. Посмотрим: 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE, FF Здесь, 00 — самое низкое значение, что означает отсутствие цвета. FF — это максимальное значение, означающее, что цвет полный. От 11 до EE значение идет от меньшего к большему. Шестнадцатеричный цвет в сочетании с 3-мя основными цветами: красным, зеленым, синим. Последовательность: красный> зеленый> синий. Он помечается знаком #. Поиграем с этим: # 000000 (какой будет цвет?) — Красный 00, Зеленый 00, Синий 00. Таким образом, нет ни красного, ни зеленого, ни синего.Поскольку цвета нет, он будет темным. Итак, ответ — «черный». #FFFFFF (какой будет цвет?) — Красный FF, Зеленый FF, Синий FF. так что там полно красного, зеленого и синего. Так как есть полные цвета, он будет ярким / светлым. Итак, ответ — «белый». # FF0000 (какой будет цвет?) -Это красный, легко, правда? # 00FF00 (какой будет цвет?) — Зеленый. # 0000FF (какой будет цвет?) — Синий. # 888888 (какой будет цвет?) — Серый. Когда все количество красного, зеленого и синего равно между наибольшим значением FF и наименьшим значением 00.# 00FFFF (какой будет цвет?) — Голубой. Нет красного, полностью зеленого и полностью синего. # FF00FF — пурпурный (красный + синий). # FF0088 — Deep Pink (красный + 1/2 синий). # FFFF00 — желтый (красный + зеленый). # FF8800 — темно-оранжевый (красный + 1/2 зеленого). #FFCCCC — бледно-красный (красный + 3/4 зеленого + 3/4 синего). Примечание: мы можем написать #FFF вместо #FFFFFF. Смешайте цвета друг с другом и поиграйте с ними. Я чертовски уверен, что вам это понравится!
Шестнадцать именованных цветов, определяемых по имени, шестнадцатеричному, десятичному и процентному
Шестнадцать названных цветов
HTML 3.2 спецификации определили шестнадцать названий цветов для использования в атрибуте HTML. Они стали «шестнадцатью названными цветами», которые могут использоваться по имени для определения цвета в HTML, а теперь и в каскадных таблицах стилей.На этой странице показаны таблицы шестнадцати цветов с образцами. указывается именем, шестнадцатеричным кодом, десятичным кодом, процентами и HSL (оттенок, насыщенность и свет).
| Шестнадцать названных цветов, определенных с именем | |||||
|---|---|---|---|---|---|
| aqua aqua | черный черный | синий синий | фуксия фуксия | ||
| серый серый | салатовый | 4 зеленый лайм 24 | бордовый бордовый | ||
| темно-синий темно-синий | оливковый оливковый | фиолетовый фиолетовый | красный красный | ||
| серебристый серебристый | бирюзовый бирюзовый | белый | 38 желтый желтый | белый желтый | белый |
| Шестнадцать названных цветов, заданных в шестнадцатеричном формате | |||
|---|---|---|---|
| aqua # 00FFFF | черный # 000000 | синий # 0000FF | фуксия # FF00FF |
| зеленый # 008000 | лайм # 00FF00 | бордовый # 800 000 | |
| темно-синий # 000080 | оливковый # 808000 | фиолетовый # 800080 | красный # FF0000 |
| серебристый # C0C0C0 | бирюзовый # 0080FF80 38 # | желтый # FFFF00 | |
| Шестнадцать именованных цветов, указанных с десятичным числом в атрибуте стиля | |||
|---|---|---|---|
| aqua RGB (0,255,255) | черный RGB (0,0,0) | синий RGB (0,0,255) | фуксия RGB (255,0,255) |
| серый RGB ( 128,128,128) | зеленый RGB (0,128,0) | салатовый RGB (0,255,0) | бордовый RGB (128,0,0) |
| темно-синий RGB (0,0,128) | оливковый RGB (128,128,0) | фиолетовый RGB (128,0,128) | красный RGB (255,0,0) |
| серебро RGB (192,192,192) | бирюзовый RGB (0,128,128) | белый rgb (255,255,255) | желтый rgb (255,255,0) |
| Шестнадцать именованных цветов, заданных процентом в атрибуте стиля | |||
|---|---|---|---|
| аква RGB (0%, 100%, 100%) | черный RGB (0%, 0%, 0%) | синий RGB (0%, 0%, 100%) | фуксия RGB (100%, 0%, 100%) |
| серый RGB (50%, 50%, 50%) | зеленый RGB (0%, 50%, 0%) | салатовый RGB ( 0%, 100%, 0%) | бордовый RGB (50%, 0%, 0%) |
| темно-синий RGB (0%, 0%, 50%) | оливковый RGB (50%, 50%, 0%) | фиолетовый RGB (50%, 0%, 50%) | красный RGB (100%, 0%, 0%) |
| серебро RGB (75%, 75%, 75%) | бирюзовый RGB (0%, 50%, 50%) | белый RGB (100%, 100%, 100%) | желтый RGB (100%, 100%, 0%) |
| Шестнадцать именованных цветов, заданных кодом HSL (оттенок, насыщенность, свет) в атрибуте стиля (Примечание: не все браузеры поддерживают этот способ определения цвета.) | |||
|---|---|---|---|
| aqua hsl (180,100%, 50%) | черный hsl (0,0%, 0%) | синий hsl (240,100%, 50%) | фуксия hsl (300,100%, 50%) |
| серый hsl (0,0%, 50%) | зеленый hsl (120,100%, 25%) | лайм hsl (120,100%, 50%) | бордовый hsl (0,100%, 25 %) |
| темно-синий hsl (240,100%, 25%) | оливковый hsl (60,100%, 25%) | фиолетовый hsl (300,100%, 25%) | красный hsl (0,100%, 50 %) |
| серебро hsl (0,0%, 75%) | бирюзовый hsl (180,100%, 25%) | белый hsl (0,0%, 100%) | желтый hsl ( 60,100%, 50%) |
Диапазон оттенков пурпурного цвета, список названий цветов пурпурных цветов, HEX, RGB, HSL
На этой и следующих страницах показан набор цветов с их названиями,
структурированы шестнадцатью заранее определенными диапазонами оттенков и диапазоном
наборы упорядочены по яркости.Для пурпурного цвета диапазон оттенков от 281 ° до 320 ° был
определенный.
Диапазон оттенков сине-пурпурного << назад
следующая >> Диапазон оттенков пурпурно-розовый
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Диапазон оттенков сине-пурпурного << назад
следующая >> Пурпурно-розовый диапазон оттенков
Советы:
Просмотрите полноэкранный режим (обычно нажмите клавишу [F11]), чтобы уменьшить цветовые искажения.