Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Использование цвета - одна из фундаментальных форм человеческого восприятия. Дети экспериментируют с цветом еще до того, как начинают осмысленно рисовать. Возможно, именно поэтому цвет - одна из первых вещей, с которой люди хотят экспериментировать, изучая web-технологии. Включая CSS, существует множество способов добавить цвет к вашим HTML элементам , чтобы придать им тот вид, который вы хотите. Эта статья дает базовые представления о всех способах использования цвета с помощью CSS в HTML.

К счастью, использование цветов в HTML - процесс простой, и вы можете добавить цвет почти ко всему.

Мы опишем большинство случаев, когда вам может понадобиться цвет, включая список того, что может иметь цвет и какие свойства CSS для этого использовать, как задать конкретный цвет, и как  использовать цвет в таблицах стилей и скриптах. Мы также коснемся того, как позволить пользователю выбрать цвет.

Затем мы кратко обсудим, как выбрать подходящие цвета, учитывая потребности людей с различными визуальными возможностями.

Что может иметь цвет

На уровне элементов в HTML почти все может иметь цвет. Рассмотрим вопрос с точки зрения отдельных составляющих элементов, таких как текст и границы, фон и т.д. Для каждого из них есть ряд цветовых свойств CSS.

На общем уровне свойство color определяет цвет переднего плана элемента HTML, а свойство background-color определяет цвет фона элемента. Они действуют практически для любого элемента.

Текст

Эти свойства используются для определения цвета текста, его фона и любых украшений в тексте.

color
Свойство color используется для текста и любых украшений текста (например, подчеркивания, линий над текстом, перечеркивания и т. д.).
background-color
Цвет фона текста.
text-shadow
Настраивает эффект тени для текста. Один из вариантов - базовый цвет тени (который затем размывается и смешивается с фоном на основе других параметров). См. Text drop shadows в Fundamental text and font styling , чтобы узнать больше.
text-decoration-color
По умолчанию, текстовые украшения (такие как подчеркивание, зачеркивание и т.д.) используют для своего цвета свойство color. Но вы можете задать для них собственный цвет, применив свойство text-decoration-color.
text-emphasis-color
Цвет, используемый для выделения специальных диакритических символов у каждого знака текста. Это свойство используется для восточноазиатских языков.
caret-color
Цвет, используемый при рисовании caret (иногда называемый курсором ввода текста) внутри элемента. Это полезно только для редактируемых элементов, например <input> и <textarea> или элементов, для которых установлен HTML атрибут contenteditable .

Блоки

Каждый элемент представляет собой прямоугольный блок с каким-то содержимым, фоном и границей.

Borders
См. раздел Borders со списком свойств CSS для задания цвета границ блока.
background-color
Цвет фоновых областей блока.
column-rule-color
Цвет строки, разделяющей столбцы текста.
outline-color
Цвет контура вокруг границы элемента. Этот контур отличается от границы тем, что он не занимает место в документе. Обычно используется как рамка-индикатор, чтобы показать, что элемент находится в фокусе.

Границы

Любой элемент может иметь границу (border), обрамляющую содержимое элемента. См. Box properties в The box model, чтобы получить представление о конкретных видах границ для различных элементов. См. Styling borders using CSS, чтобы узнать больше о применении стилей к границам.

Вы можете использовать свойство border, чтобы задать сразу несколько свойств границы  (включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style) - сплошная - solid, шриховая - dashed, etc.), и т.д.

border-color
Задает единый цвет для всех сторон границы элемента.
border-left-color, border-right-color, border-top-color, and border-bottom-color
Позволяет установить цвет соответствующей стороны границы элемента: border-left-color - левая граница, border-right-color - правая, border-top-color - верхняя, border-bottom-color - нижняя.
border-block-start-color and border-block-end-color
С помощью этих свойств вы можете установить цвет для границ у начала и конца блока. Для письменности "слева направо" начало  - верхний край, а конец - нижний. Не путайте с началом и концом строки, т.е левой и правой сторонами.
border-inline-start-color and border-inline-end-color
Эти свойства определяют цвет границы у начала и конца строк текста. Какая именно сторона, будет определяться в зависимости от свойств writing-mode, direction, и text-orientation, которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, border-inline-start-color применяется к правой границе.

Прочие пути использования цвета

CSS не единственная web-технология, поддерживающая цвет.

HTML Canvas API
Позволяет использовать растровую 2D графику в элементе <canvas>. См. Canvas tutorial для дополнительной информации.
SVG (Scalable Vector Graphics - Масштабируемая Векторная Графика)
Позволяет отображать изображения с помощью команд, которые рисуют конкретные фигуры, узоры и линии. Команды SVG отформатированы как XML и могут быть встроены непосредственно в веб-страницу или могут быть размещены на его странице, используя элемент <img>, как и любой другой тип изображения.
WebGL
Библиотека веб-графики WebGL является API-интерфейсом OpenGL ES для создания высокопроизводительной 2D и 3D графики в Web. См. Learn WebGL for 2D and 3D для дополнительной информации.

Как задать цвет

Для того чтобы задать цвет в CSS, вам необходимо найти способ как перевести понятие "цвета" в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.

Подробнее о каждом значения цвета, можно прочитать в статье про CSS <color>.

