В этой статье вы найдете специальные ключевые слова, которые используют для обозначения того или иного цвета на сайтах в интернете или при разработке на языках программирования для Web. А также приведены цвета в CSS (таблица названий с примерами)
Цвета CSS позволяют задать цвет текста, ссылки, фона и т.п.
Абсолютно каждый браузер в настоящее время поддерживает 140 цветов: 17 стандартных и 123 дополнительных.
CSS и HTML цвета. Полный обзор
Стандартные цвета
К стандартным относятся следующие цвета:
— aqua
— black
— blue
— fuchsia
— gray
— green
— lime
— maroon
— navy
— olive
— orange
— purple
— red
— silver
— teal
— white
— yellow
Существуют самые различные методы задания CSS цветов, однако 3 из них считаются наиболее распространенными:
— Способ, при котором используются английские названия цветов
— Способ, при котором используется шестнадцатеричное значение HEX
— Способ, при котором используется десятичное RGB значение
Рассмотрим все эти способы
Для того, чтобы уточнить цвет в CSS используются коды. Как правило, текста используются как для переднего, так и для заднего плана. Они могут быть использованы для определения цвета кнопки, маркеров и других декоративных эффектов. Можно создать свои личные значения цветов следующим путем
Шестнадцатизначный код цвета представляет собой то, как выглядит цвет. Стоящие впереди две цифры RR обозначают красный, следующие две GG значат зеленый, и следующие BB означают синий.
| Шестнадцатеричный код | #00FF00 | p {color: #00FF00;} |
| Короткий шестнадцатеричный код | #0F0 | p {color: #0F0;} |
| RGB % | rgb(rrr%,ggg%,bbb%) | p {color: rgb(0%, 100%, 0%);} |
| RGB абсолютный | rgb(rrr,ggg,bbb) | p {color: rgb(0, 255, 0);} |
| Ключевое слово | green, white, black и т.д. | p {color: green;} |
Шестнадцатизначное представление цветов может быть изъято из любого приложения для редактирования фото, картинок, видео и изображений.
Каждому буквенному обозначению цветов присваивается знак # хештега.
- Белый – #FFFFFF
- Черный — #000000
- Красный — #FF0000
- Зеленый — #00FF00
- Синий – #0000FF
- Желтый — #FFFF00
- Морская волна – #00FFFF
- Cиреневый — #FF00FF
Существуют короткие шестнадцатизначные коды цветов
Шестнадцатизначный короткий код цвета — это краткая форма нотации. В данном формате каждая цифра повторяется для того, чтобы получить шестизначное значение.
Шестнадцатизначное значение тут тоже может быть взято из любого приложения для видео и фото-материалов, напрмер:
- Белый — #FFF
- Черный — #000
- Красный — #F00
- Зеленый — #0F0
- Синий — #00F
- Желтый — #FF0
- Морская волна — #0FF
- Сиреневый – #F0F
Цвета СSS в RGB значении
RGB-значение — это код цвета, созданный благодаря rgb.
Такое свойство берет три значения: для красного, синего и зеленого цвета. Обозначение может быть числом от 0 до 255 или обозначаться процентом. Например:
- Белый – rgb(255,255,255)
- Черный — rgb(0,0,0)
- Красный – rgb(255,0,0)
- Зеленый –rgb (0,255,0)
- Синий –rgb(0,0,255)
- Желтый –rgb(255,255,0)
- Морская волна –rgb(0,255,255
- Сиреневый –rgb(255,0,255)
Безопасные цвета браузера
Существуют 216 цветов. Они безопасны и никаким образом не зависят от компьютера. Их обозначение CSS начинается от 000000 и заканчивается FFFFFF. Эти цвета гарантированно будут работать на компьютере и верно отображать цвета при работе с 256 цветовой гаммой.
Справка!
HTML гамма цветов помогает выбрать нужный цвет в HEX,RGB,RGBA,HSV и д.р. Для этого нужно нажать на поля цветов, а чтобы выбрать цвет еще точнее, нужно перемещать цвет колесиком мыши.
Обратите внимание!
Помимо этого можно менять параметры цвета с помощью поля ввода.
Дополнительной возможностью является то, что можно скачать выбранный цвет. Для этого нужно нажать «скачать цвет» — откроются параметры. Можно выбрать формат и размер картинки. Также есть возможность скачивать полупрозрачные картинки в форматах SVG и PNG.
Цвета в CSS — Таблица названий с примерами
Свойство color
СSS-свойство color в MDN позволяет задавать основной цвет элемента, благодаря которому описывается цвет текста и элемента. На основании данных значений устанавливается currentColor
При настройке данного процесса используется:
- Название цвета
- Шестнадцатизначный код
- Rgb , Hs1 функции
- INITIAL ,UNSET значения
- Основное слово currentColor
Ключевое слово unset
MDN даёт понять, что ключевое слово unset даёт возможность сбросить значение свойства до унаследованного значения, если свойство естественным образом наследует это значение от родительского элемента.
Справка!
При ином исходе событий, сбрасывается до его исходного значения.
Возвращаемся к предыдущему примеру и делаем так, чтобы ссылка унаследовала бы цвет от родительского элемента:
- .hero a { color: unset; }
Вывод:
При использовании вышеупомянутой конструкции мы можем сбросить цвет до цвета, который может быть унаследован от элемента .hero. А это — именно то, что нам нужно.
