Css знаки цветов

Задаем цвет текста в CSS. Способы представления цветов — учебник CSS

В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в CSS. Здесь нет ничего сложного: вам понадобится свойство color и значение того цвета, которым вы желаете окрасить текст.<\p>

Пример:

p { color: #211C18; }

В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.

Шестнадцатеричные цвета (hex)

Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F).

Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB).

Иными словами, запись цвета можно представить как #RRGGBB, где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.

Сокращенная запись hex-цветов

Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB. Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.

Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.

Примеры сокращенной записи hex-цветов:

HEX-кодСокращенная запись
#FFDD66 #FD6
#8833FF #83F
#333333 #333
#cccccc #ccc

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

Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green).

Для этого необходимо записать после свойства color ключевое слово rgb, а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:

p { color: rgb(0, 255, 0); }

А вот желтовато-горчичный оттенок имеет такое значение:

color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;

Значение черного цвета записывается как (0, 0, 0), а белого – (255, 255, 255). Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:

color: rgb(100%, 100%, 100%);

Где искать значения цветов

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

Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop.

В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.

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

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

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

Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:

p { color: rgba(94, 81, 3, .9); }

Обратите внимание

Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:

p { color: rgb(94, 81, 3); color: rgba(94, 81, 3, .9); }

Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.

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

Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:

p { color: hsl(165, 100%, 50%); }

Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет.

Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым.

Значение 100% для lightness означает белый цвет, 0% – черный.

Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:

p { color: hsla(165, 100%, 50%, .6); }

HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.

Стандартные цвета HTML

Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:

p { color: black; }

Существует 16 стандартных цветов, которые можно записать в значении свойства color:

Ключевое слово цветаHEX-кодRGB
red #FF0000 255, 0, 0
maroon #800000 128, 0, 0
yellow #FFFF00 255, 255, 0
olive #808000 128, 128, 0
lime #00FF00 0, 255, 0
green #008000 0, 128, 0
aqua #00FFFF 0, 255, 255
teal #008080 0, 128, 128
blue #0000FF 0, 0, 255
navy #000080 0, 0, 128
fuchsia #FF00FF 255, 0, 255
purple #800080 128, 0, 128
white #FFFFFF 255, 255, 255
silver #C0C0C0 192, 192, 192
gray #808080 128, 128, 128
black #000000 0, 0, 0

Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.

Использование таких ключевых слов допустимо, но есть риск, что какое-нибудь слово не воспримется браузером. Поэтому рекомендуется вместо ключевых слов записывать шестнадцатеричный код цвета.

Итоги

В CSS цвет текста задается с помощью свойства color, а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.

Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.

Далее в книге вы узнаете, как задать размер шрифта CSS.

Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/tsvet-teksta

Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных

Давно прошли те дни, когда для иконок в вебе использовались картинки и CSS-спрайты. С развитием веб-шрифтов номером 1 для отображения иконок на сайтах стали иконочные шрифты.

Шрифты — векторные, так что вам не нужно беспокоиться о разрешении экрана.

Для них можно использовать те же CSS-свойства, что и для текста. В результате вы имеете полный контроль над их размером, цветом и стилем. Вы можете добавлять к ним эффекты, трансформировать или декорировать их.

Например, повернуть (rotate), подчеркнуть (underline) или добавить тень (text-shadow).

Иконочные шрифты не идеальны, поэтому все большее число людей предпочитает использовать встроенные SVG-изображения.

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

Важно

Сейчас вы можете обойти большинство этих проблем, что, в целом, делает использование иконочных шрифтов безопасным.

Да, еще одна вещь, которая абсолютно невозможна при использовании иконочных шрифтов: поддержка многоцветности. Только SVG может это сделать.

TL;DR: этот пост позволяет вникнуть в то, как и почему. Если вы хотите понять весь процесс, читайте дальше. В противном случае вы можете посмотреть окончательный код на CodePen.

Читайте также:  Как разместить элементы списка горизонтально

Настройка символов SVG-иконок

Проблема встроенных SVG в том, что они сложны. Вы не хотите копипастить все эти координаты каждый раз, когда нужно использовать одну и ту же иконку. Получится повторяющийся, трудно читаемый и тяжело поддерживаемый код.

Использование SVG-символов позволяет иметь лишь один экземпляр каждого SVG-элемента и использовать его где угодно с помощью ссылки.

Начните с добавления встроенного SVG, спрячьте его, оберните содержимое в тег symbol и задайте ему id.

my-first-icon

Полная разметка SVG-элемента пишется один раз и скрывается.

Затем все, что вам нужно сделать, это создать копию иконки с помощью элемента use.

Получится точная копия вашей оригинальный SVG-иконки.Вот она! Довольна милая, правда?

Вы вероятно заметили атрибут xlink:href — это и есть ссылка между вашей иконкой и оригинальным SVG-изображением.

Важно отметить, что xlink:href — устаревший атрибут SVG. Даже если большинство браузеров все еще поддерживает его, вместо него нужно использовать href. Но дело в том, что некоторые браузеры, например, Safari, не поддерживают ссылки на SVG-ресурсы через атрибут href, поэтому вам все равно нужно указывать xlink:href.

Для безопасности используйте оба атрибута.

Добавление цвета

В отличие от шрифтов, свойство color не действует на SVG-иконки: необходимо использовать атрибут fill для указания цвета. Это значит, что они не наследуют родительский цвет текста, но вы все равно можете стилизовать их через CSS.

.

icon { width: 100px; height: 100px; fill: red;
}
А следовательно, вы можете создавать другие экземпляры этой же иконки разных цветов.

.icon { width: 100px; height: 100px;
}
.icon-red { fill: red;
}
.icon-blue { fill: blue;
}

Это работает, но это не совсем то, что мы хотим.

Все, что мы сделали до сих пор, можно сделать и с помощью обычного иконочного шрифта. То, что мы хотим, — это сделать каждую часть иконки разного цвета. Мы хотим залить разными цветами каждую часть одной иконки, не изменяя другие ее экземпляры, и мы хотим, чтобы было возможно переопределять эти цвета при необходимости.

Сначала у вас может возникнуть идея положиться на специфичность. my-first-icon

.icon-colors .path1 { fill: red;
}
.icon-colors .path2 { fill: green;
}
.icon-colors .path3 { fill: blue;
}

Это не сработает.

Мы пытаемся задать стили для .path1, .path2 и .path3 так, если бы они были вложены в .icon-colors, но технически это не так. use элемент это не плейсхолдер, который заменяется на определенный SVG. Это ссылка, которая копирует содержимое того, на что указывает, в shadow DOM.

И что нам тогда делать? Как мы можем повлиять на содержимое детей, когда говорят, что детей нет в DOM?

CSS-переменные помогут

В CSS некоторые свойства наследуются детьми от предков. Если вы укажете цвет текста для body, то весь текст на странице унаследует этот цвет, пока он не будет переопределен. Предок не знает детей, но наследуемые свойства все равно передаются.

В примере выше мы наследуем свойство fill. Посмотрите еще раз и вы увидите, что класс, в котором мы определили этот цвет fill добавляется к экземплярам иконки, а не к ее определению. Так мы смогли получить разноцветные копии одного источника.

Но вот проблема: мы хотим передать разные цвета для разных частей оригинальной SVG-иконки, но есть только один атрибут fill, который мы можем наследовать.

Встречайте CSS-переменные.

CSS-переменные объявляются в наборах правил так же, как и любое другое свойство. Вы можете назвать их как хотите и присвоить им любое допустимое CSS значение. Затем вы определите через эту переменную значение свойства самого элемента или его ребенка, и оно будет наследоваться.

.parent { —custom-property: red; color: var(—custom-property);
}

