Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Цвет CSS

Как назначить цвет в языке CSS

Цвета
Назначение цвета в CSS
Описание назначения цвета в языке CSS.

В языке CSS, назначить цвет HTML-тегам можно тремя способами:
1. С помощью имени цвета,
2. С помощью десятичной системы счисления в RGB-формате,
3. С помощью шестнадцатеричной системы счисления в RGB-формате.

Цвет в CSS по имени

Наиболее простой способ назначить цвет в CSS, это указать его имя:

color: red;

где red — это имя цвета (в данном случае — красный).

Вот некоторые имена цветов, выступающих в качестве значений различных свойств CSS:

Имя цвета Его вид Перевод
red Красный
green Зелёный
blue Синий
white Белый
black Чёрный

Цвет в CSS, используем десятичную систему счисления и RGB-формат

RGB — Red, Green, Blue.

Все цвета в языке CSS, можно записать в десятичной системе счисления. Например:

color: red;

будет:

color: rgb(255, 0, 0);

При использовании десятичной системы счисления можно использовать числа от 0 до 255.

В строке color: rgb(255, 0, 0);, сначала идёт CSS-свойство color:, затем его значение rgb(255, 0, 0). Каждое из трёх чисел 255, 0, 0, относится к определённому цвету:

255 — первое число, относится к красному цвету RED,
0 — второе число, относится к зелёному цвету GREEN,
0 — третье число, относится к синему цвету BLUE.

Чтобы сделать чистый зелёный цвет, нужно значение написать так rgb(0, 255, 0), чистый синий цвет будет выглядеть так rgb(0, 0, 255).

Чтобы получить темно синий цвет, нужно уменьшить третье число и написать например 100, чем меньше будет третье число тем более темнее будет синий цвет.

Запишем рядом два цвета с синим оттенком, у первого будет значение 255, а у второго 100.

Чистый синий rgb(0, 0, 255)
Тёмно-синий rgb(0, 0, 100)

Добавим к нашей первой таблице, еще один столбик, где будет располагаться код цвета в десятичной системе счисления:

Имя цвета Его вид Перевод RGB10
red Красный rgb(255, 0, 0)
green Зелёный rgb(0, 128, 0)
blue Синий rgb(0, 0, 255)
white Белый rgb(255, 255, 255)
black Чёрный rgb(0, 0, 0)
Чистый зелёный rgb(0, 255, 0)

Увеличивая и уменьшая числа в RGB-формате, можно получить практически любой цвет. Например "смешав" чистый красный и чистый зелёный цвет, мы получим чистый жёлтый цвет:

Чистый жёлтый rgb(255, 255, 0)

Уменьшая число у зелёного цвета мы постепенно будем получать оранжевые оттенки, давайте запишем число зелёного цвета равным 100:

Оранжевый rgb(255, 100, 0)

Цвет в CSS, используем шестнадцатиричную систему счисления и RGB-формат

В повседневной жизни, мы с вами пользуемся десятичной системой счисления от 0 до 9. При работе с цветом, в программировании и дизайне, часто используют шестнадцатеричную систему счисления от 0 до F, где F = 15.

A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.

Каждый цвет можно записать в шестнадцатиричной системе счисления. Например:

color: red;

будет:

color: #ff0000;

При использовании шестнадцатиричной системы счисления можно использовать числа от 0 до ff, где ff = 255.

Если к нашей таблице добавить еще один столбик, с описанием цвета в шестнадцатиричной системе счисления, то она будет выглядеть так:

Имя цвета Его вид Перевод RGB10 RGB16
red Красный rgb(255, 0, 0) #ff0000
green Зелёный rgb(0, 128, 0) #008000
blue Синий rgb(0, 0, 255) #0000ff
white Белый rgb(255, 255, 255) #ffffff
black Чёрный rgb(0, 0, 0) #000000
Чистый зелёный rgb(0, 255, 0) #00ff00

Дополнительную информацию о цвете, RGB-формате и шестнадцатеричной системе счисления вы также можете почитать на странице: HTML-цвета

Таблица цветов

Ниже приведена небольшая таблица цветов c их именами:

Имя цвета Его вид Перевод
white Белый
ivory Ивори (слоновая кость)
silver Серебряный
gray Серый
black Чёрный
maroon Тёмно-бордовый
red Красный
orange Оранжевый
gold Золотой
yellow Жёлтый
olive Оливковый
lime Лайм
green Зелёный
aqua Морская волна
blue Синий
navy Нави
teal Бирюзовый
fuchsia Фуксиновый
purple Пурпурный

Читать далее: Типы носителей в CSS

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget