САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Цвета



Цвета задаются с помощью предопределенных имен цвета, или значений RGB, HEX, HSL, RGBA, HSLA.


Имена цвета

В HTML цвет можно указать с помощью имени цвета:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Редактор кода »

HTML поддержка 140 стандартных названий цветов.


Цвет фона

Можно задать цвет фона для HTML элементов:

Привет Мир


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

<h1 style="background-color:DodgerBlue;">Привет Мир</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Редактор кода »

Цвет текста

Вы можете установить цвет текста:

Привет Мир

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

<h1 style="color:Tomato;">Привет Мир</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Редактор кода »

Цвет границ

Вы можете установить цвет границ:

Привет Мир

Привет Мир

Привет Мир

Пример

<h1 style="border:2px solid Tomato;">Привет Мир</h1>
<h1 style="border:2px solid DodgerBlue;">Привет Мир</h1>
<h1 style="border:2px solid Violet;">Привет Мир</h1>
Редактор кода »

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

В HTML, цвет также может быть задан с помощью RGB значений, HEX значений, 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>
Редактор кода »

Значение RGB

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

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

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

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

Чтобы отобразить черный цвет, все параметры цвета должны быть установлены на 0, например: rgb (0, 0, 0).

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

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

 

RED

255

GREEN

0

BLUE

0

Пример

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

Редактор кода »

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

Пример

rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)

Редактор кода »

Значение HEX

В HTML цвет может быть задан с помощью шестнадцатеричного значения в форме:

#rrggbb

Где rr (красный), gg (зеленый) и bb (синий) являются шестнадцатеричными значениями между 00 и ff (такими же, как десятичные 0-255).

Например, #ff0000 отображается красным цветом, так как красный цвет имеет наибольшее значение ff, а остальные - наименьшее значение 00.

Пример

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

Редактор кода »

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

Пример

#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff

Редактор кода »

Значение HSL

В HTML цвет можно задать с помощью оттенка, насыщенности и осветления HSL в форме:

hsl(Оттенок, Насыщенность, Осветление)

Оттенок - это градус на цветовом круге от 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%, чтобы получить более темные и светлые оттенки:

Пример

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Редактор кода »

Значение RGBA

Значения цвета RGBA являются расширением значений цвета RGB с альфа каналом - который определяет непрозрачность для цвета.

Значение цвета RGBA указывается с помощью:

rgba(красный, зеленый, синий, альфа)

Параметр alpha является числом от 0,0 (полностью прозрачный) до 1,0 (совсем не прозрачный):

Пример

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

Редактор кода »

Значение HSLA

Значения цвета HSLA являются расширением значений цвета HSL с альфа каналом - который определяет непрозрачность для цвета.

Значение цвета HSLA указывается с помощью:

hsla(hue, насыщение, освещенность, альфа)

Параметр alpha является числом от 0,0 (полностью прозрачный) до 1,0 (совсем не прозрачный):

Пример

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Редактор кода »