Все дети .parent будут иметь текст красного цвета..parent { —custom-property: red;
}
.child { color: var(—custom-property);
}

Все .child, вложенные в .parent, будут иметь текст красного цвета.

Теперь давайте применим эту концепцию для нашего SVG-символа. Мы будем использовать атрибут fill для каждой части path в определении нашей SVG-иконки и зададим им разные CSS-переменные. Затем мы назначим им разные цвета.

my-first-icon

.icon-colors { —color-1: #c13127; —color-2: #ef5b49; —color-3: #cacaea;
}

И… это работает!С этого момента все, что нам нужно для создания копии с другой цветовой схемой, это написать новый класс.

.icon-colors-alt { —color-1: brown; —color-2: yellow; —color-3: pink;
}

Если вы все еще хотите монохромную иконку, вам не нужно повторять один и тот же цвет для каждой CSS-переменной. Вместо этого вы можете определить одно правило для fill: т.к. в этом случае CSS-переменные не определены, будет использоваться определение свойства fill..icon-monochrome { fill: grey;
}

Свойство fill будет работать, потому что атрибут fill исходного SVG задан с неопределенными значениями CSS-переменных.

Как назвать мои CSS-переменные?

Обычно используют один из двух способов именования в CSS: описательный или семантический. Описательный — это значит назвать переменную по названию самого цвета: если ваш цвет #ff0000, вы называете переменную —red.

Семантический — это значит назвать переменную по ее назначению: если вы используете цвет #ff0000 для ручки чашки, вы называете переменную —cup-handle-color.

Возможно вашим первым желанием будет использовать описательный способ наименований. Это кажется естественным, поскольку цвет #ff0000 может использоваться и для других вещей, помимо ручки чашки.

CSS-переменную —red можно использовать и для других частей иконки, которые должны быть красными. В конце концов, так работает методология utility-first CSS и она хороша.

Совет

Проблема в том, что в нашем случае мы не можем применять атомные классы к элементам, которые хотим стилизовать. Принципы utility-first не применимы, так как у нас есть только ссылка для каждой иконки, а мы должны стилизовать ее через вариации классов.

Использование семантического способа наименований, как например, —cup-handle-color, в нашем случае более уместно. Когда вам нужно изменить цвет какой-то части иконки, вы точно знаете, что и как вам нужно переопределить. Имя класса останется актуальным независимо от того, какой цвет вы назначили.

По умолчанию или не по умолчанию

Заманчивая идея — сделать ваши иконки по умолчанию разноцветными. В этом случае вы сможете использовать их без дополнительной стилизации, и только в случае необходимости добавлять отдельный класс.

Добиться этого можно двумя способами: через :root или через var() default.

:root

Вы можете определить все ваши CSS-переменные в селекторе :root. Это позволит держать их все в одном месте и «делиться» схожими цветами. :root имеет самую низкую специфичность, поэтому его легко переопределить.:root { —color-1: red; —color-2: green; —color-3: blue; —color-4: var(—color-1);
}
.

icon-colors-alt { —color-1: brown; —color-2: yellow; —color-3: pink; —color-4: orange;
}

Однако, у этого метода есть существенные недостатки. Для начала, хранение определений цвета отдельно от соответствующих иконок может сбить с толку.

Когда вы решите переопределить их, вам придется прыгать туда-обратно между селектором класса и :root. Но, что еще более важно, этот метод не позволяет вам изменять ваши CSS-переменные, поэтому вы не можете повторно использовать одни и те же имена.

В большинстве случаев, когда в иконке используется только один цвет, я называю переменную —fill-color. Это просто, понятно и позволяет использовать это наименование для всех одноцветных иконок. Если я определю все переменные в селекторе :root, я не смогу иметь несколько переменных —fill-color.

Я буду вынуждена определять —fill-color-1, —fill-color-2 или использовать пространства имен такие, как —star-fill-color, —cup-fill-color.