Ключевые слова

Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (red), синий (blue), или оранжевый (orange)), оттенки серого (от черного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светлосерый (lightgrey), а также множество других смешаных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

См. Color keywords в <color> - полный перечень всех доступных ключевых слов.

RGB значения

Есть три способа передачи RGB цвета в CSS.

Шестнадцатиричная запись в виде строки

Шестнадцатиричная запись передает цвет, используя шестнадцатричные числа, которые передают каждый компонент цвета (красный, зеленый и синий). Запись также может включать четвертый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 - 0xFF) или, опционально, как число от 0 до 15 (0x0 - 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет расчитывается используя число каждого компонента дважды: "#D" превращается в "#DD".

Цвет в шестнадцатиричной записи всегда начинается с символа "#". После него начинаются шестнадцатричные числа цветового кода. Запись не зависит от регистра.

"#rrggbb"
Задает полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатиричным числом 0xrr, зеленого - 0xgg и синего - 0xbb.
"#rrggbbaa"
Задает цвет, у которого компонент красного представлен шестнадцатиричным числом 0xrr, зеленого - 0xgg и синего - 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
"#rgb"
Задает цвет, у которого компонент красного представлен шестнадцатиричным числом 0xrr, зеленого - 0xgg и синего - 0xbb.
"#rgba"
Задает цвет, у которого компонент красного представлен шестнадцатиричным числом 0xrr, зеленого - 0xgg и синего - 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.

Например, вы можете представить непрозрачный ярко-синий цвет как "#0000ff" или "#00f". Для того, чтобы сделать его на 25% прозачным, вы можете использовать "#0000ff44" или "#00f4".

RGB запись в виде функции

RGB запись в виде функции, как и шестнадцатиричная запись, представляет цвет, используя красный, зеленый и синий компоненты (также, опцинально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb(). Данная функция принимает как вводные параметры значения красного, зеленого и синего компонентов и, опционально, четвертого компонента - значение альфа канала.

Допустимые значения для каждого из этих параметров:

red, green, и blue
Каждый параметр должен иметь <integer> значение между 0 и 255 (включительно), или <percentage> от 0% до 100%.
alpha
Альфа канал - это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% - 1.0.

Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%).

HSL нотация

Дизайнеры часто предпочитают использовать HSL метод - Hue (оттенок) / Saturation(насыщенность) / Luminosity (светлота). В сети HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.

HSL color cylinder
Figure 1. An HSL color cylinder. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.

The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any <angle> unit supported by CSS, including degrees (deg), radians (rad), gradians (grad), or turns (turn). But this doesn't control how vivid or dull, or how bright or dark the color is.

The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

Think of it like creating the perfect paint color:

  1. You start with base paint that's the maximum intensity possible for a given color, such as  the most intense blue that can be represented by the user's screen. This is the hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
  2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.
  3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.

You can also optionally include an alpha channel, to make the color less than 100% opaque.

Here are some sample colors in HSL notation:

Note that when you omit the hue's unit, it's assumed to be in degrees (deg).

Использование цвета

Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under Things that can have color, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a stylesheet, and adding and changing color using JavaScript code to alter the styles of elements.

Specifying colors in stylesheets

The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.

Let's take a look at an example, starting by looking at the results we're trying to achieve:

HTML

The HTML responsible for creating the above example is shown here:

<div class="wrapper">
  <div class="box boxLeft">
    <p>
      This is the first box.
    </p>
  </div>
  <div class="box boxRight">
    <p>
      This is the second box.
    </p>
  </div>
</div>

This is pretty simple, using a <div> as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph (<p>) in each box.

The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

CSS

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

The .wrapper class is used to assign styles to the <div> that encloses all of our other content. This establishes thesize of the container using width and height as well as its margin and padding.

Of more interest to our discussion here is the use of the border property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color mediumturquoise.

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using display: flex, and set both justify-content and align-items to center. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

The .boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

  • The box's background color is set by changing the value of the CSS background-color property to rgb(245, 130, 130).
  • An outline is defined for the box. Unlike the more commonly used border, outline doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as border does. This outline is a solid, dark red line that's two pixels thick. Note the use of the darkred keyword when specifying the color.
  • Notice that we're not explicitly setting the text color. That means the value of color will be inherited from the nearest containing element that defines it. By default, that's black.
.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

Finally, the .boxRight class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:

  • The background-color is set using the HSL value specified using hsl(270deg, 50%, 75%). This is a medium purple color.
  • The box's outline is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (rgb(110, 20, 120)).
  • The foreground (text) color is specified by setting the color property to hsl(0deg, 100%, 100%). This is one of many ways to specify the color white.
  • We add a green wavy line under the text with text-decoration.
  • Finally, a bit of a shadow is added to the text using text-shadow. Its color parameter is set to black.

Letting the user pick a color

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 <input> element, by using "color" as the value of its type attribute.

The <input> 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.

HTML

The HTML here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we'll output some text from our JavaScript code.

<div id="box">
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff" id="colorPicker">
  <p id="output"></p>
</div>

CSS

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...

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}

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 <input type="color"> element.

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
  output.innerText = "Color set to " + colorPicker.value + ".";
}, false);

The input 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 event is received when the color picker's value is finalized. We respond by setting the contents of the <p> 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:

  • A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
  • A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.
  • Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

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.

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

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:

Right after loading Paletton.

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

After entering base color

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

Now with complementary colors included.

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:

Triad color scheme selected

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

Triad color scheme selected

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.

See also

Метки документа и участники

Внесли вклад в эту страницу: ChristinaKrapivina, warsan, kasperyan
Обновлялась последний раз: ChristinaKrapivina,