Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Как изменить цвет в HTML – текст, фон и границы
Contents
[
Hide
Show
]Цвета HTML применяются с помощью CSS-свойств, таких как color, background-color и border-color. Вы можете использовать имена цветов, HEX, RGB, RGBA, HSL или HSLA в зависимости от того, что важнее в задаче – читаемость, точность или прозрачность.
Как использовать цвет в HTML
Дизайн не является основной функцией HTML, поэтому специального HTML-тега для цвета не существует. Однако изменить цвет текста можно несколькими способами:
Использовать встроенный атрибут
style. Добавление цвета на веб-страницу относится к встроенному CSS-стилю. Чтобы задать цвет текста или фона в HTML, используйте атрибутstyle. Его можно применять к HTML-элементам, таким как<body>,<p>,<table>,<div>,<h1>или<h2>. Учитывайте, что атрибутstyleпереопределяет совпадающие стили, заданные в HTML-теге<style>или во внешней таблице стилей.Использовать внутренний CSS. Внутренний CSS полезен, когда нужно применить свойства к отдельной странице, разместив стили в элементе
<style>внутри<head>HTML-документа.Использовать значения цвета. Традиционные веб-форматы цвета, такие как HEX, RGB, RGBA, HSL и HSLA, оптимизированы для цифровых экранов и широко применяются в HTML и CSS. CSS Color Module Level 4 также определяет расширенные функции цвета, такие как
lab(),lch(),oklab(),oklch()иcolor(), но их поддержка зависит от браузера и среды рендеринга.
В таблице ниже показано, какие CSS-свойства используются в примерах для типичных задач с цветом HTML:
| Задача с цветом HTML | CSS-свойство | Примечание |
|---|---|---|
| Изменить цвет текста | color | Задает цвет переднего плана для текста и оформления текста. |
| Изменить цвет фона элемента | background-color | Задает фон за содержимым и внутренними отступами элемента. |
| Изменить фон всей страницы | background-color у <body> | Применяет цвет фона к телу документа. |
| Изменить цвет границы | border-color вместе с border-style | border-color виден только тогда, когда задан стиль границы, например solid. |
Как изменить цвет текста в HTML
Чтобы изменить цвет текста, можно использовать встроенный атрибут style или элемент <style>, а затем задать значение с помощью свойства color. Свойство color задает цвет переднего плана для текста элемента и оформления текста. Свойство color принимает имена цветов HTML, значения RGB, RGBA, HEX, HSL или HSLA.
Использование имен цветов
Имя цвета обозначает конкретный цвет HTML. Стандартизированный набор именованных цветов часто описывают как
147 именованных цветов HTML/CSS, и эти имена можно использовать для элементов. Например, вы можете задать цвет текста с помощью встроенного атрибута style, как показано ниже:
1<html>
2 <body>
3 <h2 style="color:DarkCyan;">How to set text color using HTML color names?</h2>
4 <h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
5 <h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.</h4>
6 </body>
7</html>Тот же результат можно получить с помощью внутреннего CSS, как показано в следующем примере:
1<html>
2 <head>
3 <style>
4 h2 {
5 color:DarkCyan;
6 }
7 h3 {
8 color:DarkRed;
9 }
10 h4 {
11 color:DarkBlue;
12 }
13 </style>
14 </head>
15 <body>
16 <h2>How to set text color using HTML color names?</h2>
17 <h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
18 <h4>There are over 140 named colors to choose from that you can use.</h4>
19 </body>
20</html>Отрендеренный HTML-код выглядит так:
Подробнее об именованных цветах см. в статье Имена цветов HTML. Чтобы программно изменить цвет текста, фона или границы в HTML-файле, см. раздел Статьи с практическими рекомендациями и статью Изменить цвет текста HTML в C#.
Использование цветовых кодов RGB, RGBA или HEX
Чтобы задать цвет текста HTML, можно использовать RGB или HEX – одни из самых распространенных цветовых кодов. Значение RGB (red, green, blue) определяет цвет HTML путем смешивания красного, зеленого и синего каналов. Синтаксис RGB-кода выглядит как rgb(red, green, blue), где каждый параметр задает интенсивность цвета в диапазоне от 0 до 255.
Значения RGBA (red, green, blue, alpha) расширяют RGB за счет альфа-канала, который определяет непрозрачность цвета. Параметр alpha – это число от 0.0, что означает “полностью прозрачный”, до 1.0, что означает “полностью непрозрачный”.
Значение HEX работает почти так же, как RGB, но записывается иначе и использует синтаксис #RRGGBB, где RR (red), GG (green) и BB (blue) – шестнадцатеричные значения от 00 до ff. Подробнее о кодах RGB, RGBA и HEX см. в статье Цветовые коды HTML.
Использование цветовых кодов RGB или HEX – один из самых распространенных способов добавить цвет на веб-страницу. Нужно добавить атрибут style к текстовому элементу, цвет которого вы хотите изменить. В примере ниже элементы <h2>, <h3> и <h4> используют встроенный атрибут style и свойство color с кодами RGB, RGBA и HEX:
1<html>
2 <body>
3 <h2 style="color:rgb(50,150,200);">How to use Text Color?</h2>
4 <h3 style="color:rgba(220,30,100,1);"> 1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
5 <h4 style="color:#1A8D7E"> 2. Specify the color using RGB, RGBA or HEX code.</h4>
6 </body>
7</html>Тот же результат будет получен с помощью внутреннего CSS, как показано в следующем примере:
1<html>
2 <head>
3 <style>
4 h2 {
5 color:rgb(50,150,200);
6 }
7 h3 {
8 color:rgba(220,30,100,1);
9 }
10 h4 {
11 color:#1A8D7E;
12 }
13 </style>
14 </head>
15 <body>
16 <h2>How to use Text Color?</h2>
17 <h3>1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
18 <h4>2. Specify the color using RGB, RGBA or HEX code.</h4>
19 </body>
20</html>Отрендеренный HTML-код выглядит так:
Использование цветовых кодов HSL или HSLA
HSL (hue, saturation, lightness) – это представление цветовой модели RGB в цилиндрических координатах. Hue определяет базовый цвет и измеряется в градусах от 0 до 360 на цветовом круге RGB. Saturation – интенсивность или чистота цвета, задаваемая в процентах от 0 (черно-белый) до 100 (насыщенный цвет). Lightness – количество яркости или света в цвете, задаваемое в процентах от 0 (черный) до 100 (белый).
Значения HSLA (hue, saturation, lightness, alpha) расширяют HSL за счет альфа-канала, который определяет непрозрачность цвета. Значение HSLA задается оттенком, насыщенностью, светлотой и alpha, где alpha определяет непрозрачность. Параметр alpha – число от 0.0, что означает “полностью прозрачный”, до 1.0, что означает “полностью непрозрачный”.
Используя тот же атрибут style, замените код RGB/RGBA/HEX или имя цвета значением HSL или HSLA в свойстве color:
1<html>
2 <body>
3 <h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codes</h2>
4 <p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.</p>
5 <p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.</p>
6 </body>
7</html>Как и в предыдущем примере, можно использовать внутренний CSS (элемент <style>) и заменить код RGB/RGBA/HEX или имя цвета значением HSL или HSLA в CSS-селекторах.
Отрендеренный HTML-код выглядит так:
Кратко о цвете текста
- Чтобы изменить цвет текста, используйте встроенный атрибут
styleили внутренний CSS. - Чтобы указать нужный цвет, используйте имена цветов HTML или цветовые коды RGB, RGBA, HEX, HSL или HSLA.
Исторически модель RGB была выбрана основной для веб-разработки, потому что она напрямую связана с работой экранов, использующих красные, зеленые и синие пиксели для отображения цветов. HTML и CSS стремятся к простой и согласованной модели определения цвета, которую поддерживают все браузеры и устройства. RGB и его производные (HEX, RGBA, HSL, HSLA) интуитивны и хорошо совместимы с цифровыми экранами.
Как изменить цвет фона в HTML
Цвет фона для отдельного HTML-элемента
Чтобы задать цвет фона HTML-элемента, используйте атрибут style и свойство background-color. Свойство background-color принимает имена цветов, RGB, RGBA, HEX, HSL или HSLA. Здесь показано, как один и тот же цвет, “YellowGreen”, задается в разных форматах и с разной степенью прозрачности. В других случаях обычно лучше использовать внутренний CSS, чтобы задать единый цвет для всех элементов определенного типа.
Определите, для какого элемента нужно изменить цвет фона. Если это абзац, найдите открывающий тег <p>. Это также может быть тег <h1>…<h6>, <div> или <table>. В этом примере мы добавляем цвет фона к элементам <h2>:
1<html>
2 <body>
3 <p>The color name is "YellowGreen":</p>
4 <h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
5 <h2 style="background-color:#9ACD32;">#9ACD32</h2>
6 <h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
7
8 <p>RGBA values of name "YellowGreen" color, with different transparency:</p>
9 <h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154, 205, 50, 0.2)</h2>
10 <h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154, 205, 50, 0.5)</h2>
11 <h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154, 205, 50, 0.8)</h2>
12
13 <p>HSLA values of name "YellowGreen" color, with different transparency:</p>
14 <h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80, 61%, 50%, 0.2)</h2>
15 <h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80, 61%, 50%, 0.5)</h2>
16 <h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80, 61%, 50%, 0.8)</h2>
17 </body>
18</html>Отрендеренный HTML-код выглядит так:
Чтобы убедиться, что выбранные цвета дают достаточный контраст и соответствуют требованиям доступности, проверяйте цветовые сочетания перед использованием. Подробнее о доступности цвета и коэффициентах контрастности см. в статье Доступность цветового контраста.
Для быстрой проверки веб-страницы на контрастность и проблемы, связанные с WCAG, используйте бесплатные онлайн-инструменты Aspose.HTML Contrast Checker и Color Contrast Accessibility.
Цвет фона для всей веб-страницы
Важно отметить, что в примере выше свойство background-color задает цвет фона текста, но не всего документа. Если нужно изменить цвет всей HTML-страницы, используйте свойство background-color в атрибуте style открывающего тега <body>:
1<html>
2 <body style="background-color:#e0e0e0">
3 <h2 style="background-color:YellowGreen;">YellowGreen</h2>
4 <h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
5 <h2 style="background-color:rgba(154, 205, 50, 1.0);">rgba(154, 205, 50, 1.0)</h2>
6 <h2 style="background-color:#9ACD32;">#9ACD32</h2>
7 <h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
8 <h2 style="background-color:hsla(80, 61%, 50%, 1.0);">hsla(80, 61%, 50%, 1.0)</h2>
9 </body>
10</html>Изображение показывает HTML-код для задания цвета фона текста (цвет YellowGreen указан разными цветовыми кодами) и всей веб-страницы.
Еще один пример окрашивания фона всей веб-страницы с помощью атрибута style и свойства background-color в открывающем теге <body>:
1<html>
2 <body style="background-color:#ffe0e0;">
3 <h2>How to set Background Color for the whole web page?</h2>
4 <p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
5 </body>
6</html>Также можно использовать внутренний CSS, чтобы задать цвет фона всей страницы:
1<html>
2 <head>
3 <style>
4 body {
5 background-color:#ffe0e0
6 }
7 </style>
8 </head>
9 <body>
10 <h2>How to set Background Color for the whole web page?</h2>
11 <p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
12 </body>
13</html>
Как изменить цвет границы в HTML
Чтобы задать цвет границы для текстовых элементов, можно использовать атрибут style со свойствами border-style и border-color. CSS-свойство border-color определяет цвет всех четырех границ элемента. Оно работает только тогда, когда сначала задано свойство border-style, которое устанавливает границы. Само по себе border-color не даст видимого результата. Если это свойство не задано, граница наследует цвет элемента. Свойство border-color принимает имена цветов, RGB, RGBA, HEX, HSL или HSLA.
1<html>
2 <body>
3 <p> The border-color property only works when the border-style property is defined first, which is used to set the borders.</p>
4 <h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?</h2>
5 <p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.</p>
6 <h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?</h2>
7 </body>
8</html>
Современные возможности цвета в CSS
Современный CSS предлагает новые способы определять и изменять цвета, выходящие далеко за пределы традиционных форматов HEX, RGB и HSL. Эти возможности относятся к CSS Color Module Level 4 и более новым спецификациям.
Новые цветовые пространства
Современный CSS определяет дополнительные цветовые пространства, которые позволяют задавать цвета точнее и более равномерно с точки зрения восприятия:
- lab() – задает цвета на основе человеческого зрения, а не вывода устройства. Пример:
color: lab(50 20 -30); - lch() – похоже на Lab, но использует значения светлоты, хромы и оттенка, которые проще интуитивно настраивать. Пример:
color: lch(60 70 40); - oklab() / oklch() – улучшенные цветовые пространства типа Lab/LCH, обеспечивающие более согласованное восприятие. Пример:
color: oklch(70% 0.15 250);
Смешивание и настройка цветов
Теперь цвета можно смешивать и настраивать прямо в CSS:
color-mix()– смешивает два цвета в заданном цветовом пространстве. Пример:background-color: color-mix(in hsl, white 30%, green 70%);color-contrast()(экспериментально) – помогает выбрать наиболее читаемый цвет с учетом требований контрастности.
Поддержка браузерами
Поддержка новых цветовых функций зависит от браузера и среды рендеринга, поэтому разработчикам стоит указывать простой резервный цвет перед расширенным значением. Так пользователи старых сред всё равно увидят приемлемый цвет. В следующем примере сначала используется #ff6600, а браузеры с поддержкой CSS Color Level 4 могут применить последующее значение oklch():
1color: #ff6600;
2color: oklch(70% 0.18 40);FAQ
Как быстрее всего изменить цвет текста в HTML?
Чтобы изменить цвет текста, используйте атрибут style со свойством color:
1<p style="color:red;">Text</p>Примеры выше показывают альтернативы с RGB, HEX и HSL.
Чем RGB отличается от HEX?
RGB использует десятичные значения от 0 до 255 для каждого цветового канала, например rgb(255, 0, 0) для красного. HEX использует запись в системе счисления с основанием 16, например #FF0000 для того же цвета. Оба формата представляют одни и те же цвета, но HEX компактнее, а RGB проще вычислять или менять в коде.
Какой формат цвета HTML лучше?
Для большинства статических дизайнов HEX – самый распространенный и компактный вариант. Используйте RGB или RGBA, когда нужны значения по каналам или прозрачность. Используйте HSL или HSLA, когда проще менять оттенок, насыщенность или светлоту, чем редактировать RGB-каналы.
Что такое web-safe colors?
Web-safe colors – исторический набор из 216 цветов, использовавший HEX-значения с комбинациями 00, 33, 66, 99, CC и FF. Современные дисплеи поддерживают миллионы цветов, поэтому web-safe colors сегодня менее важны, но термин всё еще встречается в старых материалах по веб-дизайну.
Можно ли использовать прозрачные цвета в HTML?
Да. Используйте форматы RGBA или HSLA с альфа-каналом. Значение alpha находится в диапазоне от 0.0 для полной прозрачности до 1.0 для полной непрозрачности:
1<div style="background-color:rgba(255, 0, 0, 0.5);">50% transparent red</div>
2<div style="background-color:hsla(0, 100%, 50%, 0.3);">30% transparent red</div>Почему цвет границы не отображается?
Свойство border-color дает видимый эффект только тогда, когда задан стиль границы:
1<!-- Неверно: граница не появится -->
2<div style="border-color:red;">Text</div>
3
4<!-- Верно: граница появится -->
5<div style="border-style:solid; border-color:red;">Text</div>Если не указать border-color, граница унаследует цвет текста элемента.
В чем разница между color и background-color?
Свойство color задает цвет переднего плана для текста и его оформления. Свойство background-color меняет цвет фона за содержимым и внутренними отступами элемента.
Как выбрать цвета, которые хорошо сочетаются?
Используйте распространенные принципы цветовой гармонии, например комплементарные, аналоговые или триадные цвета. Color Wheel Picker поможет проверить сочетания перед применением к тексту, фону и границам.
Связанные статьи
- Имена цветов HTML – изучите именованные цвета и случаи, когда лучше выбрать числовые значения.
- Цветовые коды HTML – сравните форматы HEX, RGB, RGBA, HSL и HSLA.
- Изменить цвет текста в HTML – обновляйте цвет текста в HTML-документах с помощью C#.
- Изменить цвет фона в HTML – задавайте цвет фона документа и отдельных элементов.
- Изменить цвет границы в HTML – меняйте цвета границ в HTML-файлах.
- Color Wheel Picker – создавайте HEX-палитры и экспериментируйте с цветовыми гармониями онлайн.