var() default

Функция var(), которую вы используете для назначения CSS-переменной для свойства, может принимать значение по умолчанию в качестве второго аргумента.

my-first-icon

Пока вы не определите —color-1, —color-2 и —color-3, иконка будет использовать значения по умолчанию, установленные для каждого path.

Это решает проблему глобального определения, которую мы имеем при использовании :root, но будьте осторожны: теперь у вас есть значение по умолчанию, и оно выполняет свою работу. Таким образом, вы больше не можете написать только одно свойство fill, чтобы сделать иконку монохромной.

Вам нужно назначать цвет для каждой CSS-переменной, используемой в иконке, по отдельности. Установка значений по умолчанию может быть полезна, но это компромисс. Я предлагаю не привыкать к этому, и делать только тогда, когда это имеет смысл для конкретного проекта.

Как это все поддерживается браузерами?

CSS-переменные поддерживаются всеми современными браузерами, но, как вы вероятно догадались, IE не поддерживает их, совсем. Даже IE11, и поскольку его развитие было прекращено в пользу Edge, нет никаких шансов, что он когда-либо будет их поддерживать.

Но только из-за того, что переменные не работают в браузере, который вам нужно поддерживать, не значит, что вы должны полностью от них отказаться.

В таких случаях используйте graceful degradation: предлагайте разноцветные иконки современным браузерам, а для старых указывайте запасной цвет.

Читайте также:  Html тег

Все, что вам нужно сделать, — это добавить определение цвета, которое будет работать только, если CSS-переменные не поддерживаются. Этого можно добиться, указав свойству fill резервный цвет. Если CSS-переменные поддерживаются, это объявление не будет учтено. Если же это не так, оно сработает.

Если вы используете Sass, вы можете записать эту проверку в @mixin.

@mixin icon-colors($fallback: black) { fill: $fallback; @content;
}
Теперь можно определять цветовые схемы, не беспокоясь о поддержке браузеров..cup { @include icon-colors() { —cup-color: red; —smoke-color: grey; };
}
.cup-alt { @include icon-colors(green) { —cup-color: green; —smoke-color: grey; };
}

Передача CSS-переменных в mixin через @content необязательна. Если вы сделаете это снаружи, скомпилированный CSS будет таким же. Но может быть полезно держать все это в одном месте.

Вы можете проверить этот пример в разных браузерах. В последних версиях Firefox, Chrome и Safari последние две чашки будут соответственно красной с серым паром и синей с серым паром. В Internet Explorer и Edge ниже 15 версии третья иконка будет вся красная, а четвертая — вся синяя.

Источник: https://habr.com/post/348194/

Свойства цвета в CSS

Текст на сайте.

Результат:

Фон сайта будет красного цвета.

Цвет текста

color

В CSS вы можете задавать цвет каждому элементу отдельно, например, цвет текста для всего сайта

красным, цвет заголовка

серым, 

синим, 

зеленым.

color: #000000;

Пример:

Заголовок-1

Заголовок-2

Заголовок-3

Текст на сайте

Результат:

Цвет в CSS можно задавать тремя способами

[1-способ. ] По названию цвета.

p { color: yellow;  /* Цвет текста желтый */ }

[2-способ. ] По шестнадцатеричному значению.

p { color: cc0000;  /* Цвет текста красный */ }

[3-способ. ] С помощью RGB.

p { color: RGB(249, 231, 16); /* Цвет текста желтый */ }

*** Практика***

Давайте теперь для закрепления темы объединим «цвет фона»  и «цвет текста» в одном файле.

Пример:

Текст на сайте

Результат:

Цвет рамки css

border-color

Как задать цвет рамки? Сейчас мы с вами это выясним.
Чтобы задать цвет рамки, достаточно прописать правило border-color.

border-color: red; /* Цвет границы */

или

border-color: #cc0000; /* Цвет границы */

или

