H2 color red что в этом css коде является свойством
Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.
По шестнадцатеричному значению
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
По названию
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
| Имя | Цвет | Код | RGB | HSL | Описание |
|---|---|---|---|---|---|
| white | #ffffff или #fff | rgb(255,255,255) | hsl(0,0%,100%) | Белый | |
| silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Серый | |
| gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Темно-серый | |
| black | #000000 или #000 | rgb(0,0,0) | hsl(0,0%,0%) | Черный | |
| maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Темно-красный | |
| red | #ff0000 или #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Красный | |
| orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Оранжевый | |
| yellow | #ffff00 или #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Желтый | |
| olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Оливковый | |
| lime | #00ff00 или #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Светло-зеленый | |
| green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зеленый | |
| aqua | #00ffff или #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Голубой | |
| blue | #0000ff или #00f | rgb(0,0,255) | hsl(240,100%,50%) | Синий | |
| navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Темно-синий | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Сине-зеленый | |
| fuchsia | #ff00ff или #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Розовый | |
| purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Фиолетовый |
С помощью RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Применение цвета к HTML-элементам с помощью CSS
К счастью, присвоить цвет к HTML-элементу очень просто, и это можно сделать практически со всеми элементами.
Завершим мы статью размышлениями на тему как использовать цвет с умом: как выбрать подходящий цвет, учитывая потребности людей с различными визуальными способностями.
Что может иметь цвет
На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет.
Текст
Эти свойства используются для определения цвета текста, его фона и любого оформления текста.
color (en-US) Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д. background-color Цвет фона текста. text-shadow
Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.
Цвет, который используется для каретки (caret (en-US) ) (курсора ввода текста). Применимо только к редактируемым элементам, таким как и
Блоки
Каждый элемент представляет собой прямоугольный блок с каким-то содержимым, фоном и границей.
borders См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока. background-color Цвет фона блока. column-rule-color Цвет линий, которые разделяют колонки текста. outline-color (en-US) Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.
Границы
Вокруг любого элемента можно создать границу, т.е. линию вокруг содержимого элемента. См. Box properties в The box model, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS, чтобы узнать больше про то, как применять стили к границам.
Как можно ещё использовать цвет
CSS не единственная web-технология, которая поддерживает цвет.
Как задать цвет
Для того чтобы задать цвет в CSS, необходимо найти способ как перевести понятие «цвета» в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.
Ключевые слова
RGB значения
Есть три способа передачи RGB цвета в CSS.
Шестнадцатеричная запись в виде строки
RGB запись в виде функции
Допустимые значения для каждого из этих параметров:
HSL запись в виде функции
Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).
Подумайте об этом как о создании идеального цвета краски:
Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.
Вот несколько примеров цвета в HSL записи:
Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах ( deg ).
Использование цвета
Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US) ) и добавлять, изменять цвет, используя JavaScript код.
Цвет в таблицах стилей CSS
Давайте начнём наш пример с результата, который нам нужно достичь:
HTML, который создаёт вышеупомянутый пример:
Все довольно просто: первый
) и имеет свой стиль.
Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML-элементам..
CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.
Предоставляем возможность пользователю выбрать цвет
There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the element, by using «color» as the value of its type attribute.
The element represents a color only in the hexadecimal string notation covered above.
Example: Picking a color
Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.
On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.
The HTML here creates a box that contains a color picker control (with a label created using the element) and an empty paragraph element (
) into which we’ll output some text from our JavaScript code.
The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below.
JavaScript
The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the element.
The input (en-US) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.
The change (en-US) event is received when the color picker’s value is finalized. We respond by setting the contents of the
element with the ID «output» to a string describing the finally selected color.
Using color wisely
Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.
Finding the right colors
Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.
Base color
The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:
When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.
The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.
Fleshing out the palette
Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.
A few examples (all free to use as of the time this list was last revised):
When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.
Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.
Color theory resources
A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:
Color Science (Khan Academy in association with Pixar) An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers. Color theory on Wikipedia Wikipedia’s entry on color theory, which has a lot of great information from a technical perspective. It’s not really a resource for helping you with the color sleection process, but is still full of useful information.
Color and accessibility
There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.
You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.
The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.
For more information about color blindness, see the following articles:
Palette design example
Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.
Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:
Next, we enter our color’s hex code ( D79C7A ) into the «Base RGB» box at the bottom-left corner of the tool:
If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:
Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.
Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.
2.13. CSS-цвета
Свойство color
1. Приоритетные цвета: свойство color
Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство описывает цвет текстового содержимого элемента. Кроме того, оно используется для предоставления потенциального косвенного значения (currentColor) для любых других свойств, которые принимают значения цвета.
| color | |
|---|---|
| Значения: | |
| цвет | Задаётся с помощью значений цвета. |
| inherit | Наследует значение свойства от родительского элемента. |
2. Значения цвета
2.1. Основные ключевые слова
Список основных ключевых слов включает в себя следующие значения:
| Название | HEX | RGB | Цвет |
|---|---|---|---|
| black | #000000 | 0,0,0 | |
| silver | #C0C0C0 | 192,192,192 | |
| gray | #808080 | 128,128,128 | |
| white | #FFFFFF | 255,255,255 | |
| maroon | #800000 | 128,0,0 | |
| red | #FF0000 | 255,0,0 | |
| purple | #800080 | 128,0,128 | |
| fuchsia | #FF00FF | 255,0,255 | |
| green | #008000 | 0,128,0 | |
| lime | #00FF00 | 0,255,0 | |
| olive | #808000 | 128,128,0 | |
| yellow | #FFFF00 | 255,255,0 | |
| navy | #000080 | 0,0,128 | |
| blue | #0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| aqua | #00FFFF | 0,255,255 |
Названия цветов не чувствительны к регистру.
2.2. Числовые значения цвета
2.2.1. Цвета модели RGB
Символы пробела допускаются вокруг числовых значений.
Все цвета RGB указываются в цветовом пространстве sRGB. Пользовательские агенты могут различаться в точности, с которой они представляют эти цвета, но использование sRGB дает однозначное и объективно измеримое определение того, каким должен быть цвет.
Значения за пределами диапазона устройства должны быть обрезаны или отображены в известном диапазоне: значения красного, зеленого и синего необходимо изменить, чтобы они попадали в диапазон, поддерживаемый устройством. Некоторые устройства, например принтеры, имеют диапазоны, отличные от sRGB, поэтому некоторые цвета за пределами диапазона 0..255 sRGB будут представимы (внутри диапазона устройства) и будут отображаться.
2.2.2. Цвета модели RGBA
Параметр непрозрачности применяется ко всему объекту. Любые значения за пределами диапазона от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) будут ограничены этим диапазоном.
2.2.3. Ключевое слово transparent
2.2.4. HSL-цвета
Цвета RGB не интуитивно понятны. CSS3 добавляет числовые цвета hue-saturation-lightness (HSL) в дополнение к числовым цветам RGB. HSL-цвета симметричны свету и темноте, и преобразование HSL в RGB максимально просто.
Цвета HSL кодируются как тройка (оттенок, насыщенность, яркость). Оттенок представлен как угол цветного круга (то есть радуга, представленная в круге). Этот угол обычно измеряется в градусах, так что эта единица измерения неявна в CSS; синтаксически дается только число. По определению красный = 0 = 360, а остальные цвета распределены по кругу, поэтому зеленый = 120, синий = 240 и т.д. Насыщенность и яркость представлены в процентах. 100% — это полное насыщение, а 0% — это оттенок серого. Яркость 0% — черная, 100% — белая, а 50% — нормальная.
2.2.5. HSLA-значения цвета
2.3. Расширенные ключевые слова цвета
В таблице ниже представлен список цветов, поддерживаемых популярными браузерами.
| Название | HEX | RGB | Цвет |
|---|---|---|---|
| aliceblue | #F0F8FF | 240,248,255 | |
| antiquewhite | #FAEBD7 | 250,235,215 | |
| aqua | #00FFFF | 0,255,255 | |
| aquamarine | #7FFFD4 | 127,255,212 | |
| azure | #F0FFFF | 240,255,255 | |
| beige | #F5F5DC | 245,245,220 | |
| bisque | #FFE4C4 | 255,228,196 | |
| black | #000000 | 0,0,0 | |
| blanchedalmond | #FFEBCD | 255,235,205 | |
| blue | #0000FF | 0,0,255 | |
| blueviolet | #8A2BE2 | 138,43,226 | |
| brown | #A52A2A | 165,42,42 | |
| burlywood | #DEB887 | 222,184,135 | |
| cadetblue | #5F9EA0 | 95,158,160 | |
| chartreuse | #7FFF00 | 127,255,0 | |
| chocolate | #D2691E | 210,105,30 | |
| coral | #FF7F50 | 255,127,80 | |
| cornflowerblue | #6495ED | 100,149,237 | |
| cornsilk | #FFF8DC | 255,248,220 | |
| crimson | #DC143C | 220,20,60 | |
| cyan | #00FFFF | 0,255,255 | |
| darkblue | #00008B | 0,0,139 | |
| darkcyan | #008B8B | 0,139,139 | |
| darkgoldenrod | #B8860B | 184,134,11 | |
| darkgray | #A9A9A9 | 169,169,169 | |
| darkgreen | #006400 | 0,100,0 | |
| darkkhaki | #BDB76B | 189,183,107 | |
| darkmagenta | #8B008B | 139,0,139 | |
| darkolivegreen | #556B2F | 85,107,47 | |
| darkorange | #FF8C00 | 255,140,0 | |
| darkorchid | #9932CC | 153,50,204 | |
| darkred | #8B0000 | 139,0,0 | |
| darksalmon | #E9967A | 233,150,122 | |
| darkseagreen | #8FBC8F | 143,188,143 | |
| darkslateblue | #483D8B | 72,61,139 | |
| darkslategray | #2F4F4F | 47,79,79 | |
| darkturquoise | #00CED1 | 0,206,209 | |
| darkviolet | #9400D3 | 148,0,211 | |
| deeppink | #FF1493 | 255,20,147 | |
| deepskyblue | #00BFFF | 0,191,255 | |
| dimgray | #696969 | 105,105,105 | |
| dodgerblue | #1E90FF | 30,144,255 | |
| firebrick | #B22222 | 178,34,34 | |
| floralwhite | #FFFAF0 | 255,250,240 | |
| forestgreen | #228B22 | 34,139,34 | |
| fuchsia | #FF00FF | 255,0,255 | |
| gainsboro | #DCDCDC | 220,220,220 | |
| ghostwhite | #F8F8FF | 248,248,255 | |
| gold | #FFD700 | 255,215,0 | |
| goldenrod | #DAA520 | 218,165,32 | |
| gray | #808080 | 128,128,128 | |
| green | #008000 | 0,128,0 | |
| greenyellow | #ADFF2F | 173,255,47 | |
| honeydew | #F0FFF0 | 240,255,240 | |
| hotpink | #FF69B4 | 255,105,180 | |
| indianred | #CD5C5C | 205,92,92 | |
| indigo | #4B0082 | 75,0,130 | |
| ivory | #FFFFF0 | 255,255,240 | |
| khaki | #F0E68C | 240,230,140 | |
| lavender | #E6E6FA | 230,230,250 | |
| lavenderblush | #FFF0F5 | 255,240,245 | |
| lawngreen | #7CFC00 | 124,252,0 | |
| lemonchiffon | #FFFACD | 255,250,205 | |
| lightblue | #ADD8E6 | 173,216,230 | |
| lightcoral | #F08080 | 240,128,128 | |
| lightcyan | #E0FFFF | 224,255,255 | |
| lightgoldenrodyellow | #FAFAD2 | 250,250,210 | |
| lightgray | #D3D3D3 | 211,211,211 | |
| lightgreen | #90EE90 | 144,238,144 | |
| lightpink | #FFB6C1 | 255,182,193 | |
| lightsalmon | #FFA07A | 255,160,122 | |
| lightseagreen | #20B2AA | 32,178,170 | |
| lightskyblue | #87CEFA | 135,206,250 | |
| lightslategray | #778899 | 119,136,153 | |
| lightsteelblue | #B0C4DE | 176,196,222 | |
| lightyellow | #FFFFE0 | 255,255,224 | |
| lime | #00FF00 | 0,255,0 | |
| limegreen | #32CD32 | 50,205,50 | |
| linen | #FAF0E6 | 250,240,230 | |
| magenta | #FF00FF | 255,0,255 | |
| maroon | #800000 | 128,0,0 | |
| mediumaquamarine | #66CDAA | 102,205,170 | |
| mediumblue | #0000CD | 0,0,205 | |
| mediumorchid | #BA55D3 | 186,85,211 | |
| mediumpurple | #9370DB | 147,112,219 | |
| mediumseagreen | #3CB371 | 60,179,113 | |
| mediumslateblue | #7B68EE | 123,104,238 | |
| mediumspringgreen | #00FA9A | 0,250,154 | |
| mediumturquoise | #48D1CC | 72,209,204 | |
| mediumvioletred | #C71585 | 199,21,133 | |
| midnightblue | #191970 | 25,25,112 | |
| mintcream | #F5FFFA | 245,255,250 | |
| mistyrose | #FFE4E1 | 255,228,225 | |
| moccasin | #FFE4B5 | 255,228,181 | |
| navajowhite | #FFDEAD | 255,222,173 | |
| navy | #000080 | 0,0,128 | |
| oldlace | #FDF5E6 | 253,245,230 | |
| olive | #808000 | 128,128,0 | |
| olivedrab | #6B8E23 | 107,142,35 | |
| orange | #FFA500 | 255,165,0 | |
| orangered | #FF4500 | 255,69,0 | |
| orchid | #DA70D6 | 218,112,214 | |
| palegoldenrod | #EEE8AA | 238,232,170 | |
| palegreen | #98FB98 | 152,251,152 | |
| paleturquoise | #AFEEEE | 175,238,238 | |
| palevioletred | #DB7093 | 219,112,147 | |
| papayawhip | #FFEFD5 | 255,239,213 | |
| peachpuff | #FFDAB9 | 255,218,185 | |
| peru | #CD853F | 205,133,63 | |
| pink | #FFC0CB | 255,192,203 | |
| plum | #DDA0DD | 221,160,221 | |
| powderblue | #B0E0E6 | 176,224,230 | |
| purple | #800080 | 128,0,128 | |
| red | #FF0000 | 255,0,0 | |
| rosybrown | #BC8F8F | 188,143,143 | |
| royalblue | #4169E1 | 65,105,225 | |
| saddlebrown | #8B4513 | 139,69,19 | |
| salmon | #FA8072 | 250,128,114 | |
| sandybrown | #F4A460 | 244,164,96 | |
| seagreen | #2E8B57 | 46,139,87 | |
| seashell | #FFF5EE | 255,245,238 | |
| sienna | #A0522D | 160,82,45 | |
| silver | #C0C0C0 | 192,192,192 | |
| skyblue | #87CEEB | 135,206,235 | |
| slateblue | #6A5ACD | 106,90,205 | |
| slategray | #708090 | 112,128,144 | |
| snow | #FFFAFA | 255,250,250 | |
| springgreen | #00FF7F | 0,255,127 | |
| steelblue | #4682B4 | 70,130,180 | |
| tan | #D2B48C | 210,180,140 | |
| teal | #008080 | 0,128,128 | |
| thistle | #D8BFD8 | 216,191,216 | |
| tomato | #FF6347 | 255,99,71 | |
| turquoise | #40E0D0 | 64,224,208 | |
| violet | #EE82EE | 238,130,238 | |
| wheat | #F5DEB3 | 245,222,179 | |
| white | #FFFFFF | 255,255,255 | |
| whitesmoke | #F5F5F5 | 245,245,245 | |
| yellow | #FFFF00 | 255,255,0 | |
| yellowgreen | #9ACD32 | 154,205,50 |
