#fff Шестнадцатеричный Код Цветов
Задание цвета по названию
Браузеры поддерживают указание некоторых цветов элементам по названиям. В этой таблице некоторые ключевые слова (английские названия цветов), используемые для задания свойств цвета, RGB код, шестнадцатеричный код (HEX) и HSL код.
| Имя | Цвет | RGB | HEX | HSL | Описание |
|---|---|---|---|---|---|
| white | rgb(255, 255, 255) | #ffffff или #fff | hsl(0, 0%, 100%) | Белый | |
| silver | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Серый | |
| gray | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Темно-серый | |
| black | rgb(0, 0, 0) | #000000 или #000 | hsl(0, 0%, 0%) | Черный | |
| maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Темно-красный | |
| red | rgb(255, 0, 0) | #ff0000 или #f00 | hsl(0, 100%, 50%) | Красный | |
| orange | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Оранжевый | |
| yellow | rgb(255, 255, 0) | #ffff00 или #ff0 | hsl(60, 100%, 50%) | Желтый | |
| olive | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Оливковый | |
| lime | rgb(0, 255, 0) | #00ff00 или #0f0 | hsl(120, 100%, 50%) | Светло-зеленый | |
| green | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Зеленый | |
| aqua | rgb(0, 255, 255) | #00ffff или #0ff | hsl(180, 100%, 50%) | Голубой | |
| blue | rgb(0, 0, 255) | #0000ff или #00f | hsl(240, 100%, 50%) | Синий | |
| navy | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Темно-синий | |
| teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Сине-зеленый | |
| fuchsia | rgb(255, 0, 255) | #ff00ff или #f0f | hsl(300, 100%, 50%) | Розовый | |
| purple | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Фиолетовый |
Первоночально в стандартах W3C использовались лишь эти 16 ключевых слов для задания цветов. Позже в стандарты было добавлено ещё 130 цветов, полный их список смотрите тут: таблица цветов CSS.
Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.
<!DOCTYPE html> <html> <head> <title>RGB в CSS</title> <style> div.colorname { /* создаём класс colorname только для тега div */ display: inline-block; width: 40px; height: 40px; } </style> </head> <body> <div style="background: MediumTurquoise;" class="colorname">MediumTurquoise</div> <div style="background: brown;" class="colorname">brown</div> <div style="background: crimson;" class="colorname">crimson</div> <div style="background: blueviolet;" class="colorname">blueviolet</div> <div style="background: olivedrab;" class="colorname">rolivedrab</div> </body> </html>
Вот как работает этот код:
Установка цвета с помощью RGB
RGB — аддитивная цветовая модель. На английском языке addition — добавление. RGB — это аббревиатура английских слов: Red, Green, Blue — красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.
Смешивая красный, зелёный и синий цвета можно получить несколько миллионов оттенков. В памяти компьютеров хранятся все возможные комбинации.
Ближе к делу.
Для установки свойств в этом формате используется запись rgb(r, g, b), где r, g, b — это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.
Пример кода.
Чтобы всё стало понятно, приведу пример кода:
<!DOCTYPE html> &.
255)</div> </body> </html>Вот так должен сработать этот пример:
Пояснения к примеру.
В начале страницы создаём класс div.rgb, он нужен чтобы блоки созданные тегом <div> отображались нужным размером: 240px на 40px. Свойству line-height (высота строки) присваиваем значение — 40px, то есть равное высоте блока, это позволит отображать текст в блоке <div> по центру вертикали. по горизонтали текст центрируем при помощи правила {text-align: center;}.
Далее, в коде устанавливаем фоновый цвет блока <div> при момощи атрибута style успользуя свойство background, а значения присваиваем rgb(255, 0, 0), rgb(0, 255, 0), и rgb(0, 0, 255). То есть, мы поочерёдно делаем один канал максимально насыщенным, а остальные каналы не используются для синтеза, так как их значение равно нолю.
Попробуйте отредактировать этот пример и указать свои значения, например rgb(100, 100, 100).
Установка цвета с помощью RGBA
В CSS3 появился новый инструмент для работы с цветом — формат RGBA. Его можно назвать развитием модели RGB, но с добавлением одного нового канала — A или альфа-канала. Этот канал устанавливает прозрачность цвета. Его значения задаются в диапазоне от 0 до 1. Значение равное 0 соответствует полной прозрачности, 1 — полной непрозрачности (цвет будет таким, каким он задан в первых трёх каналах RGB), а промежуточные значения, как 0.4 или 0.6 — полупрозрачности в различной степени.
Пример кода.
<!DOCTYPE html> <html> <head> <title>RGBA в CSS3</title> <style> div.rgba { display: inline-block; width: 40px; height: 40px; } </style> </head> <body> <div style="background-color: rgba(255,0,0,0.2);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.4);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.6);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.8);" class="rgba"></div> <div style="background-color: rgba(255,0,0,1.0);" class="rgba"></div> </body> </html>Вот как он сработает:
Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:
<!DOCTYPE html> <html> <head> <title>RGBA в CSS3</title> <style> div.rgb { display: inline-block; width: 40px; height: 40px; } </style> </head> <body> <div style="background-color: rgb(243, 191, 189);" class="rgb"></div> <div style="background-color: rgb(246, 143, 142);" class="rgb"></div> <div style="background-color: rgb(249, 95 , 94);" class="rgb"></div> <div style="background-color: rgb(252, 47, 47);" class="rgb"></div> <div style="background-color: rgb(255, 0, 0);" class="rgb"></div> </body> </html>
Вот его результат:
Значение альфа канала равное нолю делает любой цвет невидимым — абсолютно прозрачным, значение равное единице транслирует цвет в RGB-коде без изменений. Свойство rgba(255,0,0,1.0) показывает красный цвет rgb(255, 0, 0).
По шестнадцатеричному значению (HEX-код)
В повсежневной жизни мы пользуемся десятичной системой счёта. Её истоки очень просты — у нас десять пальцев на руках, и считать по пальцам в жизни бывало удобно. Если в десятичной системе десять цифр: от 0 до 9, а число 10 — это уже следующий разряд, то в шестнадцатеричная система счисления 16 цифр, а следующим разрядом будет число 16.
Для указания кодов цветов в качестве шестнадцатеричных цифр используются обычные десятичные цифры от 0 до 9 и для обозначения цифр от 10 до 15 используют латинские буквы от A до F то есть (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наглядности сведём это в таблицу:
| Десятичные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| Шестнадцатеричные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.
| Десятичные | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
| Шестнадцатеричные | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C | 1D | 1E | 1F |
Шестнадцатеричная система более понятна компьютеру, он быстрее обрабатывает значения, заданные по шестнадцатеричному значению.
Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB. Само значение #FFC0CB состоит из трёх шестнадцатеричных цифр FF, C0 и CB. Смысл этой записи такой же, как и установка цвета в формате RGB (rgb(r, g, b)) — каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.
<!DOCTYPE html> <html> <head> <title>HEX код в CSS</title> <style> div.hex { /* создаём классс hex только для тега div */ width: 240px; height: 40px; line-height: 40px; text-align: center; } </style> </head> <body> <div style="background: #FF0000;" class="hex">#FF0000</div> <div style="background: #00FF00;" class="hex">#00FF00</div> <div style="background: #0000FF;" class="hex">#0000FF</div> </body> </html>Этот код отобразит следующие элементы:
А вот рисунок с результатом из раздела «Установка цвета с помощью RGB» на этой странице выше.
Мы видим что цвета идентичны.
Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.
То есть допустимо следующее сокращение записи:
#rrggbb —> #rgb
Например, цвет #ff22aa допустимо написать так — #f2a, или цвет #44aa22 допустимо указать в виде #4a2.
Установка цвета с помощью HSL
В CSS3 появился новый формат для указания цвета.
Формат HSL — это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).
Оттенок в HSL — это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° — синему цвету.
Значение оттенка изменятся в диапазоне от 0 до 359.
Второе значение — насыщенность (Saturate) задаётся в процентах. При 100% насыщенности цвет максимально «сочный», по мере движения показателя насыщеннсоти к 0%, цвет становится всё более тусклым и скатывается в серый.
Третье значение — светлота (Lightness) также задаётся в процентах. Чем выше процент, тем более яркий будет цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, при этом неважно, какой цвет из цветового круга был выбран в первом канале. Оптимальным можно считать значение яркости цвета равное 50%.
Установка цвета с помощью HSLA
Формат HSLA соотносится с HSL, так же как и RGB с RGBA. В формате HSLA, как и в RGBA добавлен альфа-канал отвечающий за прозрачность цвета.
Некоторые итоги и советы
Цвет, заданный в формате HSL, читать более просто. Можно сказать что он интуитивно понятен. Например, код hsl(120,60%,50%) можно представить итоговый цвет, если в памяти есть картинка цветового круга HSL. Про форматы RGB и HEX такого сказать нельзя, код цвета заданный в этих форматах становится понятный только после его визуализации на мониторе.
Новые форматы в CSS3 (HSL, HSLA и RGBA) работают в браузерах начиная с версий: IE 9.0, Opera 10.0 Firefox 3.0. Как сделать так, чтобы стили работали на старых браузерах?
.somebloсk { background-color: rgb(255,50,50); background-color: rgba(255,50,50,0.85) }При использовании такого кода в старых браузерах фоновый цвет для класса .somebloсk хоть и не будет использовать альфа-канал, но будет отображаться в формате RGB.
komotoz.ru
В html формате
Очень часто требуется поменять цвет текста на сайте, мало кто из начинающих к этому прибегает, так как для этого нужно знать html и css. Но, если вы знаете эти основы web-строительства, то вы без труда с этой задачей справитесь и в помощь ниже вам будет дана таблица. Обычно начинающие меняют цвет текста маленькими абзацами, например, через встроенные редакторы статей. Но, у меня, к примеру, часто возникает задача поменять цвет текста на всем сайте и, поэтому коды цветов в html формате — для меня необходимы — «как воздух».
Меняем цвет текста на сайте
1) html код необходимого вам цвета вставляем в специальный файл css, обычно он называется style.css — вот такие примерно строки появятся в нем:
color:#FFF;
Это был пример: мы вставили корректировку, а именно назначили цвет текста белым: color:#FFF — это и есть код белого цвета в html. Не пугайтесь #FFF — это сокращенная форма, это тоже самое, что и #FFFFFF. Для экономии времени часто пользуются сокращенным кодом белого цвета в html.
Примерно может выглядеть так изменение цвета текста тела сайта — тег body:
body {color:#FFF;}
На закрытых движках типа ucoz — это делается по-другому, хотя там этот css-файл выведен отдельной ссылкой(об этом напишу позже).
2) Если вам нужно поменять цвет текста в отдельном абзаце, то встраивается такая конструкция (но она не приветствуется профессионалами, но на это мало кто смотрит и не смотрят поисковики типа Яндекса и Google, Mail, Rambler — то есть основным ПС это безразлично, потому что это «не ошибка»)
А вставляется такая конструкция:
style="color:#FFF;"
То есть применительно к абзацу, а это тег p, конструкция будет иметь следующий вид:
<p style="color:#FFF;">
В общем ничего сложного! Только смотрите внимательно, белый цвет тут был приведен для примера, если вы назначите белый цвет для белого фона, то текста вы, конечно же, не увидите.
3) Если вам нужно изменить цвет ссылки html — конструкция приобретает следующий вид:
<a style="color:#FFF;" href="http://saitsozdanie.ru/">тут текст ссылки</a>
Если вы еще не знаете, что такое тег a — то мы уже об этом писали тут — «как вставить ссылку на сайт». Вообще изменение цвета ссылки через html код страницы редко делают, во-первых это муторно, а во-вторых также считается, если не дурным тоном, то что-то типа того.
Таблица цветов html
Ниже приведена таблица цветов html, только также не забывайте вставить знак решетки перед кодом:
Сервис от Яндекса
Яндекс также предоставляет онлайн-сервис по html-цветам, иногда тоже помогает, но им все же реже пользуюсь. Вот можете потыкать и html цвета онлайн яндекс.
Упрощенная форма html цвет на английском
Если вы знаете хоть немного знаете английский язык то вам еще проще будет освоить упрощенную форму записи популярных цветов в html на английском. К, примеру: brown — коричневый, green — зеленый, blue — синий, red — красный, white — белый, grey — серый, black — черный и тд. Вот как это будет выглядеть:
<p style="color:white;">
То есть, все то же самое, просто заменяем код на слова.
Пока на этом все, я надеюсь вам была полезна статья, следите за новостями http://saitsozdanie.ru.
Я тоже когда-то начинал с азов, а вот как я начинал свое обучение основам html.
saitsozdanie.ru