Style color white css

Цветовое оформление в CSS

Данная статья будет посвящена работе с цветом в CSS, будут рассмотрены способы указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов.

В CSS для указания конкретного цвета текста для элемента, необходимо использовать свойство color и затем указать необходимое значение, используя следующий синтаксис:

Давайте разберем отдельно, какие значения можно использовать с этим свойством и частично разберем примеры работы с цветом заднего фона. И начнём мы наше обучение с самой старой системы задания цвета – шестнадцатеричной (Hexadecimal).

Шестнадцатеричные значения

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

RR (красный)

GG (зеленый)

BB (синий)

Значение, фактически содержит три шестнадцатеричных числа (RR — для красного, GG — для зеленого, BB — для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Например, значение #0000FF соответствует синему цвету, так как компонент BB установлен в его самое высокое значение — (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Обращаю Ваше внимание, что допускается сокращать шестнадцатеричные числа до трех символов, в том случае если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F, или значение #777777 можно указать следующим образом:

p.intro < color: #777; /* задаём темно-серый цвет для всех абзацев с классом intro */ > 

Цветовая модель RGB

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

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

p < color: rgb(0,0,255); /* задаём синий цвет для всех абзацев */ > 

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

h2 < color: rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */ > 

Цветовая модель RGBA

Следующая система цвета, которая используется в CSS называется RGBA, она использует в своем синтаксисе альфа-значение, которое определяет степень прозрачности конкретного пиксела. RGBA является более современным методом задания цвета и имеет следующий синтаксис:

• R означает Red (красный)
• G означает Green (зеленый)
• B означает Blue (синий)
• A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:

Давайте для демонстрации возможностей цветовой модели RGBA рассмотрим пример в котором на примере зелёного цвета, мы будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:

 html> head> meta charset = "UTF-8"> title>Применение RGBA в CSS title> style> div < display: inline-block; /* Выстраиваем элементы в линейку, как строчные элементы, при этом у нас имеется возможность задавать размеры, как и всем блочным элементам. */ width: 60px; /* устанавливаем ширину для всех элементов */ height: 60px; /* устанавливаем высоту для всех элементов */ > .test1 < background-color: rgba(0, 255, 0, .1); /* задаем цвет заднего фона, обратите внимание на значение, допускается сокращать запись 0.1 до .1 */ > . /* и так до десятого блока с шагом 0.1 */ .test10 < background-color: rgba(0, 255, 0, 1); > style> head> body> div class="test1">.1 div> . /* и так до десятого блока */ div class="test10">1 div> body> html> 

На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен. Во-вторых, мы использовали CSS свойство display , которое определяет, как должен отображаться элемент. В нашем случае, с этим свойством мы использовали значение inline-block , которое позволяет нам выстроить все элементы в линейку (сделали элементы «блочно-строчными»).

Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее.

Цветовые модели HSL и HSLA

К еще одному методу задания цвета в CSS относится система HSL, её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:

Система HSL использует следующий синтаксис:

hsl(от 0° до 360° , от 0 до 100% , от 0% до 100% ), где:

Первое значение – это тон, который указывается в градусах от 0 ° до 360° . Градусы соответствуют цвету на круге оттенков (изображенном ниже):

Красный цвет соответствует значениям — 0° и 360° , желтый — 60° , зеленый — 120° , голубой — 180° , синий — 240° , фиолетовый — 300° и так далее.

Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100% , где 0% — полное отсутствие насыщенности (тусклый серый), а 100%` это чистый и яркий цвет.

Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0° ):

 html> head> meta charset = "UTF-8"> title>Применение HSL в CSS title> style> div < display: inline-block; /* выстраиваем элементы в линейку, как строчные элементы */ width: 60px; /* устанавливаем ширину для всех элементов */ height: 60px; /* устанавливаем высоту для всех элементов */ > .test1 < background-color: hsl(0, 10%, 50%); /* 0 – соответствует красному цвету, 10% - насыщенность, 50%- осветленность (соответствует чистому цвету) */ > . /* и так до десятого блока с шагом 10% (увеличение насыщенности) */ .test10 < background-color: hsl(0, 100%, 50%); /* насыщенность 100% (чистый и яркий цвет) */ > .test11 < background-color: hsl(0, 100%, 10%); /* 0 – соответствует красному цвету, 100% - насыщенность (чистый и яркий цвет), 10%- осветленность */ > . /* и так до двадцатого блока с шагом 10% (увеличение осветленности)*/ .test20 < background-color: hsl(0, 100%, 100%); /* как вы можете заметить осветленность 100% дает белый цвет */ > style> head> body> div class="test1"> hsl(0, 10%, 50%) div> . /* и так до десятого блока */ div class="test10"> hsl(0, 100%, 50%) div> br>/* переводим строку */ div class="test11" style="color:white">hsl(0, 100%, 10%) div> /* добавляем внутренний стиль для элемента (цвет текста белый) */ . /* и так до двадцатого блока */ div class="test10"> hsl(0, 100%, 100%) div> body> html> 

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

Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300° ):

 html> head> meta charset = "UTF-8"> title>Применение HSLA в CSS title> style> div < display: inline-block; /* выстраиваем элементы в линейку, как строчные элементы */ width: 60px; /* устанавливаем ширину для всех элементов */ height: 60px; /* устанавливаем высоту для всех элементов */ > .test1 < background-color: hsla(300, 100%, 50%,.1); /* фиолетовый цвет со 100% насыщенностью и 50% осветлённостью с добавлением альфа-канала, который задает уровень прозрачности */ > . /* и так до десятого блока с шагом 0.1 */ .test10 < background-color: hsla(300, 100%, 50%, 1); /* альфа-канал полностью непрозрачный */ > style> head> body> div class="test1">hsla(300, 100%, 50%,.1) div> . div class="test10">hsla(300, 100%, 50%, 1) div> body> html> 

Предопределённые цвета

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

p.intro < color: gray; /* задаём серый цвет для всех абзацев с классом intro */ > i < color: orange; /* задаём оранжевый цвет для всех элементов */ > h2:first-child < color: red; /* задаём красный цвет для всех элементов , которые являются первыми дочерними элементами своего родителя */ > 

Источник

HTML color code for #FFFFFF

This text is placeholder text to give you an idea of how this color looks when used as a font color on a black background. The following sentence uses every English character: The quick brown fox jumps over the lazy dog. 0123456789 Bold text. Italic text. With Underline.

HTML using color code example

HTML using W3C color name example

CSS code example

Lighter colors

Darker colors

Analogous colors

Trinary colors

Other colors containing «white»

The following table is a list of other colors containing the keyword «white» in the color name. This table can give you other ideas for shades of white.

Code	Color
#DADBDD	Silver White
#DBE9FA	White Blue
#F8F8FF	GhostWhite (W3C)
#E8F1D4	Chrome White
#FFFDD0	Cream White
#FAEBD7	AntiqueWhite (W3C)
#FFDEAD	NavajoWhite (W3C)
#E8E4C9	Dirty White
#DFD3E3	Purple White
#E1D9D1	Dark White
#E9E4D4	Ash White
#EFEBD8	Warm White
#EDE6D6	White Chocolate
#F8F0E3	Off White
#F8F6F0	Pearl White
#F3E8EA	Red White
#EAEEE9	White Ice
#F9F6EE	Bone White
#FFFAF0	FloralWhite (W3C)
#FFFFF4	White Gold
#FFFFF7	Light White
#F5F5F5	WhiteSmoke (W3C)
#FEFCFF	Milk White
#FFFEFA	Half White

Enter any HTML color code into our search to get results like this page.

Источник