CSS | Цвета

Опубликовано: 1 Марта, 2022

Свойство CSS Color используется для установки цвета элементов HTML. Это свойство используется для установки цвета шрифта, цвета фона и т. Д.

Цвет элемента можно определить следующими способами:

Встроенный цвет
Формат RGB
Формат RGBA
Шестнадцатеричное представление
HSL
HSLA

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

h1 {
    цвет: название цвета;
}

Example:

<html>
    <head>
        <title>CSS color property</title>
        <style>
            h1 {
                color:green;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
        </h1>
    </body>
</html>                    

Выход:

Формат RGB: формат RGB (красный, зеленый, синий) используется для определения цвета элемента HTML путем указания диапазона значений R, G, B от 0 до 255. Например: значение RGB красного цвета равно (255, 0, 0), зеленый цвет (0, 255, 0), синий цвет (0, 0, 255) и т. Д.
Синтаксис:

h1 {
    цвет: rgb (R, G, B);
}

Example:

<html>
    <head>
        <title>CSS color property</title>
        <style>
            h1{
                color: rgb(0, 153, 0);
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
        </h1>
    </body>
</html>                    

Выход:

Формат RGBA: формат RGBA аналогичен формату RGB, но разница в том, что RGBA содержит A (альфа), который определяет прозрачность элементов. Значение альфа находится в диапазоне от 0,0 до 1,0, где 0,0. представляет собой полностью прозрачный, а 1.0 - непрозрачный.
Синтаксис:

h1 {
    цвет: rgba (R, G, B, A);
}

Example:

<html>
    <head>
        <title>CSS RGBA color property</title>
        <style>
            h1 {
                color:rgba(0, 153, 0, 0.5);
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
        </h1>
    </body>
</html>                    

Выход:

Шестнадцатеричное представление: шестнадцатеричное представление начинается с символа #, за которым следуют 6 символов в диапазоне от 0 до F. Например: красный # FF0000, зеленый # 00FF00, синий # 0000FF и т. Д.
Синтаксис:

h1 {
    цвет: # (0-F) (0-F) (0-F) (0-F) (0-F) (0-F);
}

Пример:

Выход:

HSL: HSL означает оттенок, насыщенность и яркость соответственно. В этом формате используется цилиндрическая система координат.

Оттенок: оттенок - это степень цветового круга. Его значение находится в диапазоне от 0 до 360, где 0 представляет красный цвет, 120 представляет зеленый и 240 представляет синий цвет.
Насыщенность: принимает процентное значение, где 100% означает полное насыщение, а 0% означает полное ненасыщение (серый цвет).
Яркость: принимает процентное значение, где 100% представляет белый цвет, а 0% - черный.

Синтаксис:

h1 {
    цвет: hsl (H, S, L);
}

Example:

<html>
    <head>
        <title>CSS hsl color property</title>
        <style>
            h1{
                color:hsl(120, 100%, 30%);
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
        </h1>
    </body>
</html>                    

Выход:

HSLA: свойство цвета HSLA аналогично свойству HSL, но разница в том, что HSLA содержит A (Alpha), который определяет прозрачность элементов. Значение альфа находится в диапазоне от 0,0 до 1,0, где 0,0. представляет собой полностью прозрачный, а 1.0 - непрозрачный.
Синтаксис:

h1 {
    цвет: hsla (H, S, L, A);
}

Example:

<html>
    <head>
        <title>CSS hsla color property</title>
        <style>
            h1 {
                color:hsla(120, 100%, 50%, 0.50);
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
        </h1>
    </body>
</html>                    

Выход:

Цвет текста: используется для установки цвета текста.
Синтаксис:

h1 {
    цвет: имя_цвета;
}

Example:

<html>
    <head>
        <title>CSS text color property</title>
        <style>
            h1 {
                color:#009900;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
        </h1>
    </body>
</html>                    

Выход:

Цвет фона: используется для установки цвета фона элемента HTML.
Синтаксис:

h1 {
    цвет фона: имя_цвета;
}

Example:

<html>
    <head>
        <title>CSS background color property</title>
        <style>
            h1 {
                background-color:green;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
        </h1>
    </body>
</html>                    

Выход:

Цвет границы: используется для установки цвета границы элемента. Border-style используется для установки типа границы.
Синтаксис:

h1 {
    стиль границы: сплошной / пунктирный / пунктирный
    цвет границы: имя_цвета;
}

Example:

<html>
    <head>
        <title>CSS border color</title>
        <style>
            h1 {
                border-style:solid;
                border-color:green;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
        </h1>
    </body>
</html>                    

Выход:

Список цветов: Ниже приведен список нескольких цветов CSS.

Название цвета	Шестнадцатеричный (RGB)	Десятичный (RGB)
красный	FF0000	255, 0, 0
Розовый	FFC0CB	255, 192, 203
апельсин	FFA500	255, 165, 0
Желтый	FFFF00	255, 255, 0
фиолетовый	EE82EE	238, 130, 238
Зеленый	008000	0, 128, 0
Аква	00FFFF	0, 255, 255
Синий	0000FF	0, 0, 255
коричневый	A52A2A	165, 42, 42
белый	FFFFFF	255, 255, 255
серый	808080	128, 128, 128
Чернить	000000	0, 0, 0

HTML CSS

CSS | Цвета

РЕКОМЕНДУЕМЫЕ СТАТЬИ