Как изменить цвет текста в html

RGB цвета

Значения цвета RGB поддерживается во всех основных браузерах. Значение цвета RGB задается в следующем порядке: R(красный), G(зеленый), B (синий). Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255 .

Например, значение rgb(0,255,0) отображается как зеленый, так как параметр зеленого установлен в максимальное точке (255), а красный и зелёный установлены в . Записывается это следующим образом:

<p style = color: rgb(0,255,0)">Я абзац зеленого цвета</p> <!-- задаем цвет текста значением rgb --> 
<p style = color: rgb(255,0,0)">Я абзац красного цвета</p> <!-- задаем цвет текста значением rgb --> 
<p style = color: rgb(255,165,0)">Я абзац оранжевого цвета</p> <!-- задаем цвет текста значением rgb --> 

Значение RGB

В HTML, цвет может быть указан как RGB значение, используя эту формулу:

RGB (красный, зеленый, синий)

Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета между 0 и 255.

Например, RGB (255, 0, 0) отображается красным цветом, так как красный цвет устанавливается в его наивысшее значение (255), а остальные устанавливаются в 0.

Для отображения черного цвета, все параметры цвета должны быть установлены в 0, как это: RGB (0, 0, 0).

Для отображения белого цвета, все параметры цвета должны быть установлены в 255, как это: RGB (255, 255, 255).

Экспериментируйте, смешивая значения RGB ниже:

Красный

255

Зеленый

Синий

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:

Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.¶

Применение эффектов выделения к определенным элементам может быть напрасной потерей времени, если просто необходимо иметь одинаковый эффект для всей страницы вашего сайта. Использование псевдоэлемента ::selection дает возможность задать цвет выделения для всей страницы без его применения к определенным элементам.

Пример

Попробуйте сами!

::selection поддерживается многими браузерами. Проблема совместимости с Firefox решается при помощи добавления префикса -moz- перед селектором. В случае планшетов и мобильных устройств данный селектор не поддерживается в iOS Safari и Opera Mini.
Не рекомендуется полагаться на нестандартные функции CSS, если есть высокий риск, что веб-браузер может без предупреждения в любой момент удалить поддержку для неофициального CSS селектора или псевдоэлемента .

Добавление стиля с помощью этого псевдоэлемента в соответствии с цветами вашего сайта (вместо использования скучного синего фонового цвета при выделении текста) может сделать вашу веб-страницу интересным. Для определенной части вашей страницы можете выбрать фоновый цвет выделения или применить разные цвета для разных частей.

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег style=»background:имя цвета»>…</тег> — указание цвета фона по имени.

<тег style=»background:#HEX-код»>…</тег> — указание цвета фона по коду.

Пример изменения цвета фона

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.

Домашнее задание.

1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Раскрасим буквы разными цветами

В первую очередь изменить цвет как отдельных букв, так и целого предложения можно при помощи тега html <font>. Хоть это и слегка устаревший элемент, его иногда используют разработчики и поддерживают все браузеры. При помощи <font> можно определить стиль шрифта, его цвет и размер. Так, при запуске этой строки изменится внешний вид заглавной буквы:

Более известным и распространенным среди верстальщиков приемом для видоизменения текста является css. Для установки определенного цвета шрифта в основном используют свойство color. Его описывают для конкретного тега в спецификациях стиля оформления.

Ниже приведен пример форматирования внешнего вида заголовка страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Видоизменение цветовой палитры при помощи css</title>
  <style>
   h2 {
    color: orange; 
    text-align:  center;
   }
    p {
     text-align:  center;
    }
  </style>
 </head>
 <body>
  <h2>Размещенный по центру оранжевый заголовок</h2>
   <p>Текст первого абзаца</p>
 </body>
</html>

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

Форматы задания цветов в CSS

Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:

1. 1. При помощи кодового значения цвета хтмл.

Например:

color: black;

где black – это черный цвет html.

Примеры конкретных значений цветов HTML и CSS смотрите ниже.

1. 2. Задание цвета в шестнадцатеричном коде:

Например:

color: #000000;

Где #000000; — это код черного цвета.

Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.

Например:

#ffffff – это код белого цвета

Его можно записать так: #fff

1. 1. Задание цвета в формате rgb

Данный формат представляет собой набор трёх числовых значений от 0 до 255.

Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные  оттенки

R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего

В CSS это выглядит так:

сolor: rgb (0, 155, 0);

Где 0, 155, 0 – это код зелёного цвета.

Таблица, в которой представлены основные цвета ргб,  приведена ниже

1. 4. Задание цвета при помощи формата rgba

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

Например:

color: rgba (89, 107, 108, 0.5);

Где 89, 107, 108 – это ргб  код серого цвета, а 0,5 – это уровень прозрачности.

Прозрачность задаётся в виде десятичного значения от 0  до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный

В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка

Таблица цветовых кодов для html