border: 1px solid #cc0000; /* Цвет границы */

Пример:

Текст на сайте

Результат:

Цвет ссылки css

Теперь пришло время поговорить о том, как задать цвет ссылки через CSS.

A { color: red; /* Цвет ссылок */ }

Значения:

visited — Стиль для посещенной ссылки.

active — Стиль для нажатой ссылки.

hover — Стиль ссылки при наведении на нее курсора.

Пример:

Ссылка сайта

Результат:

Цвет ссылок будет красного цвета.
Цвет посещенных ссылок будет серого цвета. Цвет активных ссылок будет черного цвета.

Цвет ссылок при наведении курсора будет желтого цвета.

Коды цветов css

Стандартные цвета:

#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#CCCCCC
#FF00FF
#FFFFFF
#663333

Читайте полную информацию «коды цветов в CSS — / R G B / HTML»

Вы можете воспользоваться специальной бесплатной программой, которая может сканировать цвет с любой точки экрана, а также предлагает палитру цветов. Большой плюс этой программы в том, что все цвета переводятся сразу в HTML код (Пример: #cc0000). Чтобы скачать программу и посмотреть более подробную информацию, перейдите здесь.

Вот и все, что я хотел рассказать по теме «Свойства цвета в CSS«.
Если вы интересуетесь CSS, HTML и вообще созданием сайта, рекомендую подписаться на обновление моего блога, чтобы быть всегда в курсе новых тем. Форма подписки сразу после кнопок социальных сетей.

Последние новости категории:

Источник: https://bloggood.ru/css-osnovi-primer-podskazki/svojstva-cveta-v-css.html/

Спецсимволы и подбор цвета(HEX/RGB) в HTML

Бывает необходимость вставить на свой сайт специальные символы, которых нет на вашей клавиатуре, а для вставки таких символов необходимо знать определенные коды.

Самым популярным таким символом можно считать знак Copyright © — обычно располагаемый в нижней части сайта, перед логотипом или ссылкой логотипа.

Так же было бы неплохо подобрать цвета самого спецсимвола, а то и возможно его фона.

Спецсимволы © ® ™ ≈ § ¶

Так как некоторые символы не входят в часть символов на клавиатуре, то в этом случае можно вводить нужные символы с помощью специальных кодов. Коды обычно начинаются с символа (&). Потом за ним следует название символа, либо числовой код и завершается он точкой с запятой (;).

Я приведу пример наиболее часто используемых спецсимволов.

© © © знак copyright
® ® ® знак зарегистрированной торговой марки
знак торговой марки
две волнистые черты
левая одиночная угловая кавычка
правая одиночная угловая кавычка
§ § § параграф
символ параграфа
знак бесконечности
˜ ˜ ˜ тильда

Символы “”, используемые для указания тегов лучше вставлять, используя спецсимволы. Так как Web-документ может интерпретироваться не так как это вы задумали.

Также в моей маленькой программке для отображения основных HTML Тегов я добавил более полный список спецсимволов. Их количество равно около 300 штук. Вы можете скачать ее, нажав на кнопку внизу статьи – СКАЧАТЬ. Если в ней нажать на HTML -> Символы вы получите полный список спецсимволов.

Цвета в HTML

Подбор цвета для фона или шрифта это весьма  деликатное дело. Но прежде всего, стоит сказать, что в HTML’е цвет обознается шестнадцатеричным кодом (HEX). А также можно использовать и обозначение в стиле (RGB), сочетание красного, синего и зеленого.

Пример Кодов (значения) цветов:

Цвет                    Код HEX              Код RGB

черный               #000000              rgb(0,0,0)

красный             #FF0000              rgb(255,0,0)

зеленый             #00FF00              rgb(0,255,0)

синий                 #0000FF              rgb(0,0,255)

желтый               #FFFF00               rgb(255,255,0)

бирюзовый         #00FFFF               rgb(0,255,255)

фиолетовый       #FF00FF               rgb(255,0,255)

серый                 #C0C0C0             rgb(192,192,192)

белый                 #FFFFFF               rgb(255,255,255)

В программе Programming for web в разделе HTML -> Колор вы можете подобрать себе любой цвет фона и шрифта, чтобы предварительно посмотреть как тот или иной цвет сочетается.

Подробнее о программе

Скачать

Источник: https://www.white-windows.ru/special-characters-and-recruitment-color-in-html/

Коды цветов в CSS



Список, представленный ниже, содержит названия цветов, поддерживаемые всеми браузерами.

Такой же список, но отсортированный по названию

Название цветаHEX-кодЦвет
Black  #000000
Navy  #000080
DarkBlue  #00008B
MediumBlue  #0000CD
Blue  #0000FF
DarkGreen  #006400
Green  #008000
Teal  #008080
DarkCyan  #008B8B
DeepSkyBlue  #00BFFF
DarkTurquoise  #00CED1
MediumSpringGreen  #00FA9A
Lime  #00FF00
SpringGreen  #00FF7F
Aqua  #00FFFF
Cyan  #00FFFF
MidnightBlue  #191970
DodgerBlue  #1E90FF
LightSeaGreen  #20B2AA
ForestGreen  #228B22
SeaGreen  #2E8B57
DarkSlateGray  #2F4F4F
LimeGreen  #32CD32
MediumSeaGreen  #3CB371
Turquoise  #40E0D0
RoyalBlue  #4169E1
SteelBlue  #4682B4
DarkSlateBlue  #483D8B
MediumTurquoise  #48D1CC
Indigo   #4B0082
DarkOliveGreen  #556B2F
CadetBlue  #5F9EA0
CornflowerBlue  #6495ED
MediumAquaMarine  #66CDAA
DimGray  #696969
SlateBlue  #6A5ACD
OliveDrab  #6B8E23
SlateGray  #708090
LightSlateGray  #778899
MediumSlateBlue  #7B68EE
LawnGreen  #7CFC00
Chartreuse  #7FFF00
Aquamarine  #7FFFD4
Maroon  #800000
Purple  #800080
Olive  #808000
Gray  #808080
SkyBlue  #87CEEB
LightSkyBlue  #87CEFA
BlueViolet  #8A2BE2
DarkRed  #8B0000
DarkMagenta  #8B008B
SaddleBrown  #8B4513
DarkSeaGreen  #8FBC8F
LightGreen  #90EE90
MediumPurple  #9370D8
DarkViolet  #9400D3
PaleGreen  #98FB98
DarkOrchid  #9932CC
YellowGreen  #9ACD32
Sienna  #A0522D
Brown  #A52A2A
DarkGray  #A9A9A9
LightBlue  #ADD8E6
GreenYellow  #ADFF2F
PaleTurquoise  #AFEEEE
LightSteelBlue  #B0C4DE
PowderBlue  #B0E0E6
FireBrick  #B22222
DarkGoldenRod  #B8860B
MediumOrchid  #BA55D3
RosyBrown  #BC8F8F
DarkKhaki  #BDB76B
Silver  #C0C0C0
MediumVioletRed  #C71585
IndianRed   #CD5C5C
Peru  #CD853F
Chocolate  #D2691E
Tan  #D2B48C
LightGrey  #D3D3D3
PaleVioletRed  #D87093
Thistle  #D8BFD8
Orchid  #DA70D6
GoldenRod  #DAA520
Crimson  #DC143C
Gainsboro  #DCDCDC
Plum  #DDA0DD
BurlyWood  #DEB887
LightCyan  #E0FFFF
Lavender  #E6E6FA
DarkSalmon  #E9967A
Violet  #EE82EE
PaleGoldenRod  #EEE8AA
LightCoral  #F08080
Khaki  #F0E68C
AliceBlue  #F0F8FF
HoneyDew  #F0FFF0
Azure  #F0FFFF
SandyBrown  #F4A460
Wheat  #F5DEB3
Beige  #F5F5DC
WhiteSmoke  #F5F5F5
MintCream  #F5FFFA
GhostWhite  #F8F8FF
Salmon  #FA8072
AntiqueWhite  #FAEBD7
Linen  #FAF0E6
LightGoldenRodYellow  #FAFAD2
OldLace  #FDF5E6
Red  #FF0000
Fuchsia  #FF00FF
Magenta  #FF00FF
DeepPink  #FF1493
OrangeRed  #FF4500
Tomato  #FF6347
HotPink  #FF69B4
Coral  #FF7F50
Darkorange  #FF8C00
LightSalmon  #FFA07A
Orange  #FFA500
LightPink  #FFB6C1
Pink  #FFC0CB
Gold  #FFD700
PeachPuff  #FFDAB9
NavajoWhite  #FFDEAD
Moccasin  #FFE4B5
Bisque  #FFE4C4
MistyRose  #FFE4E1
BlanchedAlmond  #FFEBCD
PapayaWhip  #FFEFD5
LavenderBlush  #FFF0F5
SeaShell  #FFF5EE
Cornsilk  #FFF8DC
LemonChiffon  #FFFACD
FloralWhite  #FFFAF0
Snow  #FFFAFA
Yellow  #FFFF00
LightYellow  #FFFFE0
Ivory  #FFFFF0
White  #FFFFFF

Заметка: Названия цветов, представленные выше, не являются стандартом W3C.

Консорциум W3C перечисляет 16 валидных названий цветов для HTML и CSS:aqua (аквамарин), black (черный), blue (синий), fuchsia (фуксиновый), gray (серый), green (зеленый), lime (лайм или салатовый), maroon (каштановый), navy (ультрамарин), olive (оливковый), purple (пурпурный), red (красный), silver (серебристый), teal (сизый), white (белый) и yellow (желтый).

При использовании цветов, не входящих в этот список, правильнее будет использовать их шестнадцатеричный код (HEX) или код RGB.

Источник: http://weblabla.ru/reference/css/css_colors_code.html

Задание цвета в CSS3

Вы здесь: Главная — CSS — CSS3 — Задание цвета в CSS3.

В CSS было три основных способа задания цвета, но в CSS3 появилось ещё два. Вот о том, как можно задавать цвета в CSS3, мы и поговорим в этой статье.

Первый способ: по названию

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

body {   color: blue; // синий цвет   color: green; // зелёный цвет

}

Второй способ: hex

Чтобы задать цвет в данном формате, нам нужно в начале поставить #, а затем написать 6 знаков, значение которых может быть от до F.
Первые два знака обозначают красный цвет, следующие два — зелёный, оставшиеся два — синий.

body {   color: #0000FF; // синий   color: #00FF00; // зелёный   color: #FF0000; // красный   color: #000000; // чёрный   color: #FFFFFF; // белый

}

Третий способ: RGB

RGB(Red Green Blue) — это способ, где мы задаём три цвета — красный, зелёный и синий, смешивая которые можно получить разные сочетания цветов. Т.е это почти то же, что и hex, только формат другой. Значения здесь задаются от до 255

body {   color: rgb(0,0,255); // синий   color: rgb(0,255,0); // зелёный   color: rgb(255,0,0); // красный   color: rgb(0,0,0); // чёрный   color: rgb(255,255,255); // белый

}

Четвёртый способ: RGBA

RGBA(Red Green Blue Alpha) — это способ, который появился в CSS3. Он абсолютно идентичен RGB за исключением только того, что в последнем параметре мы можем указать прозрачность. Прозрачность может принимать значения от 0(полностью прозрачный) до 1(полностью непрозрачный)

body {   color: rgba(210, 255, 0, .5); // полупрозрачный жёлтый

}

Как видите, мы можем пропускать ведущий 0 в прозрачности.

Пятый способ: HSL

HSL(Hue Saturation Lightness) — это способ, в котором цвет определяется 3 параметрами: оттенком, насыщенностью и яркостью.

Оттенок цвета указывается в градусах поворота цветового круга(0 градусов — красный, 120 — зелёный, 240 — голубой и т.д.)

Насыщенность указывается в процентах. По мере понижения процентов цвет будет блекнуть
Яркость цвета также указывается в процентах(0% — тёмный, 100% — светлый)

body {   color: hsl(0, 30%, 50%);   color: hsl(120, 100%, 80%);   color: hsl(240, 100%, 50%);

}

HSLA отличается от HSL точно тем же, чем отличается RGB от RGBA, так что рассматривать его подробно я не буду, а просто приведу пример

body {  color: hsla(120, 100%, 50%, 0.3); }

Советы:

  • Считается, что преимуществом схемы hsl перед rgb являются более природные естественные цвета, так что советую использовать именно этот формат.
  • hsl интуитивно понятен. Т.е., взглянув на цифры, можно сразу представить, каким будет цвет.
  • hsl, hsla и rgba поддерживают браузеры IE 9.0+, Opera 10.0+, Firefox 3.0+. Если вы хотите иметь поддержку в более старых браузерах, то используйте старые форматы задания цвета.

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:<\p>

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник: https://MyRusakov.ru/colors-in-css3.html

6. CSS — Цвета: форматы и коды

Коды цветов в CSS используются для указания цвета. Как правило, коды цвета или цветовые значения используются для установки цвета либо для переднего плана элемента (например, цвет текста, ссылки), либо для фона элемента (цвет фона, блока). Они также могут использоваться для изменения цвета кнопки, границ, маркера, при наведении и других декоративных эффектов.

Вы можете задать свои значения цвета в различных форматах. В следующей таблице перечислены все возможные форматы:

Формат Синтаксис Пример
Шестнадцатеричный код #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;}

Ниже более подробно описаны перечисленные форматы.

Цвета CSS — шестнадцатеричные коды

Шестнадцатеричный код цвета — это шестизначное представление цвета. Первые две цифры (RR) — представляют собой красное значение, следующие две — это зеленое значение (GG), а последние — синее значение (BB).

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвет Шестнадцатеричный цвет
Белый #FFFFFF
Черный #000000
Красный #FF0000
Лайма #00FF00
Синий #0000FF
Желтый #FFFF00
Морская волна #00FFFF
Фуксия #FF00FF

Цвета CSS — короткие шестнадцатеричные коды

Короткий шестнадцатеричный код цвета — это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвет Шестнадцатеричный цвет
Белый #FFF
Черный #000
Красный #F00
Лайма #0F0
Синий #00F
Желтый #FF0
Морская волна #0FF
Фуксия #F0F

Цвета CSS — RGB значения

RGB значение — это код цвета, который задается с помощью свойства rgb(). Это свойство принимает три значения: по одному для красного, зеленого и синего. Значение может быть целым числом, от 0 до 255, или процентом.

Примечание: не все браузеры поддерживают свойство rgb() цвета, поэтому не рекомендуется его использовать.

Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.

Цвет Шестнадцатеричный цвет
Белый 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)

Генератор цветовых кодов

Вы можете создавать миллионы цветовых кодов с помощью нашего сервиса CSS цвета онлайн.

Безопасные цвета браузера

Ниже представлена таблица из 216 цветов, которые наиболее безопасные и независимые от компьютера. Эти цвета в CSS варьируются от 000000 до FFFFFF шестнадцатеричного кода. Они безопасны в использовании, поскольку гарантируют, что все компьютеры будут правильно отображать цвет при работе с 256 цветовой палитрой.

Таблица «безопасных» цветов в CSS
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Источник: http://ProgLang.su/css/colors

Ссылка на основную публикацию