Таблица цветов html
Содержание:
- Как изменить цвет текста в HTML с использованием CSS?
- RGBA
- Инструмент для определения значений цветов онлайн
- Тег html изменения цвета текста через атрибут style
- HSL значение
- Имена цветов, поддерживаемые всеми обозревателями
- Изменения цвета текста средствами HTML
- Оттенки красного
- Цвет текста
- Таблица цветов
- Форматы задания цветов в CSS
- Значения цвета
- Существующие цветовые палитры
- Изменяем цвет в HTML коде при помощи атрибута style
- Предоставляем возможность пользователю выбрать цвет
Как изменить цвет текста в HTML с использованием CSS?
Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.
Выглядеть это будет так:
HTML
PHP
<p class=”color-text”>Пример текста</div>
1 | <pclass=”color-text”>Примертекста<div> |
CSS
PHP
.color-text {
color:#555555;
}
1 |
.color-text{ color#555555; } |
Вместо color-text вы можете указать свой класс.
Если вам нужно изменить цвет текста для элемента на сайте у которого уже есть класс или идентификатор, то можно вычислить его название и указать в CSS.
Как вычислить класс или идентификатор рассказано в этой статье: Как определить ID и класс элемента на странице?
Если вы не хотите лезть в CSS файл чтобы внести изменения, то можно дописать CSS стили прямо в HTML коде станицы, воспользовавшись тегом <style>.
Для этого:
- 1.Находи вверху HTML страницы тег </head>. Если ваш сайт работает на CMS, то этот фрагмент кода находится в одном из файлов шаблона. Например: header.php, head.php или что-то наподобие этого в зависимости от CMS.
- 2.Перед строкой </head> добавляем теги <style>…</style>.
-
3.Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:
PHP
<style>
.color-text {
color:#555555;
}
</style>1
2
3
4
5<style>
.color-text {
color#555555;
}
</style>
Этот способ подходит если вам нужно изменить цвет сразу для нескольких элементов на сайте.
Если же такой элемент один, то можно задать или изменить цвет текста прямо в HTML коде.
RGBA
Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity
здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba
, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..
Рис. 1. Синтаксис применения rgba
В примере 2 показано применение формата RGBA для создания полупрозрачного фона.
Пример 2. Полупрозрачный фон
HTML5
CSS3
IE 9+
Cr
Op
Sa
Fx
rgbaГоббс одним из первых осветил эту проблему с позиций психологии.
Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.
Рис. 2. Полупрозрачный фон и непрозрачный текст
Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).
Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.
Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…
С помощью RGBa
решение выглядит следующим образом:
1. Допустим, нам нужен синий фон с прозрачностью 50%.
А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x
2. Для IE можно постараться и сделать более изящно:
.element{ background filter:progid endColorstr= zoom: } |
Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.
Использование RGBa не ограничивается только фоновым цветом у блоков…
В CSS есть три способа изменить прозрачность элемента:с
помощью свойства opacity ,с
помощью функции rgba() ,с
помощью функции hsla() .
1. Свойство opacity
Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity , содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:
H1 {color: #CD6829;}
div {
background: #CDD6DB;
opacity: .3;
}
Рис. 1. Прозрачность элементов с помощью opacity
2. Функция rgba()
Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red)
, зеленого (Green)
и синего (Blue)
цветов, а альфа-канал (Alpha)
отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.
3. Функция hsla()
Функция hsla() , параметры которой означают тон (Hue)
, насыщенность (Saturation)
, яркость (Lightness)
и альфа-канал (Alpha)
, также позволяет задать полупрозрачный цвет.
Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:
0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет
.
Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .
Инструмент для определения значений цветов онлайн
Так же если значений этих цветов вам будет недостаточно, то можно воспользоваться специальным инструментом для подбора цветов для сайта.
Кликните по области палитры чтобы определить значение цвета
- RGB:
- HSV:
- HEX:
Здесь вы можете двигать мышкой указатель и получать значения цветов в формате RGB и HEX (в шестнадцатеричном коде)
Данный инструмент по подбору цвета сайта довольно полезен, поэтому не забудьте добавить эту статью в закладки.
Надеюсь, что данная статья была для вас полезной. Подбирайте цвета и разукрашивайте ваши сайты на свой вкус. Только не перестарайтесь 🙂
Хорошего вам настроения! До встречи в следующих статьях!
С уважением Юлия Гусарь
Тег html изменения цвета текста через атрибут style
Html атрибут style совместим абсолютно с любыми тегами: абзаца <p>; курсивного шрифта <em>; жирного шрифта <strong>; подчеркивания текста <u>; маркированного <ul> и нумерованного <ol> списков, и их составляющих <li>; таблицы <table> и составляющих <tr> и <td>.
Но помимо атрибута style, нам для изменения цвета текста необходимо знать html коды цветов, и в этом нам поможет специальная таблица html цветов с кодами 147 различных цветовых оттенков.
Переходим на сайт этой таблицы ColorScheme.Ru и сразу сохраняем в закладки своего браузера, если в дальнейшем собираетесь менять цвет текста в своих статьях на блоге.
А теперь давайте творить и вытворять. Начнем с абзаца, который мы не хотим видеть в стандартном черном цвете. Верстаем.
Изменение цвета текста абзаца <p>
В открытый тег абзаца <p> будем вставлять атрибут style и html код самого цвета, который нам нужен color: #FF0000 (я выбрал Red — красный). Для этого заходим на сайт ColorScheme.Ru и копируем код необходимого цвета:
Теперь собираем атрибут изменения цвета текста и вставляем в открытый тег абзаца:
<p style=»color: #FF0000″> (кавычки должны быть именно такого вида — » «, иначе цвет не поменяется)
Верстаем сам абзац:
<p style=»color: #FF0000″> Итак, у нас остался не оформленным раздел ”Рубрики”. По умолчанию на сайте он выглядит обычным списком. Что же можно сделать и как оформить рубрики, чтобы было приятно глазу посетителей, и они заметив этот раздел, переходили по рубрикам и на статьи, подольше находясь на блоге?</p>
Смотрим как будет выглядеть на блоге:
Итак, у нас остался не оформленным раздел ”Рубрики”. По умолчанию на сайте он выглядит обычным списком. Что же можно сделать и как оформить рубрики, чтобы было приятно глазу посетителей, и они заметив этот раздел, переходили по рубрикам и на статьи, подольше находясь на блоге?
Изменение цвета текста списков <ul> и <ol>
Верстаем, к примеру маркированный список, код необходимого цвета также берем в таблице html цветов:
<li>Специалист по контекстной рекламе</li>
<li>Дизайн и Photoshop</li>
<li>Копирайтинг</li>
<li>Видео монтаж</li>
<li>Вёрстка сайтов</li>
<li>Специалист по продвижению Вконтакте</li></ul>
На сайте будет в таком виде:
А на примере нумерованного списка изменим цвета строк:
<li style=»color: #006400″>Специалист по контекстной рекламе</li>
<li style=»color: #C71585″>Дизайн и Photoshop</li>
<li style=»color: #FFD700″>Копирайтинг</li>
<li style=»color: #FF4500″>Видео монтаж</li>
<li style=»color: #191970″>Вёрстка сайтов</li>
<li style=»color: #8B4513″>Специалист по продвижению Вконтакте</li></ol>
На сайте список будет отображаться таким образом:
Изменение цвета текста таблицы <table>
Верстаем таблицу с изменением цвета текста всей таблицы:
<table style=»color: #FF0000″><tr><td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td></tr>
<tr><td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td></tr>
<tr><td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td></tr></table>
На блоге получаем таблицу в таком виде:
ячейка 1 | ячейка 2 | ячейка 3 |
ячейка 4 | ячейка 5 | ячейка 6 |
ячейка 7 | ячейка 8 | ячейка 9 |
Теперь изменим цвет текста построчно:
<table><tr style=»color: #FF0000″><td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td></tr>
<tr style=»color: #FFA500″><td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td></tr>
<tr style=»color: #191970″><td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td></tr></table>
И на сайте увидим такую таблицу:
ячейка 1 | ячейка 2 | ячейка 3 |
ячейка 4 | ячейка 5 | ячейка 6 |
ячейка 7 | ячейка 8 | ячейка 9 |
В каждой ячейке таблицы, также можно изменить цвет текста:
<table><tr><td style=»color: #FF0000″>ячейка 1</td>
<td style=»color: #FFA500″>ячейка 2</td>
<td style=»color: #191970″>ячейка 3</td></tr></table>
На блоге увидим в таком варианте:
ячейка 1 | ячейка 2 | ячейка 3 |
По такому же принципу меняется цвет текста в открытых тегах жирного, курсивного шрифта и подчеркивания текста.
Применяйте на своих блогах атрибут style для изменения цвета текста в своих публикациях, там, где это действительно необходимо.
Успехов вам и до новых встреч!
HSL значение
В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:
HSL (оттенок, насыщенность, легкость)
Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.
Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.
Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Насыщенность
Насыщенность может быть охарактеризована как интенсивность цвета.
100% является чистым цветом, не оттенки серого
50% является 50% серый, но вы все еще можете увидеть цвет.
0% полностью серый, вы больше не можете видеть цвет.
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Легкость
Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Оттенки серого часто определяются установкой оттенка и насыщенности в 0, и отрегулируйте легкость от 0% до 100%, чтобы получить более темные/светлые оттенки:
Имена цветов, поддерживаемые всеми обозревателями
Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):
Color Name | HEX | Color | Shades | Mix |
---|---|---|---|---|
AliceBlue | #F0F8FF | Shades | Mix | |
AntiqueWhite | #FAEBD7 | Shades | Mix | |
Aqua | #00FFFF | Shades | Mix | |
Aquamarine | #7FFFD4 | Shades | Mix | |
Azure | #F0FFFF | Shades | Mix | |
Beige | #F5F5DC | Shades | Mix | |
Bisque | #FFE4C4 | Shades | Mix | |
Black | #000000 | Shades | Mix | |
BlanchedAlmond | #FFEBCD | Shades | Mix | |
Blue | #0000FF | Shades | Mix | |
BlueViolet | #8A2BE2 | Shades | Mix | |
Brown | #A52A2A | Shades | Mix | |
BurlyWood | #DEB887 | Shades | Mix | |
CadetBlue | #5F9EA0 | Shades | Mix | |
Chartreuse | #7FFF00 | Shades | Mix | |
Chocolate | #D2691E | Shades | Mix | |
Coral | #FF7F50 | Shades | Mix | |
CornflowerBlue | #6495ED | Shades | Mix | |
Cornsilk | #FFF8DC | Shades | Mix | |
Crimson | #DC143C | Shades | Mix | |
Cyan | #00FFFF | Shades | Mix | |
DarkBlue | #00008B | Shades | Mix | |
DarkCyan | #008B8B | Shades | Mix | |
DarkGoldenRod | #B8860B | Shades | Mix | |
DarkGray | #A9A9A9 | Shades | Mix | |
DarkGrey | #A9A9A9 | Shades | Mix | |
DarkGreen | #006400 | Shades | Mix | |
DarkKhaki | #BDB76B | Shades | Mix | |
DarkMagenta | #8B008B | Shades | Mix | |
DarkOliveGreen | #556B2F | Shades | Mix | |
DarkOrange | #FF8C00 | Shades | Mix | |
DarkOrchid | #9932CC | Shades | Mix | |
DarkRed | #8B0000 | Shades | Mix | |
DarkSalmon | #E9967A | Shades | Mix | |
DarkSeaGreen | #8FBC8F | Shades | Mix | |
DarkSlateBlue | #483D8B | Shades | Mix | |
DarkSlateGray | #2F4F4F | Shades | Mix | |
DarkSlateGrey | #2F4F4F | Shades | Mix | |
DarkTurquoise | #00CED1 | Shades | Mix | |
DarkViolet | #9400D3 | Shades | Mix | |
DeepPink | #FF1493 | Shades | Mix | |
DeepSkyBlue | #00BFFF | Shades | Mix | |
DimGray | #696969 | Shades | Mix | |
DimGrey | #696969 | Shades | Mix | |
DodgerBlue | #1E90FF | Shades | Mix | |
FireBrick | #B22222 | Shades | Mix | |
FloralWhite | #FFFAF0 | Shades | Mix | |
ForestGreen | #228B22 | Shades | Mix | |
Fuchsia | #FF00FF | Shades | Mix | |
Gainsboro | #DCDCDC | Shades | Mix | |
GhostWhite | #F8F8FF | Shades | Mix | |
Gold | #FFD700 | Shades | Mix | |
GoldenRod | #DAA520 | Shades | Mix | |
Gray | #808080 | Shades | Mix | |
Grey | #808080 | Shades | Mix | |
Green | #008000 | Shades | Mix | |
GreenYellow | #ADFF2F | Shades | Mix | |
HoneyDew | #F0FFF0 | Shades | Mix | |
HotPink | #FF69B4 | Shades | Mix | |
IndianRed | #CD5C5C | Shades | Mix | |
Indigo | #4B0082 | Shades | Mix | |
Ivory | #FFFFF0 | Shades | Mix | |
Khaki | #F0E68C | Shades | Mix | |
Lavender | #E6E6FA | Shades | Mix | |
LavenderBlush | #FFF0F5 | Shades | Mix | |
LawnGreen | #7CFC00 | Shades | Mix | |
LemonChiffon | #FFFACD | Shades | Mix | |
LightBlue | #ADD8E6 | Shades | Mix | |
LightCoral | #F08080 | Shades | Mix | |
LightCyan | #E0FFFF | Shades | Mix | |
LightGoldenRodYellow | #FAFAD2 | Shades | Mix | |
LightGray | #D3D3D3 | Shades | Mix | |
LightGrey | #D3D3D3 | Shades | Mix | |
LightGreen | #90EE90 | Shades | Mix | |
LightPink | #FFB6C1 | Shades | Mix | |
LightSalmon | #FFA07A | Shades | Mix | |
LightSeaGreen | #20B2AA | Shades | Mix | |
LightSkyBlue | #87CEFA | Shades | Mix | |
LightSlateGray | #778899 | Shades | Mix | |
LightSlateGrey | #778899 | Shades | Mix | |
LightSteelBlue | #B0C4DE | Shades | Mix | |
LightYellow | #FFFFE0 | Shades | Mix | |
Lime | #00FF00 | Shades | Mix | |
LimeGreen | #32CD32 | Shades | Mix | |
Linen | #FAF0E6 | Shades | Mix | |
Magenta | #FF00FF | Shades | Mix | |
Maroon | #800000 | Shades | Mix | |
MediumAquaMarine | #66CDAA | Shades | Mix | |
MediumBlue | #0000CD | Shades | Mix | |
MediumOrchid | #BA55D3 | Shades | Mix | |
MediumPurple | #9370DB | Shades | Mix | |
MediumSeaGreen | #3CB371 | Shades | Mix | |
MediumSlateBlue | #7B68EE | Shades | Mix | |
MediumSpringGreen | #00FA9A | Shades | Mix | |
MediumTurquoise | #48D1CC | Shades | Mix | |
MediumVioletRed | #C71585 | Shades | Mix | |
MidnightBlue | #191970 | Shades | Mix | |
MintCream | #F5FFFA | Shades | Mix | |
MistyRose | #FFE4E1 | Shades | Mix | |
Moccasin | #FFE4B5 | Shades | Mix | |
NavajoWhite | #FFDEAD | Shades | Mix | |
Navy | #000080 | Shades | Mix | |
OldLace | #FDF5E6 | Shades | Mix | |
Olive | #808000 | Shades | Mix | |
OliveDrab | #6B8E23 | Shades | Mix | |
Orange | #FFA500 | Shades | Mix | |
OrangeRed | #FF4500 | Shades | Mix | |
Orchid | #DA70D6 | Shades | Mix | |
PaleGoldenRod | #EEE8AA | Shades | Mix | |
PaleGreen | #98FB98 | Shades | Mix | |
PaleTurquoise | #AFEEEE | Shades | Mix | |
PaleVioletRed | #DB7093 | Shades | Mix | |
PapayaWhip | #FFEFD5 | Shades | Mix | |
PeachPuff | #FFDAB9 | Shades | Mix | |
Peru | #CD853F | Shades | Mix | |
Pink | #FFC0CB | Shades | Mix | |
Plum | #DDA0DD | Shades | Mix | |
PowderBlue | #B0E0E6 | Shades | Mix | |
Purple | #800080 | Shades | Mix | |
RebeccaPurple | #663399 | Shades | Mix | |
Red | #FF0000 | Shades | Mix | |
RosyBrown | #BC8F8F | Shades | Mix | |
RoyalBlue | #4169E1 | Shades | Mix | |
SaddleBrown | #8B4513 | Shades | Mix | |
Salmon | #FA8072 | Shades | Mix | |
SandyBrown | #F4A460 | Shades | Mix | |
SeaGreen | #2E8B57 | Shades | Mix | |
SeaShell | #FFF5EE | Shades | Mix | |
Sienna | #A0522D | Shades | Mix | |
Silver | #C0C0C0 | Shades | Mix | |
SkyBlue | #87CEEB | Shades | Mix | |
SlateBlue | #6A5ACD | Shades | Mix | |
SlateGray | #708090 | Shades | Mix | |
SlateGrey | #708090 | Shades | Mix | |
Snow | #FFFAFA | Shades | Mix | |
SpringGreen | #00FF7F | Shades | Mix | |
SteelBlue | #4682B4 | Shades | Mix | |
Tan | #D2B48C | Shades | Mix | |
Teal | #008080 | Shades | Mix | |
Thistle | #D8BFD8 | Shades | Mix | |
Tomato | #FF6347 | Shades | Mix | |
Turquoise | #40E0D0 | Shades | Mix | |
Violet | #EE82EE | Shades | Mix | |
Wheat | #F5DEB3 | Shades | Mix | |
White | #FFFFFF | Shades | Mix | |
WhiteSmoke | #F5F5F5 | Shades | Mix | |
Yellow | #FFFF00 | Shades | Mix | |
YellowGreen | #9ACD32 | Shades | Mix |
❮ Назад
Дальше ❯
Изменения цвета текста средствами HTML
К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.
PHP
<font color=»red»>Красный текст</font>
1 | <font color=»red»>Красныйтекст<font> |
Значение цвета можно задавать несколькими способами:
- При помощи кодового названия (Например: red, black, blue)
- В шестнадцатиричном формате (Например: #000000, #ccc)
- В формате rgba (Например: rgba(0,0,0,0.5))
Более подробно о способах задания цветов и перечень их значений описан в этой статье: Изменение цвета шрифта в CSS. Коды цветов HTML и CSS
Если вы ещё не знаете как определить значение цвета на сайте, то вам сюда
Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>
Оттенки красного
Если вы посмотрите на таблицу цвета ниже, вы увидите результат той или иной красный свет от 0 до 255, при этом сохраняя зеленый и синий свет в нуле.
Нажмите на шестнадцатеричные значения, если вы хотите, чтобы проанализировать цвет в нашей палитры цветов.
Красный свет | HEX | RGB |
---|---|---|
# 000000 | RGB (0,0,0) | |
# 080000 | RGB (8,0,0) | |
# 100000 | RGB (16,0,0) | |
# 180000 | RGB (24,0,0) | |
# 200000 | RGB (32,0,0) | |
# 280000 | RGB (40,0,0) | |
# 300000 | RGB (48,0,0) | |
# 380000 | RGB (56,0,0) | |
# 400000 | RGB (64,0,0) | |
# 480000 | RGB (72,0,0) | |
# +500000 | RGB (80,0,0) | |
# 580000 | RGB (88,0,0) | |
# 600000 | RGB (96,0,0) | |
# 680000 | RGB (104,0,0) | |
# 700000 | RGB (112,0,0) | |
# 780000 | RGB (120,0,0) | |
# 800000 | RGB (128,0,0) | |
# 880000 | RGB (136,0,0) | |
# 900000 | RGB (144,0,0) | |
# 980000 | RGB (152,0,0) | |
# A00000 | RGB (160,0,0) | |
# A80000 | RGB (168,0,0) | |
# B00000 | RGB (176,0,0) | |
# B80000 | RGB (184,0,0) | |
# C00000 | RGB (192,0,0) | |
# C80000 | RGB (200,0,0) | |
# D00000 | RGB (208,0,0) | |
# D80000 | RGB (216,0,0) | |
# E00000 | RGB (224,0,0) | |
# E80000 | RGB (232,0,0) | |
# F00000 | RGB (240,0,0) | |
# F80000 | RGB (248,0,0) | |
# FF0000 | RGB (255,0,0) |
Цвет текста
А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут <color>. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый — можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно — и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить «решетку» — «#»! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) — значение #FF0000 и так далее. То есть если мы напишем:
или
Обе эти записи идентичны. Приведу значения некоторых цветов:
Таблица цветов
Название цвета | Color | Код | Цвет |
---|---|---|---|
aква | Aqua | #00FFFF | |
Черный | 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 |
Ну а теперь от слов к практике?
Возьмем то же самое стихотворение, и поставим перед собой задачу:
- Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
- Каждый куплет стихотворения раскрасим в свой цвет: первый — в синий, второй — в зеленый, ну а третий — в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий — в числовом эквиваленте зеленого и желтого цветов.
- Первый куплет напишем шрифтом Impact
- Размер второго куплета дадим размером в абсолютном размере 4 пункта
- Размер третьего куплета дадим в относительном размере +1 пункт
- Ну и автора задвинем в тег ADDRESS
Задача ясна? Ну тогда поехали!
Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:
Листинг 10. Стихотворение
СТИХОТВОРЕНИЕ
Это не сложно
Это не важно
Просто отважно
В небо шагнуть
И осторожно
Там, где возможно
Темного облака
Край отогнуть.
Стертые лица,
Забытые профили
И многоточий упрямая нить. Свет разливается
И проявляется
То, что уже никогда не забыть
Свет разливается
И проявляется
То, что уже никогда не забыть.
Сохраним наш файл под именем «text4.html» и затем откроем этот файл в окне браузера:

Вот они, цвета радуги!
Прошу прощенья за дизайн. Вряд ли он может выдержать даже самую мягкую критику. Но, согласитесь, зато сразу стало многое понятно. Не только как правильно форматировать текст, но и то, что не нужно смешивать в одном тексте разные стили, размеры и цвета.
Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое, чтобы красиво оформить любой текст.
А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.
Таблица цветов
Название цвета | 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 | образец |
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 | образец |
Форматы задания цветов в CSS
Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:
- 1. При помощи кодового значения цвета хтмл.
Например:
color: black;
где black – это черный цвет html.
Примеры конкретных значений цветов HTML и CSS смотрите ниже.
- 2. Задание цвета в шестнадцатеричном коде:
Например:
color: #000000;
Где #000000; — это код черного цвета.
Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.
Например:
#ffffff – это код белого цвета
Его можно записать так: #fff
- 1. Задание цвета в формате rgb
Данный формат представляет собой набор трёх числовых значений от 0 до 255.
Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные оттенки
R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего
В CSS это выглядит так:
сolor: rgb (0, 155, 0);
Где 0, 155, 0 – это код зелёного цвета.
Таблица, в которой представлены основные цвета ргб, приведена ниже
- 4. Задание цвета при помощи формата rgba
Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность
Например:
color: rgba (89, 107, 108, 0.5);
Где 89, 107, 108 – это ргб код серого цвета, а 0,5 – это уровень прозрачности.
Прозрачность задаётся в виде десятичного значения от 0 до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный
В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка
Значения цвета
В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:
Так же, как название цвет «Tomato»:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Так же, как название цвета «Tomato», но 50% прозрачный:
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Пример
<h1 style=»background-color:rgb(255,
99, 71);»>…</h1><h1 style=»background-color:#ff6347;»>…</h1><h1 style=»background-color:hsl(9,
100%, 64%);»>…</h1><h1 style=»background-color:rgba(255,
99, 71, 0.5);»>…</h1><h1 style=»background-color:hsla(9,
100%, 64%, 0.5);»>…</h1>
Существующие цветовые палитры
Палитры, или иначе оттеночные диапазоны, начали создаваться несколько веков назад. Они представлялись в виде шкал или атласов колеров. Среди наиболее распространенных и широко используемых 3 основных стандарта.
RAL
Палитра разработана в начале XX в. в Германии как стандарт для лакокрасочной продукции. Reichs-Ausschuss fur Lieferbedingungen – это цветовой диапазон, созданный Государственным комитетом по условиям поставок. В нем с большой скрупулезностью колористическое пространство разделено на отдельные диапазоны. Каждому разделу присвоен цифровой индекс. Обозначения четырехзначные.
Первая цифра | Раздел | Количество оттенков |
---|---|---|
1 | желтые | 27 |
2 | оранжевые | 22 |
3 | красные | 22 |
4 | фиолетовые | 10 |
5 | синие | 23 |
6 | зеленые | 32 |
7 | серые | 37 |
8 | коричневые | 19 |
9 | светлые и темные | 12 |
Нотации – наставления и система условных обозначений – сопровождают каждый раздел. Это позволяет правильно понимать и толковать цвета для их использования в промышленности, в дизайне и других областях.
RAL – это самый популярный и применяемый в мире цветовой стандарт.
Палитра включает шкалы:
- Classic;
- Design;
- Digital;
- Effect;
- Plastics;
- Books.
NCS
Natural Color System переводится с английского как “естественная система цвета”. Авторство принадлежит Скандинавскому одноименному институту. Появилась NCS в 1979 г. Главный принцип – использование 6 простых цветовых тонов, которые невозможно представить сочетанием двух других (исключение – зеленый).
Колористические элементы:
- белый;
- черный;
- красный;
- желтый;
- зеленый;
- голубой.
NCS – цветовая модель, предложенная Скандинавским институтом цвета.
Прочие получаются смешением двух других
В описании оттенков принимаются во внимание близость к черному цвету (параметр темноты) и насыщенность (чистота), а также содержание двух основных тонов в процентах
Pantone
Система создана в середине XX в. специально для полиграфических работ. Идентифицируются колористические единицы цифровым набором. Причем их применяют для различных видов полиграфических красочных материалов, основными из которых являются краски триадные и смесевые.
Другие варианты
Палитрами называют набор красок, которыми пользуются художники, создавая свои произведения. Они имеют одинаковые названия независимо от того, в какой технике выполняется работа: акварель, гуашь, темпера или масло.
В компьютерной графике тоже используется понятие цветовой палитры. Это набор красочных тонов, который доступен графической системе компьютера. Другое название – индексированные цвета. Изображение на экране монитора не всегда адекватно передает вариации стандартных колористических диапазонов. Поэтому при создании узора или картины в компьютерном варианте приходится учитывать, как они будут выглядеть в реальности: напечатанными полиграфическим способом, выведенными на широкоформатном принтере, плоттере или нанесенными на пластиковую поверхность.
Существуют колористические справочники для использования в компьютерном художественном творчестве. Один тон представляется в различных цифровых цветовых моделях.
Наиболее распространенная – RGB, в ее основе 3 цвета:
- красный – Red;
- зеленый – Green;
- синий (голубой) – Blue.
CMYK – модель, активно использующаяся в полиграфии.
Наряду с ней применяется модель CMYK:
- Cyan;
- Magenta;
- Yellow;
- Key (Black).
В работе используются еще HSL, HSB/HSV, LAB, XYZ. Для перевода обозначений одного и того же тона из одной модели в другую применяют конвертеры колеров. Они встраиваются в некоторые графические программы.
Помимо этих цифровых моделей, в коллекции включаются классические варианты цветовых диапазонов. Например, палитра Pantone есть во многих графических программах, особенно в тех, которые созданы для профессиональных дизайнеров.
Шестнадцатеричный цветовой код – универсальная цифровая модель для отображения веб-страниц. Другое название – HTML-цвета.
Обозначение колера выглядит следующим образом: знак #, далее буквенно-цифровой формат, например #FAEBD7.
Код описывает тона и оттенки исходя из трех элементов, которые соответствуют модели RGB.
Изменяем цвет в HTML коде при помощи атрибута style
Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.
PHP
<p style=”color:red;”>Пример</p>
1 | <pstyle=”colorred;”>Пример<p> |
Здесь же при необходимости через ; вы можете задать и другие CSS свойства, например, размер шрифта, жирность и так далее.
PHP
<p style=”color:red; font-size:20px; font-weight:bolder;”>Пример</p>
1 | <pstyle=”colorred;font-size20px;font-weightbolder;”>Пример<p> |
Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега <font> или артибута style.
Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)
Чтобы изменить цвет текста отдельного слова, фразы или буквы мы можем обернуть их в тег span и задать ему нужный цвет.
Например:
PHP
<p>Пример <span style=”color:#2F73B6;”> текста</span></p>
1 | <p>Пример<span style=”color#2F73B6;”> текста</span></p> |
В итог получится вот так:
Пример текста
Предоставляем возможность пользователю выбрать цвет
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 as the value of its attribute.
The element represents a color only in the covered above.
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 element) and an empty paragraph element () into which we’ll output some text from our JavaScript code.
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…
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 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 event is received when the color picker’s value is finalized. We respond by setting the contents of the element with the ID to a string describing the finally selected color.