Если в коде примера вы видите такие обозначения, как, например, #F8F8FF, не пугайтесь. Это всего лишь указание цвета. Такой «шифр» используется для упрощения работы с цветовой палитрой при написании веб-страниц.

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

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

Думаю, после просмотра выше представленной таблицы у некоторых может возникнуть вопрос: «А что такое RGB?». И это правильно!

Она относится к аддитивной группе моделей, так как каждый возможный оттенок получается путем добавления значений к черному (который задается цифрами 0 0 0). Таким образом, при изменении значений каждого канала R (отвечает за красный), G (зеленый) и B (синий) изменяется и выходной цвет.

Цвет текста

Цвет текста элемента задается с помощью CSS свойства color. Благодаря этому свойству можно задать любой цвет для текстового содержимого. В качестве значения свойство color может принимать имена цветов, RGB значения или шестнадцатеричные коды.

Установка цвета по имени

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

color: silver;

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

Установка цвета с помощью RGB

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255 для числовых значений или от 0% до 100%

Можно установить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего. Вот как это можно сделать:

color: rgb(80%, 40%, 0%);

Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно написать 204 красного, 102 зеленого и 0 синего:

color: rgb(204, 102, 0);

Шестнадцатеричные коды

Теперь перейдем к шестнадцатеричным кодам. Откроем вам небольшой секрет: каждый набор двух цифр такого кода представляет красную, зеленую и синюю составляющую цвета. Так, первые две цифры представляют красный цвет, следующие две — зеленый и последние две — синий:

color: #cc6600;

Примечание: все три метода определения цветов в CSS подходят ко всем свойствам, которые в качестве значений могут принимать цвета. Все доступные названия цветов вы можете посмотреть в нашей таблице цветов, там же вы сможете подобрать цвет в RGB или шестнадцатеричном формате, если вам не подойдет ни один из оттенков представленных в таблице с названиями.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
object-fit
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index

Атрибут style

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

Примечание: тут мы рассматриваем атрибут для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе.

Код примера познакомит вас с новым способом форматирования документа:

<html>
  <body style="background-color:ivory;">

    <h1>Посмотрите на цвета и стили</h1>
    <p style="font-family:verdana;color:red;">
      Этот текст написан красным цветов с помощью шрифта Verdana.
    </p>
    <p style="font-family:times;color:green;">
      Этот текст написан зеленым цветом с помощью шрифта Times.
    </p>
    <p style="font-size:30px;">Этот текст имеет размер 30 пикселей.</p>

  </body>
</html>

Попробовать »

Внимательно посмотрите на пример, с помощью атрибута мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

Примечание: посмотреть наследуется ли значение применённого свойства дочерними элементами или нет, можно в CSS справочнике на странице с данным свойством.

Изменения цвета текста средствами HTML

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

PHP

<font color=»red»>Красный текст</font>

Значение цвета можно задавать несколькими способами:

• При помощи кодового названия (Например: red, black, blue)
• В шестнадцатиричном формате (Например: #000000, #ccc)
• В формате rgba (Например: rgba(0,0,0,0.5))

Более подробно о способах задания цветов и перечень их значений описан в этой статье: Изменение цвета шрифта в CSS. Коды цветов HTML и CSS

Если вы ещё не знаете как определить значение цвета на сайте, то вам сюда

Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>

Скорректированные расчеты

Первое очевидное последствие использование подхода с коррекцией яркости заключается в том, что мы не можем использовать формат HSL, так как CSS не может конвертировать его в RGB самостоятельно.

Поэтому придется перейти на RGB-формат для фона, вычислить параметр luma с помощью любого метода и использовать его в объявлении цвета (которое останется в HSL-формате).

:root {
/* цвет темы в RGB формате */
—red: 200;
—green: 60;
—blue: 255;
/* граничное значение для «светлых» цветов
рекомендуется 0.5 — 0.6 */
—threshold: 0.5;
/* граничное значение для отображения рамки
рекомендуется 0.8+ */
—border-threshold: 0.8;
}

.btn {
/* фон для основного класса */
background: rgb(var(—red), var(—green), var(—blue));

/* расчет воспринимаемой яркости по методу sRGB Luma
Luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255 */
—r: calc(var(—red) * 0.2126);
—g: calc(var(—green) * 0.7152);
—b: calc(var(—blue) * 0.0722);
—sum: calc(var(—r) + var(—g) + var(—b));
—perceived-lightness: calc(var(—sum) / 255);

/* черный или белый цвет */
color: hsl(0, 0%, calc((var(—perceived-lightness) — var(—threshold)) * -10000000%));
}

Для рамок нужно использовать RGBA и с помощью альфа-канала установить прозрачность. Более темный оттенок получается вычитанием 50 из каждого канала.

В WebKit на iOS есть странная ошибка: если в кратком объявлении свойства  в формате RGBA использовать переменные, рамка отображается черной. Чтобы этого избежать, нужно использовать развернутое объявление.

.btn {
/* (…) */
/* темная рамка, если светлота больше, чем граничное значение */
—border-alpha: calc((var(—perceived-lightness) — var(—border-threshold)) * 100);

border-width: .2em;
border-style: solid;
border-color: rgba(calc(var(—red) — 50), calc(var(—green) — 50), calc(var(—blue) — 50), var(—border-alpha));
}

Так как мы больше не используем HSL для фона, то для получение дополнительного цвета воспользуемся фильтром:

.btn—secondary {
filter: hue-rotate(60deg);
}

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

И вот окончательный вариант:

See the Pen CSS Automatic WCAG contrast font-color depending on element background by Facundo Corradini (@facundocorradini) on CodePen.

Решение на чистом CSS позволяет добиться того же эффекта, что и JavaScript, но при этом требует меньшего объема кода.

Коды цветов в HTML. Основы HTML для начинающих. Урок №11

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я вкратце покажу, как менять цвет текста, и в конце урока вы найдете таблицу цветов для HTML, которые вы сможете использовать для своих веб страниц.
Цвет в оформлении веб страниц, да и вообще в любой дизайнерской сфере, играет большую роль. Удачно подобранный цвет на сайте поможет создать приятную атмосферу.

Для того, чтобы поменять цвет текста, мы используем атрибут «color» для тега «font» (об этом я уже говорил в статье «Форматирование текста»)

<font color="red">499$</font>

Раньше в HTML, чтобы задать цвет тексту, мы использовали только названия цветов, т.е. прописывали их словами:

• Red (красный)
• Orange (оранжевый)
• Yellow (желтый)
• Green (зеленый)
• Blue (голубой)
• Indigo (синий)
• Violet (сиреневый)
• Purple (фиолетовый)
• Pink (розовый)
• Silver (серебряный)
• Gold (золотой)
• Beige (бежевый)
• Brown (коричневый)
• Gray (серый)
• Black (черный)
• White (белый)

Вот так:

<font color="red">красный</font>
 
<font color="Orange">оранжевый</font>
 
<font color="Yellow">желтый</font>
 
<font color="Green">зеленый</font>
 
<font color="Blue">голубой</font>
 
<font color="Indigo">синий</font>
 
<font color="Violet">сиреневый</font>
 
<font color="Purple">фиолетовый</font>
 
<font color="Pink">розовый</font>
 
<font color="Silver">серебряный</font>
 
<font color="Gold">золотой</font>
 
<font color="Beige">бежевый</font>
 
<font color="Brown">коричневый</font>
 
<font color="Gray">серый</font>
 
<font color="Black">черный</font>
 
<font color="White">белый</font>

Результат:

красный оранжевый желтый зеленый голубой синий сиреневый фиолетовый розовый серебряный золотой бежевый коричневый серый черный белый

Благодаря кодам, вы сможете получить массу различных цветов и оттенков.

Если использовать код цвета, то достаточно поставить в атрибуте «color» решетку «#», а потом код цвета:

<font color="#cc0000">красный</font>

Если вы хотите сделать красный немножко потемнее , тогда используйте другой код:

<font color="#8B0000">красный</font>

Результат: красный красный

○ Где брать код цвета?
Вы можете смотреть в таблицу цветов для html, выбирать подходящий цвет, копировать его код и вставлять на веб страницу. Ничего сложного .

А можно цвет кода выводить самому. Нужно только знать, что цвет задаётся в шестнадцатеричной системе счисления (цифры от «0» до «9» и латинские буквы от «a» до «f»).

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

Названия цветов в HTML

В html цвет можно указать с помощью его имени (названия):

HTML поддерживает более 140 названий. Я решил сделать их в виде таблицы ниже. В ней вы найдете все популярные теги кодов цветов в html. Можете обращаться к этой таблице:

Where can I use color fonts?

Now that OpenType-SVG has been adopted as the industry standard, there is good chance that you can start using color fonts across your favorite software and hardware.We keep updating a list of apps and browsers that support color fonts. Here we go:

•  Yes, color fonts are supported
•  Yep, with limitations
•  Nope

Apps

Web browsers

HTML Color: Text or Background

There are a couple of properties you can use to define color – HTML and HTML . As the name suggests, the first one is used to change the color of the background. By using the simple property, you will change the color of the text.

Both HTML background color and color properties can take values defined in names, RGB, RGBA, HEX, HSL or HSLA values.

Powderblue
RGB(176,224,230)
RGBA(176, 224, 230, 1)

#B0E0E6
HSL(187, 52%, 80%)
HSLA(187, 52%, 80%, 1)

 
It’s important to note that the property provides a color for the background of the text, but not for the whole document. If you wish to change the HTML color for the whole page, you should use the attribute in the opening tag of the <body> section:

Example Copy

Значения цвета

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