Красный цвет css: Цвет «Красный»— #ff0000, rgb(255, 0, 0), cmyk(0, 100, 100, 0)

Содержание

Основы работы с языком CSS

Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.

Как правило, CSS команды (стили) хранятся в отдельном файле, который подключается специальным тегом ко всем HTML страницам нашего сайта.

Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Если мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, то эти изменения применятся на всей тысяче HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.

Файл со стилями должен иметь расширение .css. Чтобы подключить такой файл к HTML странице, в теге head следует написать такую конструкцию:

<link rel=»stylesheet» href=»имяФайла.css»>

В следующем примере к нашему HTML файлу подключается CSS файл

styles.css:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p> Это абзац с текстом. </p> </body> </html>

Создайте и подключите ко всем вашим страницам файл styles.css.

Как работать с CSS

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.

После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

Свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя

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

Давайте, например, покрасим все абзацы в красный цвет:

p { color: red; }

В вашем файле styles.css разместите код, красящий абзацы в красный цвет. Откройте страницы вашего сайта в браузере и убедитесь в том, что все абзацы стали красными.

Другие значения для цвета

Помимо ключевого слова red, задающего красный, можно использовать и другие английские слова для цвета, например, green — зеленый, blue — голубой, yellow — желтый, orange — оранжевый, black — черный, white — белый.

Используя соответствующие селекторы покрасьте заголовки h2 в зеленый цвет, заголовки h3 в голубой, заголовки h4 — в красный, а абзацы — в оранжевый.

Цветовая модель HSL в CSS 3.

Глава 4

Ранее в ходе обучения HTML и CSS 2.1 мы с Вами уяснили что цвет того или иного элемента сайта может быть определён следующими способами:

  • Именным значением, например: red — красный.
  • Значением цвета RGB, например: RGB(255,0,0) — опять таки красный.
  • Шестнадцатеричным значением цвета RGB, например: #ff0000 — всё тот же красный.

Об этих методах определения цвета я писал в главе «Цвет и фон» учебника CSS поэтому повторятся не стану а расскажу о ещё одном способе определения цвета, который предлагает спецификация CSS 3.

В CSS 3 вошёл ещё один способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). — это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно:

Оттенок.

Для того чтобы определить тон (Hue) нужно указать градус поворота (от 0° до 360°) цветового спектра замкнутого в цветовой круг — во сказанул!! )) В общем, смотрите на рисунок там наглядно показано откуда берётся этот угол.. Имеется, значит, радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам (ну и 360° тоже), 120 градусов это зелёный, 240° синий — это основные три цвета которые, смешиваясь, образуют ещё три дополнительных 60° жёлтый 180° голубой и 300° фиолетовый.. Ну а между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.

Насыщенность.

Второе значение (Saturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и «сочно» и наоборот если насыщенность стремится к 0% то цвет «линяет» и становится серым.

Светлота.

Светлота или яркость (Lightness) это третий параметр

HSL. Точно так же как и насыщенность указывается в процентах.. чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, причём неважно, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%.

Такая вот теория.. теперь к практике..

Как обычно покажу на примере:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет HSL</title>
<style type=»text/css»>
body{
background-color:hsl(120,10%,50%);
color:hsl(60,100%,50%)
}
.blok1 {background-color:hsl(0,0%,0%)}
.blok2 {background-color:hsl(0,0%,100%)}
.blok3 {background-color:
hsl(187,61%,54%)
}

.blok4 {background-color:hsl(300,100%,70%)}
.blok5 {background-color:hsl(0,100%,50%)}
.blok6 {background-color:hsl(240,100%,50%)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
<div>Блок 4</div>
<div>Блок 5</div>
<div>Блок 6</div>
</body>
</html>

Альфа каналы.

RGBA

На ряду со свойством opacity определяющего степень прозрачности элемента в CSS 3 появился так называемый альфа канал, который позволяет сделать цвет прозрачным непосредственно при его указании.

Так у уже знакомого нам способа определения цвета

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

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет RGBA</title>
<style type=»text/css»>
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:rgba(255,0,0,0.1)}
.blok2{background-color:rgba(255,0,0,0.5)}
.blok3{background-color:rgba(255,0,0,1)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>

HSLA

Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала. Альфа канал в HSLA аналогичен с только что разобранным альфа каналом в RGBA, поэтому повторятся, не буду просто покажу пример:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет HSLA</title>
<style type=»text/css»>
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:hsla(120,100%,50%,0.1)
}

.blok2{background-color:hsla(120,100%,50%,0.5)}
.blok3{background-color:hsla(120,100%,50%,1)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>
  • Считается, что преимуществом цветовой схемы HSL перед RGB являются более природные естественные цвета так как формат RGB был создан специально для электроннолучевых трубок.. ну не знаю.. во первых лично у меня не столь придирчивый глаз, а во вторых какая разница ведь всё равно в итоге цвет на странице будет показан с помощью электроннолучевой трубки — ну или её аналога!? то есть в определённом сочетании красного, зелёного и синего цвета т.е. по сути цвет

    HSL будет в итоге переконвертирован в RGB.

  • А вот что мне нравится в HSL так это то, что цвет заданный таким способом интуитивно понятен, то есть, взглянув на цифры, допустим hsl(60,100%,50%) можно сразу же представить каким приблизительно в итоге будет цвет достаточно просто держать в голове цветовой круг (радугу) и знать теорию, о которой мы говорили выше. А вот с RGB цветом ничего, как правило, непонятно до тех пор, пока в фотошопе или ещё где-нибудь не посмотришь на цифры сочетания красного, зелёного и синего.

  • Форматы HSL, HSLA и RGBA воспринимают версии браузеров начиная с: IE 9.0, Opera 10.0 Firefox 3.0 … А как быть со старыми версиями браузеров решать уже Вам. Однако хочу отметить, что одному и тому же элементу цвет можно задать несколькими способами.

    Ну например:

    .blok {
    background-color:rgb(255,0,0)
    background-color:rgba(255,0,0,0.5)
    }

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



Оттенки красного в Интернете — gadgetshelp,com

Что означает красный ? В то время как красный цвет обычно означает все, от любви до гнева, от силы до опасности, между некоторыми оттенками красного цвета есть тонкие различия. Эти красные цвета говорят, что вы намерены? Изучите цветовую символику различных оттенков красного.

красный

Официальное ключевое слово color CSS / SVG red относится к чистому оттенку красного, теплого цвета . Как чистый красный, этот оттенок несет сильную символику как силы, так и опасности.

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

  • Hex # FF0000
  • RGB 255,0,0
  • Цвет браузера безопасный: Да

Кроваво красный

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

Темно-красный

SVG, названный цветом темно-красный, создает этот темно-кроваво-красный цвет. Темно-красный — теплый цвет.

Как темно-красный рядом с фиолетовой цветовой гаммой, этот оттенок несет смесь символики как для красного (внимание / действие), так и для фиолетового (богатство / тайна), поэтому, подобно темно-бордовому, вы можете назвать его слегка таинственным оттенком красного.

  • Hex # 8B0000
  • RGB 139,0,0
  • Безопасный цвет в браузере: нет, ближайшее совпадение # 990000 / 153,0,0

Помидор

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

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

  • Hex # FF6347
  • RGB 255,99,71
  • Безопасный цвет в браузере: Нет, возможно, самое близкое совпадение — # ff9966 / 255,153,102 (немного розоватее) или # ff6633 / 255,102,51 (чуть больше оранжевого)

Магия CSS. Глава 4. Цвет. Я знаю, что вы подумали. Целая глава… | by Workafrolic (±∞)

Все цвета RGB

Я знаю, что вы подумали. Целая глава про цвет? Поверьте мне, одной главы все равно не достаточно. Цвет — это целое измерение и он невероятно могущественен.

…для компьютеров

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

  • Цвета отображаются по разному в разных браузерах. Link.
  • На скриншоте не всегда будут те же цвета, что и на мониторе в момент снимка. Link.
  • В браузерах найдется ворох всевозможных проблем, связанных с цветопередачей. Link.

…и для человеческого глаза

То, как человеческий глаз видит цвет зависит от многих факторов, в том числе:

  • Тип устройства (ноутбук, ПК, мобильный телефон)
  • Расстояние и угол зрения
  • Качество дисплея (количество цветов, которое он может отобразить, точность воспроизведения, доступный угол обзора, максимальный контраст и т.д.)
  • Условия освещения (внутри или снаружи, день или ночь, возле окна или нет и т.д.)
  • Зрение смотрящего (корректирующие линзы, нарушения зрения, дальтонизм)

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

  • Выбирайте цвет, подходящий для текста (и для фона текста)
  • Используйте прием имитации объекта, чтобы помочь людям опознать предмет из реального мира
  • Используйте контраст для увеличения читабельности (никто не может читать белый текст на бежевом фоне)
  • Применяйте паттерны (когда это необходимо) в качестве запасного варианта для людей с дальтонизмом (пример Trello)

Но помните, нет ничего прекраснее чем видеть. Используйте свои глаза (и глаза пользователей, на которых тестируете). Проверяйте свой набор цветов на разных устройствах и при разном освещении до тех пор, пока не будете уверены, что все пользователи будут видеть что-то приемлемое.

Как я писал выше, цвет является чрезвычайно мощным инструментом. Но с большой силой приходит большая ответственность 😉 Цвет используется для решения большого количества задач. Но применение цвета для одного объекта может наложить ограничения на использование того же цвета для какого-то другого объекта. Например, если вы для своего бренда выбрали определенный зеленый оттенок, то вам будет довольно трудно взять тот же зеленый для индикатора “go”.

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

Чувства

Вы знали, что красный цвет заставляет людей чувствовать голод? Link.

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

Вы хотите шокировать людей? Хотите успокоить их? Хотите заставить их доверять вам? Хотите привести их в восторг? Хотите заставить их действовать? Ответы на эти вопросы помогут вам в выборе цветов для вашего приложения.

Брендинг

Цвета на столько могущественны, что один цвет может означать бренд.

Сможете угадать бренды по цветам?

Ответ 1. Ответ 2. Ответ 3. Ответ 4.

Статус

Bootstrap популяризировал применение статусных классов, которые связаны с определенными цветами.

Много различных приложений используют эту или подобные схемы:

Постоянно используя #dff0d8 в случае успеха или #f2dede в случае опасности, вы укрепляете шаблон поведения, облегчая людям распознание подобных знаков в будущем.

Движение, внимание

Иногда вам нужно привлечь внимание пользователя. Плавное (или резкое) измение цвета фона или цвета текста может помочь вам добиться внимания.

Просто так

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

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

Выбор цветовой схемы имеет важное значение. Некоторые цвета хорошо сочетаются друг с другом, а некоторые — нет. Есть несколько методик для подбора цветов. Но самым лучшим советом остается “Используйте свои глаза”.

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

  • Codrops: Build a Color Scheme: The Fundamentals — Отличный обзор разных типов цветовых комбинаций (монохромные, добавочные, триады, аналоговые).
  • Color Scheme Designer — Хороший инструмент для построения цветовых схем с разными типами комбинаций цветов.
  • Adobe Kuler: Color Wheel —Еще один инструмент для составления схем.

Одна ошибка, которую я вижу чаще других — разработчик использует серый (#ccc) когда на самом деле нужно было использовать черный с альфа-каналом (rgba(0, 0, 0, 0.2)).

Но они выглядят одинаково! — скажете вы. Ну, да. Но только до тех пор, пока фон остается белым!

Пример

Каждый из белых блоков имеет тень box-shadow: 0 .125em .5em [color] с цветом из соответствующей колонки.

HTML Цвета



В HTML цвет можно задавать тремя способами:

Задание цвета в HTML по его названию

Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:

<p>Цвет текста – красный</p>

Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):

ЦветНазваниеЦветНазваниеЦветНазваниеЦветНазвание
BlackGraySilverWhite
YellowLimeAquaFuchsia
RedGreenBluePurple
MaroonOliveNavyTeal

Пример использования различных цветовых названий:

Пример: задание цвета по его названию

Заголовок на красном фоне

Заголовок на оранжевом фоне

Заголовок на фоне лайм

Белый текст на синем фоне


<h3>Заголовок на красном фоне</h3>
<h3>Заголовок на оранжевом фоне</h3>
<h3>Заголовок на фоне лайм</h3>
<h3>Белый текст на синем фоне</h3>     

Задание цвета с помощью RGB

При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red), G — зеленый (green), В — синий (blue). Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255. Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:

Пример: Задание цвета с помощью RGB

 rgb(127, 255, 127)

 rgb(50%, 100%, 50%)

<!-- Яркость каждого цвета может принимать значения от 0 до 255 -->
<h3> rgb(127, 255, 127)</h3>
<!-- Задание цвета в процентном отношении -->
<h3> rgb(50%, 100%, 50%)</h3>

Задание цвета по шестнадцатеричному значению

Значения RGB также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки #, например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки # можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.

Пример: Цвет HEX

 красный: #FF0000

 зеленый: #00FF00

 синий: #0000FF

 красный+зеленый=желтый: #FFFF00

 красный+синий=фиолетовый: #FF00FF

 зеленый+синий=голубой: #00FFFF


<h3> красный: #FF0000</h3>
<h3> зеленый: #00FF00</h3>
<h3> синий: #0000FF</h3>
<h3> красный+зеленый=желтый: #FFFF00</h3>
<h3> красный+синий=фиолетовый: #FF00FF</h3>
<h3> зеленый+синий=голубой: #00FFFF</h3>

Список широко распространённых цветов (название, HEX и RGB):

Английское названиеРусское названиеОбразецHEXRGB
AmaranthАмарантовый#E52B502294380
AmberЯнтарный#FFBF002551910
AquaСине-зеленый#00FFFF0255255
AzureЛазурный#007FFF0127255
BlackЧерный#000000000
BlueСиний#0000FF00255
Bondi BlueВода пляжа Бонди#0095B60149182
BrassЛатунный#B5A64218116666
BrownКоричневый#964B00150750
CeruleanЛазурный#007BA70123167
Dark spring greenТёмный весенне-зелёный#1772452311469
EmeraldИзумрудный#50C87880200120
EggplantБаклажановый#9900661530102
FuchsiaФуксия#FF00FF2550255
GoldЗолотой#FFD7002502150
GrayСерый#808080128128128
GreenЗелёный#00FF0002550
IndigoИндиго#4B0082750130
JadeНефритовый#00A86B0168107
LimeЛайм#CCFF002042550
MalachiteМалахитовый#0BDA511121881
NavyТёмно-синий#00008000128
OchreОхра#CC772220411934
OliveОливковый#8080001281280
OrangeОранжевый#FFA5002551650
PeachПерсиковый#FFE5B4255229180
PumpkinТыква#FF751825511724
PurpleФиолетовый#8000801280128
RedКрасный#FF000025500
SaffronШафрановый#F4C43024419648
Sea GreenЗелёное море#2E8B574613987
Swamp greenБолотный#ACB78E172183142
TealСине-зелёный#0080800128128
UltramarineУльтрамариновый#120A8F1810143
VioletФиолетовый#8B00FF1390255
YellowЖёлтый#FFFF002552550

Коды цветов (фон) по насыщенности и оттенку: HTML Таблица цветов


Задачи
  • Задание цвета по его названию

    Установите для заголовка второго уровня фон красного цвета, используя в качестве значения название цвета на английском языке.

    Задача HTML: Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Задание цвета по его названию</title>  
     </head>
     <body>
      <h3>Заголовок второго уровня</h3>
     </body>
    </html>
  • Цвет HEX

    Поменяйте цвет текста в параграфе на зеленый, используя шестнадцатеричное (HEX) значение цвета.

    Задача HTML: Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Цвет HEX</title>  
     </head>
     <body>
      <p>Это параграф</p>
     </body>
    </html>





НОУ ИНТУИТ | Лекция | Цвета в CSS /* аналогично как в HTML */

Цвета выводятся с помощью смешения источников:

  • RED (красного) цвета:
  • GREEN (зеленого) цвета:
  • BLUE (синего) цвета.
Значения цветов

Цвета в CSS определяют с помощью шестнадцатеричной записи комбинации значений красного, зеленого и синего цветов (RGB). Наименьшее значение, которое можно задать одному из источников равно 0 (hex #00), а максимальное — 255 (hex #FF).

Следующая таблица показывает результат объединения источников красного (R), зеленого (G) и синего (B) источников цвета:

Цвет Цвет (HEX) Цвет RGB
#000000rgb(0,0,0)
#FF0000rgb(255,0,0)
#00FF00rgb(0,255,0)
#0000FFrgb(0,0,255)
#FFFF00rgb(255,255,0)
#00FFFFrgb(0,255,255)
#FF00FFrgb(255,0,255)
#C0C0C0rgb(192,192,192)
#FFFFFFrgb(255,255,255)
Названия цветов

Некоторая совокупность названий цветов поддерживается большинством браузеров.

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

Цвет Цвет (HEX) Название цвета
#FFF8DCCornsilk (кукурузные рыльца)
#00008BDarkBlue (темно-синий)
#008B8BDarkCyan (темно-голубой)
#FFFFF0Ivory (слоновая кость)
#FFFFE0LightYellow (светло-желтый)
#FFA500Orange (оранжевый)
#4169E1RoyalBlue (ярко-синий)
Безопасные цвета Web

Несколько лет назад, когда большинство компьютеров поддерживали только 256 различных цветов, был предложен в качестве стандарта Web список из 216 безопасных цветов Web. Причина этого состояла в том, что операционные системы Microsoft и Mac использовали 40 различных «резервных» фиксированных системных цветов (около 20 каждая).

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

216 межплатформенных цветов

Эта палитра из 216 межплатформенных безопасных для Web цветов была первоначально создана для обеспечения правильного вывода компьютерами всех цветов при использовании палитры из 256 цветов.

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

Как работают hex-коды для обозначения цветов

Перевод статьи «How Hex Code Colors Work – and How to Choose Colors Without A Color Picker».

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

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

По мере накопления опыта вы начнете смотреть скорее на сами коды цветов, а не просто полагаться на редактор. Вы заметите, что выбираемые вами цвета обозначаются какими-то странными кодами, вроде #ff0000.

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

В этой статье я расскажу вам обо всем, что вам нужно знать о hex-кодировке цветов.4. В общем, конвертировать числа шестнадцатеричной системы в двоичные (и обратно) просто удобно. Но сейчас мы этим заниматься не будем.

Это была просто дополнительная информация. Она вам не нужна для применения hex-кодов цветов, но может пригодиться, если захотите произвести впечатление на кого-нибудь.

Из каких компонентов состоит цвет?

Как шестнадцатеричные коды используются для обозначения RGB-цветов? (RGB — цветовая модель, описывающая способ кодирования цвета для цветовоспроизведения с помощью трёх цветов, которые принято называть основными. Сама аббревиатура RGB расшифровывается как red, green, blue — красный, зелёный, синий. — Прим. ред. Techrocks).

Каждый пиксель цветного монитора состоит из трех светящихся элементов красного, зелёного и синего цвета. Если рассмотрите экран в большом приближении, вы их увидите (если экран древний, слишком напрягаться не придется). Цвета, которые вы видите на экране, образуются благодаря управлению яркостью каждого из этих элементов.8. Просто еще один факт, который знать не обязательно).

К этому моменту внимательные читатели могли уже понять, насколько просто работать с цветами, представленными в такой форме. Черный цвет представляется как RGB (0,0,0), а белый — RGB (255,255,255). Ну а зеленый, соответственно, — RGB (0,255,0).

Hex-кодировка цветов

Теперь, зная, что в принципе означают коды цветов, давайте посмотрим на hex-коды. Возьмем, к примеру, #ff0000, и попробуем разобраться, что этот код означает.

Посмотрите на таблицу перевода чисел из шестнадцатеричной системы в десятичную, и вы увидите, что «FF» — это 255 в десятичной системе.

Это подсказка. Два первых символа в нашем hex-коде (да и во всех остальных тоже) относятся к красному цвету, и в данном случае его значение — 255. Следующие два символа отвечают за зеленый, а последние — за синий цвет.

Исходя из этого, вы можете понять, что #ff0000 — то же самое, что RGB (255,0,0). То есть, чистый красный. Аналогично, #ff00ff — это максимум красного и одновременно синего, а вместе они дают пурпурный (magenta).

На этом этапе вы, вероятно, уже осознали значение и элегантность hex-кодов. Поскольку они шестнадцатеричные, а максимальное значение каждого компонента — 255, при помощи всего 6 символов можно передать практически любой цвет.

Эта система также означает, что вам доступна очень широкая палитра цветов, потому что каждый компонент может иметь любое значение, от 0 до 255. Попробуйте прикинуть количество вариантов, и вы поймете, что вам доступны 16777216 цветов.

Как использовать сокращенные обозначения цвета

Разобравшись с hex-кодами, вы можете начать использовать их в своих веб-проектах — вместо пипетки в программе для выбора цвета.

Но сначала будет полезным узнать, что это не единственные опции.

Поскольку HTML проектировался так, чтобы им было удобно пользоваться, он допускает использование сокращенной записи hex-кодов. Например, код чистого красного цвета #FF0000 можно сократить до #F00. Одна цифра для красного, одна для зеленого и одна для синего. Браузеры интерпретируют #FF0000 и #F00 одинаково.

Такая запись сокращает доступное количество цветов до примерно 4 тысяч, но ее применение дает некоторые преимущества.

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

Почему стоит использовать hex-коды

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

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

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

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

Дополнительные преимущества

Hex-коды применяются при работе с HTML, но не только. Практически все программы для работы с изображениями пользуются той же кодировкой. Таким образом, разобравшись, как работают hex-коды, вы получаете полезный и переносимый навык.

CSS Color Basics — как css раскрасить html-страницы

Как установить цвет с помощью CSS?

Концепция CSS (каскадные таблицы стилей) заключается в том, что он позволяет нам отделить стиль страницы от содержимого страницы. цветов CSS определяются комбинацией значений красного, зеленого и синего цветов. Большинство элементов HTML имеют два свойства цвета, например свойство цвета переднего плана и свойство цвета фона. Мы можем управлять обоими этими свойствами с помощью CSS. В CSS мы можем выразить значение свойства цвета несколькими способами. Именованных цветов , Шестнадцатеричных цветов и Цвета RGB — популярные способы применения цветов в CSS.

Именованные цвета

Именованные цвета — это самый простой метод применения цветов в CSS. Это предварительно определенные ключевые слова цвета, такие как красный, синий, зеленый и т. Д.

h2 {color: Lime;}

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

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

Шестнадцатеричные значения представляют собой шестизначное трехбайтовое шестнадцатеричное число.Это также приводит к комбинации красного, синего и зеленого цветов в виде #rrbbgg . Первый rr соответствует красному цвету, bb соответствует синему цвету, а gg соответствует зеленому цвету. Чтобы определить шестнадцатеричный цвет , вы можете установить диапазон от 00 до FF.

  1. # 000000 представляет черный цвет
  2. # FF00FF представляет темно-фиолетовый цвет
h2 {color: # 00FF00;} представляет цвет лайма

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

цветов RGB

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

  1. rgb (redvalue, bluevalue, greenvalue)
  2. rgb (0,0,0) rgb установлен в десятичных значениях
  3. rgb (0%, 0%, 0%) rgb установлен в процентных значениях
  4. h2 {color: rgb (0,255,0);} представляет собой цвет лайма

Основные цвета

Цвет Название цвета Цвет Hex Цвет RGB
Черный # 000000 гб (0,0,0)
Серебро # C0C0C0 RGB (192,192,192)
Серый # 808080 RGB (128,128,128)
Белый #FFFFFF RGB (255,255,255)
Бордовый # 800000 гб (128,0,0)
Красный # FF0000 гб (255,0,0)
фиолетовый # 800080 гб (128,0,128)
Пурпурный # FF00FF гб (255,0,255)
Зеленый # 008000 гб (0,128,0)
лайм # 00FF00 гб (0,255,0)
Оливковое # 808000 гб (128,128,0)
Желтый # FFFF00 гб (255,255,0)
Военно-морской флот # 000080 гб (0,0,128)
Синий # 0000FF гб (0,0,255)
бирюзовый # 008080 гб (0,128,128)
Аква # 00FFFF гб (0,255,255)

Как использовать цвета шестнадцатеричного кода CSS с альфа-значениями

Введение

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

В этой статье вы рассмотрите шестнадцатеричные цветовые коды и изучите использование альфа-значений для прозрачности.

Предварительные требования

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

  • Требуется некоторое знакомство с CSS. Вы можете воспользоваться серией руководств «Как создать веб-сайт с помощью CSS», если вам нужно что-то освежить.
  • Современный веб-браузер, поддерживающий #rrggbbaa шестнадцатеричное цветовое обозначение.

Использование ключевых слов цвета

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

В CSS около 140 именованных цветов (например, красный , синий , лавандовый и т. Д.).

Например, если вы хотите, чтобы ваш текст имел красный цвет, вы можете использовать ключевое слово red :

  div {
 красный цвет;
}
  

Различные форматы значений, такие как шестнадцатеричные коды, позволят вам настроить более 140 цветов.

Что такое шестнадцатеричные значения

Вы, вероятно, больше всего привыкли считать с десятичными значениями (или основанием 10):

  0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  

Другими словами, однозначное число имеет только 10 возможных значений (от 0 до 9 ), а после этого оно должно увеличиться до двух цифр ( 10 ).

Шестнадцатеричное значение — 16 вместо 10:

  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
  

Он использует буквы A , B , C , D , E и F для представления дополнительных значений.

Например, это все допустимые шестнадцатеричные значения:

  00, 01, 99, 9D, 1D, CC, E4, F5
  

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

Использование шестнадцатеричных значений в CSS

При стилизации элемента с помощью CSS вы часто будете изменять значения цвета для таких свойств, как font color , background-color , border-color и т. Д.

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

Шестнадцатеричные коды CSS

должны начинаться с «знака числа» (#) (также известного как знак фунта или решетка). Затем шесть цифр шестнадцатеричного значения. Каждая пара из двух цифр представляет красный, зеленый и синий цвета. Шаблон выглядит как #RRGGBB (где красный — R , зеленый — G , а синий — B ).

Цвета представлены комбинацией красного, зеленого и синего цветов. Наименьшее значение ( 00 ) будет самой темной версией цвета (ближайшей к черному), а максимальное значение ( FF ) будет самой светлой версией цвета (ближайшей к белому).

Установка для всех трех пар наименьшее значение ( 00 ) приведет к сплошному черному цвету:

  div {
  цвет: # 000000;
}
  

Установка максимального значения для всех трех пар ( FF ) приведет к сплошному белому цвету:

  div {
  цвет: #FFFFFF;
}
  

Допустим, вы хотите, чтобы текст заголовка был ярко-красным цветом. Для этого вы можете установить для красного цвета ( RR ) максимально возможное значение ( FF ).Поскольку вам не нужны ни зеленый, ни синий, вы можете установить для каждого из зеленого ( GG ) и синего ( BB ) наименьшего возможного значения ( 00 ).

  div {
  цвет: # FF0000;
}
  

Этот код будет отображаться как

Красный текст

Изменяя количество красного, синего и зеленого, вы можете создавать самые разные цвета. # DC143C имеет большое количество красного ( DC ) — это даст «малиновый» цвет. # EE82EE имеет большое количество красного ( EE ) и синего ( EE ) — это дает «фиолетовый» цвет. # 40E0D0 имеет большое количество зеленого ( E0 ) и синего ( D0 ) — в результате получается «бирюзовый» цвет.

Примечание. Шестнадцатеричные коды CSS не чувствительны к регистру. Это означает, что буквенные символы могут быть в верхнем или нижнем регистре — # ff0000 эквивалентно # FF0000 . CSS также поддерживает сокращенные значения. Это означает, что # F00 эквивалентно # FF0000 .

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

Затем узнайте, как использовать альфа-значения с шестнадцатеричными кодами CSS.

Добавление альфа-значения в шестнадцатеричные коды CSS

Использование значения альфа для обновления прозрачности цвета изменит формат шестнадцатеричного кода с #RRGGBB на #RRGGBBAA (где альфа — A ). Первые шесть значений (красный, зеленый и синий) остаются прежними.

Значение AA в #RRGGBBAA может варьироваться от наименьшего возможного значения ( 00 ) до максимально возможного ( FF ).Уменьшение значения приведет к тому, что видимость будет становиться все слабее и слабее, пока она не станет прозрачной. Увеличение значения приведет к тому, что видимость станет все более непрозрачной.

Допустим, вам нужен достаточно прозрачный синий цвет.

Сначала начните с шестнадцатеричного кода синего цвета:

  div {
  цвет фона: # 0080FF;
}
  

Этот код будет отображаться как

Цвет фона # 0080FF

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

  div {
  цвет фона: # 0080FF80;
}
  

Этот код будет отображаться как

Цвет фона # 0080FF80

Значение альфа в шестнадцатеричном формате может немного сбивать с толку, потому что трудно представить себе, как на самом деле будет выглядеть значение прозрачности по основанию 16. Однако преимущество в том, что если вы уже используете шестнадцатеричные коды в своей кодовой базе, теперь вы можете обновить их, чтобы изменить прозрачность! Изменения цветового формата не требуется.

Один быстрый совет по просмотру цветов в разных форматах — с помощью Chrome DevTools.

Открыв панель DevTools, поищите цвет, который вы проверяете, в разделе стилей. Найдя его, вы можете щелкнуть поле слева от цвета, чтобы напрямую настроить значения. Вы также можете удерживать SHIFT и щелкать поле, чтобы переключаться между различными параметрами формата с правильно преобразованными значениями.

В этом примере настраиваются значение альфа-канала и значение цвета.Затем переключается между форматом шестнадцатеричного кода, форматом RGBA и форматом HSLA.

Подробнее о палитре цветов Chrome DevTools.

Заключение

В этой статье вы рассмотрели шестнадцатеричные цветовые коды и исследовали использование альфа-значений для прозрачности.

Для поддержки шестнадцатеричных кодов #RRGGBBAA браузером требуются современные браузеры. Он недоступен в старых версиях Internet Explorer. Ссылка Могу ли я использовать шестнадцатеричное обозначение цвета #rrggbbaa , чтобы узнать, подходит ли этот формат целевой аудитории вашего проекта.

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

Как изменить цвет текста и фона в CSS

Изменить цвет текста на веб-странице легко с помощью свойства цвета CSS.

Прежде чем мы рассмотрим, как это сделать, важно понять, какими способами можно задать значение свойства. Вы можете использовать:

  • HTML-названия цветов: CSS поддерживает 140 названий цветов. Желтый, фуксия, бордовый и небесно-голубой — лишь несколько примеров.
  • Шестнадцатеричные цветовые коды: эти коды состоят из трех пар символов, которые представляют интенсивность трех основных цветов. Возможные значения варьируются от 00 (самая низкая интенсивность основного цвета) до FF (самая высокая интенсивность основного цвета). Шестнадцатеричный код цвета для черного — # 000000, красного — # FF0000, синего — # 0000FF.
  • значений RGB: RGB — это еще одна цветовая модель, основанная на комбинации основных цветов: красного, зеленого и синего. Состоит из трех чисел, разделенных запятыми, каждое из которых представляет интенсивность соответствующего основного цвета в виде целого числа от 0 до 255.Черный — это rgb (0, 0, 0), красный — это rgb (255, 0, 0), а синий — это rgb (0, 0, 255).

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

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

Теперь давайте рассмотрим, как изменить цвет и цвет фона встроенного текста в CSS.

Изменение цвета встроенного текста в CSS

Чтобы изменить цвет встроенного текста, перейдите в раздел своей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство цвета с желаемым значением. Например, вы хотите изменить цвет всех абзацев на вашем сайте на темно-синий.Затем вы добавляете p {color: # 000080; } в заголовок вашего HTML-файла.

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

 
 

кузов {

цвет: синий;

}

Если в селекторе тела не задан селектор тела или цвет, то цвет по умолчанию, скорее всего, черный.

Допустим, я хочу изменить цвет абзацев на темно-синий, как указано в примере выше, и все ссылки на моем веб-сайте на голубой. Затем я использовал бы селектор типа p и селектор атрибутов a [href] и установил бы свойство цвета на # 000080 и # 00FFFF соответственно.

Вот код CSS:

 
 

п {

цвет: # 000080;

}

a [href] {

цвет: # 00FFFF;

}

Вот HTML:

 
 

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

Другой абзац, в котором есть ссылка

Вот результат:

См. «Ручка, изменяющая цвет встроенного текста в CSS» Кристины Перриконе (@hubspot) на CodePen.

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

Изменение цвета фона текста в CSS

Чтобы изменить цвет фона встроенного текста, перейдите в раздел вашей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство color и background-color с желаемыми значениями. Допустим, вы хотите изменить цвет фона ссылок на желтый.Затем вы должны добавить следующий код:

 
 

a [href] {

цвет: # 000000;

цвет фона: # FFFF00;

}

Цвет фона CSS

Свойство CSS background-color позволяет изменять цвет фона элемента HTML. Вы можете установить цвет фона для многих элементов, включая таблицу, div, заголовок и элемент диапазона.

При определении свойства цвета вы также должны определить цвет фона.Необходимо соответствовать W3C CSS и другим фреймворкам, иначе это не повредит.

Проверка цветового контраста

Изменение цвета и цвета фона текста также важно для предотвращения проблем веб-доступности на вашем веб-сайте.

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

Это потребует времени и исследования. Если вы только начинаете исследовать дальтонизм, тогда такой инструмент, как Contrast Checker, может помочь вам сделать доступный выбор при изменении цвета текста на вашем сайте.

Вы можете ввести цвет и цвет фона, и он сообщит вам «пройден», если у пары коэффициент контрастности 4,5: 1. Все, что ниже, не удастся. Мы воспользуемся этим инструментом, чтобы определить цвета в примере ниже.

Допустим, я хочу, чтобы текст был красным, а фон — серым. Я мог бы начать с подключения # FF0000 и # 808080 к Contrast Checker и увидеть, что у него коэффициент контрастности только 1: 1. Это не хорошо.

Чтобы улучшить соотношение, я переместу ползунок цвета переднего плана влево, а ползунок цвета фона вправо, пока не достигну минимального значения 4,5: 1.

Поскольку я хочу, чтобы мой дизайн был как можно более четким, я выберу цвет #0 и цвет фона # E0E0E0, что соответствует соотношению 7: 1.

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

Вот код CSS:

 
 

a [href] {

цвет: # 0;

цвет фона: # E0E0E0;

текстовое оформление: нет;

}

Вот HTML:

 
 

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

Другой абзац, в котором есть ссылка .

Вот результат:

См. «Перо, изменяющее цвет фона текста в CSS» Кристины Перриконе (@hubspot) на CodePen.

Добавление цвета на ваш сайт

Изменить цвет и цвет фона текста на вашем веб-сайте очень просто.Независимо от того, создаете ли вы свой сайт с нуля или создаете с помощью Bootstrap CSS, вам просто необходимы некоторые знания HTML и CSS. Однако потребуется время, чтобы изучить названия цветов и коды, а также способы их комбинирования, чтобы сделать ваш веб-сайт и другие маркетинговые материалы доступными. Еще одна причина начать добавлять цвета на свой сайт уже сегодня.

Темно-красный / # 8b0000 цвет шестигранник

В цветовом пространстве RGB шестнадцатеричный номер 8b0000 (также известный как темно-красный) состоит из 54.5% красный, 0% зеленый и 0% синий. Тогда как в цветовом пространстве CMYK он состоит из 0% голубого, 100% пурпурного, 100% желтого и 45,5% черного. Он имеет угол оттенка 0 градусов, насыщенность 100% и яркость 27,3%. Шестнадцатеричный цвет # 8b0000 можно получить смешиванием # ff0000 с # 170000. Ближайший цвет для веб-безопасности: # 9

.

● # 8b0000 описание цвета: Темно-красный .

Шестнадцатеричный цвет # 8b0000 имеет значения RGB R: 139, G: 0, B: 0 и значения CMYK C: 0, M: 1, Y: 1, K: 0,45. Его десятичное значение — 04.

Hex тройной 8b0000 # 8b0000
RGB Десятичный 139, 0, 0 RGB (139,0,0)
RGB Процент 54.5, 0, 0 RGB (54,5%, 0%, 0%)
CMYK 0, 100, 100, 45
HSL 0 °, 100, 27,3 hsl (0,100%, 27,3%)
HSV (или HSB ) 0 °, 100, 54,5
Веб-сейф 9

# 9

CIE-LAB 28.089, 50.998, 41.289
XYZ 10,648, 5,49, 0,499
xyY 0,64, 0,33, 5,49
CIE- LCH 28.089, 65.617, 38.994
CIE-LUV 28.089, 92.334, 19.919
Hunter-Lab 23,432, 40,111, 15,139
двоичный 10001011, 00000000, 00000000
Разделение дополнительных цветов
  • # 3f0000
      # 3f0000   RGB (63,0,0)  
  • # 580000
      # 580000   RGB (88,0,0)  
  • # 720000
      # 720000   RGB (114,0,0)  
  • # 8b0000
      # 8b0000   RGB (139,0,0)  
  • # a50000
      # a50000   RGB (165,0,0)  
  • # be0000
      # be0000   RGB (190,0,0)  
  • # d80000
      # d80000   RGB (216,0,0)  
Монохромный цвет

Ниже вы можете увидеть цвета, близкие к # 8b0000.Набор связанных цветов может быть полезен, если вам нужна вдохновляющая альтернатива исходному выбору цвета.

  • # 8b0023
      # 8b0023   RGB (139,0,35)  
  • # 8b0017
      # 8b0017   RGB (139,0,23)  
  • # 8b000c
      # 8b000c   RGB (139,0,12)  
  • # 8b0000
      # 8b0000   RGB (139,0,0)  
  • # 8b0c00
      # 8b0c00   RGB (139,12,0)  
  • # 8b1700
      # 8b1700   RGB (139,23,0)  
  • # 8b2300
      # 8b2300   RGB (139,35,0)  
Подобные цвета Текст с шестнадцатеричным цветом # 8b0000

Этот текст имеет цвет шрифта # 8b0000.

   Текст здесь   
# 8b0000 цвет фона

Цвет фона этого абзаца # 8b0000.

  

Содержимое

# 8b0000 цвет границы

Этот элемент имеет цвет границы # 8b0000.

  
Содержимое
CSS коды
 .текст {color: # 8b0000;}  
  .background {background-color: # 8b0000;}  
  .border {border: 1px solid # 8b0000;}  

Оттенок достигается путем добавления черного к любому чистому оттенку, а оттенок создается путем смешивания белого с любым чистым цветом. В этом примере # 020000 — самый темный цвет, а #ffeded — самый светлый.

  • # 020000
      # 020000   RGB (2,0,0)  
  • # 150000
      # 150000   RGB (21,0,0)  
  • # 2

      # 2 

    RGB (41,0,0)
  • # 3d0000
      # 3d0000   RGB (61,0,0)  
  • # 500000
      # 500000   RGB (80,0,0)  
  • # 640000
      # 640000   RGB (100,0,0)  
  • # 770000
      # 770000   RGB (119,0,0)  
  • # 8b0000
      # 8b0000   RGB (139,0,0)  
  • # 9f0000
      # 9f0000   RGB (159,0,0)  
  • # b20000
      # b20000   RGB (178,0,0)  
  • # c60000
      # c60000   RGB (198,0,0)  
  • # d

      # d 

    RGB (217,0,0)
  • # ed0000
      # ed0000   RGB (237,0,0)  
Оттенок Изменение цвета
  • # ff0202
      # ff0202   RGB (255,2,2)  
  • # ff1515
      # ff1515   RGB (255,21,21)  
  • # ff2929
      # ff2929   RGB (255,41,41)  
  • # ff3d3d
      # ff3d3d   RGB (255,61,61)  
  • # ff5050
      # ff5050   RGB (255,80,80)  
  • # ff6464
      # ff6464   RGB (255,100,100)  
  • # ff7777
      # ff7777   RGB (255,119,119)  
  • # ff8b8b
      # ff8b8b   RGB (255,139,139)  
  • # ff9f9f
      # ff9f9f   RGB (255,159,159)  
  • # ffb2b2
      # ffb2b2   RGB (255,178,178)  
  • # ffc6c6
      # ffc6c6   RGB (255,198,198)  
  • # ffd9d9
      # ffd9d9   RGB (255 217 217)  
  • #ffeded
      #ffeded   rgb (255 237 237)  
Оттенок Изменение цвета

Тон получается путем добавления серого к любому чистому оттенку.В этом случае # 4b4040 — менее насыщенный цвет, а # 8b0000 — самый насыщенный.

  • # 4b4040
      # 4b4040   RGB (75,64,64)  
  • # 503b3b
      # 503b3b   RGB (80,59,59)  
  • # 563535
      # 563535   RGB (86,53,53)  
  • # 5b3030
      # 5b3030   RGB (91,48,48)  
  • # 602b2b
      # 602b2b   RGB (96,43,43)  
  • # 662525
      # 662525   RGB (102,37,37)  
  • # 6b2020
      # 6b2020   RGB (107,32,32)  
  • # 701b1b
      # 701b1b   RGB (112,27,27)  
  • # 761515
      # 761515   RGB (118,21,21)  
  • # 7b1010
      # 7b1010   RGB (123,16,16)  
  • # 800b0b
      # 800b0b   RGB (128,11,11)  
  • # 860505
      # 860505   RGB (134,5,5)  
  • # 8b0000
      # 8b0000   RGB (139,0,0)  
Изменение цвета тона

Ниже вы можете увидеть, как # 8b0000 воспринимается людьми с дефицитом цветового зрения.Это может быть полезно, если вам нужно убедиться, что ваши цветовые комбинации доступны для дальтоников.

Монохромность
  • # 2a2a2a Ахроматопсия 0,005% населения
  • # 3d2222 Атипичная ахроматопсия 0,001% населения
Трихромность
  • # 68300c Протаномалия 1% мужчин, 0.01% женщин
  • # 6e2e00 Дейтераномалия 6% мужчин, 0,4% женщин
  • # 8e0a00 Тританомалия 0,01% населения

Перечисление цветов и функции ColorFade, ColorValue и RGBA в Power Apps — Power Apps

Color.AliceBlue ColorValue («# f0f8ff»)
ColorValue («aliceblue»)
RGBA (240, 248, 255, 1)
Цвет.Античный Белый ColorValue («# faebd7»)
ColorValue («AntiqueWhite»)
RGBA (250, 235, 215, 1)
Цвет Аква ColorValue («# 00ffff»)
ColorValue («AQUA»)
RGBA (0, 255, 255, 1)
Цвет Аквамарин ColorValue («# 7fffd4»)
ColorValue («Аквамарин»)
RGBA (127, 255, 212, 1)
Цвет.Лазурь ColorValue («# f0ffff»)
ColorValue («лазурный»)
RGBA (240, 255, 255, 1)
Цвет бежевый ColorValue («# f5f5dc»)
ColorValue («Бежевый»)
RGBA (245, 245, 220, 1)
Цветной диск ColorValue («# ffe4c4»)
ColorValue («BISQUE»)
RGBA (255, 228, 196, 1)
Цвет.Черный ColorValue («# 000000»)
ColorValue («Черный»)
RGBA (0, 0, 0, 1)
Цвет Миндаль с отбеливанием ColorValue («#ffebcd»)
ColorValue («blanchedalmond»)
RGBA (255, 235, 205, 1)
Цвет Синий ColorValue («# 0000ff»)
ColorValue («Синий»)
RGBA (0, 0, 255, 1)
Цвет.Синий-фиолетовый ColorValue («# 8a2be2»)
ColorValue («BLUEVIOLET»)
RGBA (138, 43, 226, 1)
Цвет Коричневый ColorValue («# a52a2a»)
ColorValue («Коричневый»)
RGBA (165, 42, 42, 1)
Цвет: фанера ColorValue («# deb887»)
ColorValue («Burlywood»)
RGBA (222, 184, 135, 1)
Цвет.CadetBlue ColorValue («# 5f9ea0»)
ColorValue («CadetBlue»)
RGBA (95, 158, 160, 1)
Color.Chartreuse ColorValue («# 7fff00»)
ColorValue («CHARTREUSE»)
RGBA (127, 255, 0, 1)
Цвет Шоколад ColorValue («# d2691e»)
ColorValue («Шоколад»)
RGBA (210, 105, 30, 1)
Цвет.Коралл ColorValue («# ff7f50»)
ColorValue («коралл»)
RGBA (255, 127, 80, 1)
Цвет. Васильково-синий ColorValue («# 6495ed»)
ColorValue («CornflowerBlue»)
RGBA (100, 149, 237, 1)
Color.Cornsilk ColorValue («# fff8dc»)
ColorValue («CORNSILK»)
RGBA (255, 248, 220, 1)
Цвет.Малиновый ColorValue («# dc143c»)
ColorValue («Малиновый»)
RGBA (220, 20, 60, 1)
Цвет. Циан ColorValue («# 00ffff»)
ColorValue («голубой»)
RGBA (0, 255, 255, 1)
Цвет Темно-синий ColorValue («# 00008b»)
ColorValue («DarkBlue»)
RGBA (0, 0, 139, 1)
Цвет.Темный Циан ColorValue («# 008b8b»)
ColorValue («DARKCYAN»)
RGBA (0, 139, 139, 1)
Цвет: Темно-золотой стержень ColorValue («# b8860b»)
ColorValue («DarkGoldenRod»)
RGBA (184, 134, 11, 1)
Цвет Темно-серый ColorValue («# a9a9a9»)
ColorValue («darkgray»)
RGBA (169, 169, 169, 1)
Цвет.Темно-зеленый ColorValue («# 006400»)
ColorValue («DarkGreen»)
RGBA (0, 100, 0, 1)
Цвет Темно-серый ColorValue («# a9a9a9»)
ColorValue («DARKGREY»)
RGBA (169, 169, 169, 1)
Цвет: Темно-хаки ColorValue («# bdb76b»)
ColorValue («DarkKhaki»)
RGBA (189, 183, 107, 1)
Цвет.Темно-пурпурный ColorValue («# 8b008b»)
ColorValue («darkmagenta»)
RGBA (139, 0, 139, 1)
Цвет Темно-оливковый ColorValue («# 556b2f»)
ColorValue («DarkOliveGreen»)
RGBA (85, 107, 47, 1)
Цвет Темно-оранжевый ColorValue («# ff8c00»)
ColorValue («DARKORANGE»)
RGBA (255, 140, 0, 1)
Цвет.Темная Орхидея ColorValue («# 9932cc»)
ColorValue («DarkOrchid»)
RGBA (153, 50, 204, 1)
Цвет Темно-красный ColorValue («# 8b0000»)
ColorValue («darkred»)
RGBA (139, 0, 0, 1)
Цвет. Темно-лососевый ColorValue («# e9967a»)
ColorValue («DarkSalmon»)
RGBA (233, 150, 122, 1)
Цвет.ТемноМорезеленый ColorValue («# 8fbc8f»)
ColorValue («DARKSEAGREEN»)
RGBA (143, 188, 143, 1)
Цвет Темно-синий ColorValue («# 483d8b»)
ColorValue («DarkSlateBlue»)
RGBA (72, 61, 139, 1)
Цвет Темно-серый ColorValue («# 2f4f4f»)
ColorValue («darkslategray»)
RGBA (47, 79, 79, 1)
Цвет.Темно-серый ColorValue («# 2f4f4f»)
ColorValue («DarkSlateGrey»)
RGBA (47, 79, 79, 1)
Цвет Темно-бирюзовый ColorValue («# 00ced1»)
ColorValue («DARKTURQUOISE»)
RGBA (0, 206, 209, 1)
Цвет Темно-фиолетовый ColorValue («# 9400d3»)
ColorValue («DarkViolet»)
RGBA (148, 0, 211, 1)
Цвет.DeepPink ColorValue («# ff1493»)
ColorValue («deeppink»)
RGBA (255, 20, 147, 1)
Цвет. DeepSkyBlue ColorValue («# 00bfff»)
ColorValue («DeepSkyBlue»)
RGBA (0, 191, 255, 1)
Цвет Серый ColorValue («# 696969»)
ColorValue («DIMGRAY»)
RGBA (105, 105, 105, 1)
Цвет.DimGrey ColorValue («# 696969»)
ColorValue («DimGrey»)
RGBA (105, 105, 105, 1)
Цвет DodgerBlue ColorValue («# 1e90ff»)
ColorValue («dodgerblue»)
RGBA (30, 144, 255, 1)
Color.FireBrick ColorValue («# b22222»)
ColorValue («FireBrick»)
RGBA (178, 34, 34, 1)
Цвет.Цветочный Белый ColorValue («# fffaf0»)
ColorValue («FLORALWHITE»)
RGBA (255, 250, 240, 1)
Цвет. Лес зеленый ColorValue («# 228b22»)
ColorValue («ForestGreen»)
RGBA (34, 139, 34, 1)
Цвет Фуксия ColorValue («# ff00ff»)
ColorValue («фуксия»)
RGBA (255, 0, 255, 1)
Цвет.Гейнсборо ColorValue («#dcdcdc»)
ColorValue («Gainsboro»)
RGBA (220, 220, 220, 1)
Цвет.GhostWhite ColorValue («# f8f8ff»)
ColorValue («GHOSTWHITE»)
RGBA (248, 248, 255, 1)
Цвет. Золото ColorValue («# ffd700»)
ColorValue («Gold»)
RGBA (255, 215, 0, 1)
Цвет.GoldenRod ColorValue («# daa520»)
ColorValue («Goldenrod»)
RGBA (218, 165, 32, 1)
Цвет. Серый ColorValue («# 808080»)
ColorValue («Серый»)
RGBA (128, 128, 128, 1)
Цвет. Зеленый ColorValue («# 008000»)
ColorValue («GREEN»)
RGBA (0, 128, 0, 1)
Цвет.Зеленый желтый ColorValue («# adff2f»)
ColorValue («GreenYellow»)
RGBA (173, 255, 47, 1)
Цвет. Серый ColorValue («# 808080»)
ColorValue («серый»)
RGBA (128, 128, 128, 1)
Цвет. Медовая роса ColorValue («# f0fff0»)
ColorValue («Honeydew»)
RGBA (240, 255, 240, 1)
Цвет.HotPink ColorValue («# ff69b4»)
ColorValue («HOTPINK»)
RGBA (255, 105, 180, 1)
Цвет. Индийский красный ColorValue («# cd5c5c»)
ColorValue («IndianRed»)
RGBA (205, 92, 92, 1)
Цвет Индиго ColorValue («# 4b0082»)
ColorValue («индиго»)
RGBA (75, 0, 130, 1)
Цвет.Слоновая кость ColorValue («# fffff0»)
ColorValue («Слоновая кость»)
RGBA (255, 255, 240, 1)
Цвет хаки ColorValue («# f0e68c»)
ColorValue («KHAKI»)
RGBA (240, 230, 140, 1)
Цвет лаванды ColorValue («# e6e6fa»)
ColorValue («Лаванда»)
RGBA (230, 230, 250, 1)
Цвет.Бледно-лиловый ColorValue («# fff0f5»)
ColorValue («lavenderblush»)
RGBA (255, 240, 245, 1)
Цвет.Зеленый ColorValue («# 7cfc00»)
ColorValue («LawnGreen»)
RGBA (124, 252, 0, 1)
Цвет Лимонный шифон ColorValue («#fffacd»)
ColorValue («LEMONCHIFFON»)
RGBA (255, 250, 205, 1)
Цвет.Светло-голубой ColorValue («# add8e6»)
ColorValue («LightBlue»)
RGBA (173, 216, 230, 1)
Цвет Светлый Коралловый ColorValue («# f08080»)
ColorValue («lightcoral»)
RGBA (240, 128, 128, 1)
Color.LightCyan ColorValue («# e0ffff»)
ColorValue («LightCyan»)
RGBA (224, 255, 255, 1)
Цвет.Светлый золотой стержень желтый ColorValue («# fafad2»)
ColorValue («lightgoldenrodyellow»)
RGBA (250, 250, 210, 1)
Цвет.Светло-серый ColorValue («# d3d3d3»)
ColorValue («LightGray»)
RGBA (211, 211, 211, 1)
Цвет.Светло-зеленый ColorValue («# 90ee90»)
ColorValue («светло-зеленый»)
RGBA (144, 238, 144, 1)
Цвет.Светло-серый ColorValue («# d3d3d3»)
ColorValue («LightGrey»)
RGBA (211, 211, 211, 1)
Цвет. Светло-розовый ColorValue («# ffb6c1»)
ColorValue («LIGHTPINK»)
RGBA (255, 182, 193, 1)
Цвет.Светло-лосось ColorValue («# ffa07a»)
ColorValue («LightSalmon»)
RGBA (255, 160, 122, 1)
Цвет.Светлое Морезеленое ColorValue («# 20b2aa»)
ColorValue («lightseagreen»)
RGBA (32, 178, 170, 1)
Color.LightSkyBlue ColorValue («# 87cefa»)
ColorValue («LightSkyBlue»)
RGBA (135, 206, 250, 1)
Color.LightSlateGray ColorValue («# 778899»)
ColorValue («LIGHTSLATEGRAY»)
RGBA (119, 136, 153, 1)
Цвет.LightSlateGrey ColorValue («# 778899»)
ColorValue («LightSlateGrey»)
RGBA (119, 136, 153, 1)
Color.LightSteelBlue ColorValue («# b0c4de»)
ColorValue («Lightsteelblue»)
RGBA (176, 196, 222, 1)
Цвет Светло-желтый ColorValue («# ffffe0»)
ColorValue («LightYellow»)
RGBA (255, 255, 224, 1)
Цвет.Лайм ColorValue («# 00ff00»)
ColorValue («LIME»)
RGBA (0, 255, 0, 1)
Цвет.изеленый ColorValue («# 32cd32»)
ColorValue («LimeGreen»)
RGBA (50, 205, 50, 1)
Цветное белье ColorValue («# faf0e6»)
ColorValue («белье»)
RGBA (250, 240, 230, 1)
Цвет.Пурпурный ColorValue («# ff00ff»)
ColorValue («Пурпурный»)
RGBA (255, 0, 255, 1)
Бордовый ColorValue («# 800000»)
ColorValue («MAROON»)
RGBA (128, 0, 0, 1)
Цвет Средний Аквамарин ColorValue («# 66cdaa»)
ColorValue («Средний аквамарин»)
RGBA (102, 205, 170, 1)
Цвет.Средний синий ColorValue («# 0000cd»)
ColorValue («mediumblue»)
RGBA (0, 0, 205, 1)
Цвет Средний Орхидея ColorValue («# ba55d3»)
ColorValue («MediumOrchid»)
RGBA (186, 85, 211, 1)
Цвет.Средний фиолетовый ColorValue («# 9370db»)
ColorValue («СРЕДНИЙ ПУРПУРНЫЙ»)
RGBA (147, 112, 219, 1)
Цвет.Средний SeaGreen ColorValue («# 3cb371»)
ColorValue («MediumSeaGreen»)
RGBA (60, 179, 113, 1)
Цвет.Средний сланец Синий ColorValue («# 7b68ee»)
ColorValue («mediumslateblue»)
RGBA (123, 104, 238, 1)
Цвет. Средний Весной Зеленый ColorValue («# 00fa9a»)
ColorValue («MediumSpringGreen»)
RGBA (0, 250, 154, 1)
Цвет.Средний Бирюзовый ColorValue («# 48d1cc»)
ColorValue («MEDIUMTURQUOISE»)
RGBA (72, 209, 204, 1)
Цвет Средний Фиолетовый Красный ColorValue («# c71585»)
ColorValue («MediumVioletRed»)
RGBA (199, 21, 133, 1)
Цвет. Полуночно-синий ColorValue («# 1«)
ColorValue («midnightblue»)
RGBA (25, 25, 112, 1)
Цвет.MintCream ColorValue («# f5fffa»)
ColorValue («MintCream»)
RGBA (245, 255, 250, 1)
Цвет MistyRose ColorValue («# ffe4e1»)
ColorValue («MISTYROSE»)
RGBA (255, 228, 225, 1)
Цвет.Мокасины ColorValue («# ffe4b5»)
ColorValue («Мокасины»)
RGBA (255, 228, 181, 1)
Цвет.Навахо Белый ColorValue («#ffdead»)
ColorValue («navajowhite»)
RGBA (255, 222, 173, 1)
Цвет. Темно-синий ColorValue («# 000080»)
ColorValue («Navy»)
RGBA (0, 0, 128, 1)
Color.OldLace ColorValue («# fdf5e6»)
ColorValue («OLDLACE»)
RGBA (253, 245, 230, 1)
Цвет.Оливковое ColorValue («# 808000»)
ColorValue («Olive»)
RGBA (128, 128, 0, 1)
Color.OliveDrab ColorValue («# 6b8e23»)
ColorValue («Olivedrab»)
RGBA (107, 142, 35, 1)
Цвет. Оранжевый ColorValue («# ffa500»)
ColorValue («Orange»)
RGBA (255, 165, 0, 1)
Цвет.Оранжевый Красный ColorValue («# ff4500»)
ColorValue («ORANGERED»)
RGBA (255, 69, 0, 1)
Цвет Орхидея ColorValue («# da70d6»)
ColorValue («Орхидея»)
RGBA (218, 112, 214, 1)
Цвет.бледно-золотой стержень ColorValue («# eee8aa»)
ColorValue («palegoldenrod»)
RGBA (238, 232, 170, 1)
Цвет.Бледно-зеленый ColorValue («# 98fb98»)
ColorValue («PaleGreen»)
RGBA (152, 251, 152, 1)
Цвет.Бледно-бирюзовый ColorValue («#afeeee»)
ColorValue («PALETURQUOISE»)
RGBA (175, 238, 238, 1)
Бледно-фиолетовый красный ColorValue («# db7093»)
ColorValue («PaleVioletRed»)
RGBA (219, 112, 147, 1)
Цвет.Папайя Кнут ColorValue («# ffefd5»)
ColorValue («papayawhip»)
RGBA (255, 239, 213, 1)
Color.PeachPuff ColorValue («# ffdab9»)
ColorValue («PeachPuff»)
RGBA (255, 218, 185, 1)
Color.Peru ColorValue («# cd853f»)
ColorValue («PERU»)
RGBA (205, 133, 63, 1)
Цвет.Розовый ColorValue («# ffc0cb»)
ColorValue («Розовый»)
RGBA (255, 192, 203, 1)
Цвет. Слива ColorValue («# dda0dd»)
ColorValue («сливовый»)
RGBA (221, 160, 221, 1)
Цвет. Синий порошок ColorValue («# b0e0e6»)
ColorValue («PowderBlue»)
RGBA (176, 224, 230, 1)
Цвет.Фиолетовый ColorValue («# 800080»)
ColorValue («ФИОЛЕТОВЫЙ»)
RGBA (128, 0, 128, 1)
Цвет. Красный ColorValue («# ff0000»)
ColorValue («Красный»)
RGBA (255, 0, 0, 1)
Цвет.Розово-коричневый ColorValue («# bc8f8f»)
ColorValue («розово-коричневый»)
RGBA (188, 143, 143, 1)
Цвет.RoyalBlue ColorValue («# 4169e1»)
ColorValue («RoyalBlue»)
RGBA (65, 105, 225, 1)
Цвет Седло Коричневый ColorValue («# 8b4513»)
ColorValue («SADDLEBROWN»)
RGBA (139, 69, 19, 1)
Цвет. Лосось ColorValue («# fa8072»)
ColorValue («Лосось»)
RGBA (250, 128, 114, 1)
Цвет.СэндиБраун ColorValue («# f4a460»)
ColorValue («Sandybrown»)
RGBA (244, 164, 96, 1)
Цвет.Зеленый ColorValue («# 2e8b57»)
ColorValue («SeaGreen»)
RGBA (46, 139, 87, 1)
Цвет. Ракушка ColorValue («# fff5ee»)
ColorValue («SEASHELL»)
RGBA (255, 245, 238, 1)
Цвет.Сиенна ColorValue («# a0522d»)
ColorValue («Сиенна»)
RGBA (160, 82, 45, 1)
Цвет Серебристый ColorValue («# c0c0c0»)
ColorValue («серебристый»)
RGBA (192, 192, 192, 1)
Color.SkyBlue ColorValue («# 87ceeb»)
ColorValue («SkyBlue»)
RGBA (135, 206, 235, 1)
Цвет.Сланцевый Синий ColorValue («# 6a5acd»)
ColorValue («SLATEBLUE»)
RGBA (106, 90, 205, 1)
Цвет.SlateGray ColorValue («# 708090»)
ColorValue («SlateGray»)
RGBA (112, 128, 144, 1)
Цвет Серый Шифер ColorValue («# 708090»)
ColorValue («slategrey»)
RGBA (112, 128, 144, 1)
Цвет.Снег ColorValue («#fffafa»)
ColorValue («Снег»)
RGBA (255, 250, 250, 1)
Цвет Весно-зеленый ColorValue («# 00ff7f»)
ColorValue («SPRINGGREEN»)
RGBA (0, 255, 127, 1)
Цвет.Синий ColorValue («# 4682b4»)
ColorValue («SteelBlue»)
RGBA (70, 130, 180, 1)
Цвет.Желто-коричневый ColorValue («# d2b48c»)
ColorValue («tan»)
RGBA (210, 180, 140, 1)
Color.Teal ColorValue («# 008080»)
ColorValue («Бирюзовый»)
RGBA (0, 128, 128, 1)
Цвет Чертополох ColorValue («# d8bfd8»)
ColorValue («THISTLE»)
RGBA (216, 191, 216, 1)
Цвет.Помидор ColorValue («# ff6347»)
ColorValue («Помидор»)
RGBA (255, 99, 71, 1)
Цвет.Прозрачный ColorValue («# 00000000»)
ColorValue («Прозрачный»)
RGBA (0, 0, 0, 0)
Цвет бирюзовый ColorValue («# 40e0d0»)
ColorValue («бирюзовый»)
RGBA (64, 224, 208, 1)
Цвет.Фиолетовый ColorValue («# ee82ee»)
ColorValue («Фиолетовый»)
RGBA (238, 130, 238, 1)
Цвет Пшеница ColorValue («# f5deb3»)
ColorValue («ПШЕНИЦА»)
RGBA (245, 222, 179, 1)
Цвет. Белый ColorValue («#ffffff»)
ColorValue («Белый»)
RGBA (255, 255, 255, 1)
Цвет.Белый дым ColorValue («# f5f5f5»)
ColorValue («whitemoke»)
RGBA (245, 245, 245, 1)
Цвет желтый ColorValue («# ffff00»)
ColorValue («Желтый»)
RGBA (255, 255, 0, 1)
Цвет.Желто-зеленый ColorValue («# 9acd32»)
ColorValue («ЖЕЛТО-ЗЕЛЕНЫЙ»)
RGBA (154, 205, 50, 1)

Таблица цветов, цвета по имени и цветовой код HTML в CSS, HEX, RGB, HSL

Эта цветовая диаграмма представляет собой набор общих цвета отсортированы по названию в виде одностраничного обзора.Каждая строка состоит значений RGB, значение HEX, название цвета, значение яркости, HSL значения и цветной прямоугольник. Вы можете щелкнуть на цветном прямоугольнике, чтобы импортируйте цвет в палитру цветов HSL. RGB, HEX или HSL значения могут использоваться как цветовой код HTML или цветовой код CSS.

Внизу страницы вы найдете быстрое напоминание о том, как использовать цвета в HTML / CSS.

Вы можете прокрутить цветовую таблицу вниз, если ищете вдохновение, или вы можете использовать следующую алфавитную навигацию чтобы быстрее достичь определенного цвета.
А, B, C, D, E, F, Г , H, Я, J, K, L, М, N,
O, П , Q, Р , S, Т, U, V, W, ИКС , Y, Z
Вы также можете просматривать эти цвета, отсортированные по диапазонам оттенков. и яркость. Наша страница названий цветов представлена ​​в виде введения.


Краткое напоминание о том, как использовать цвет в HTML / CSS:

Цвет шрифта:
Цвет фона:
Цвет границы:

style = «цвет: # 0000FF;»
style = «цвет фона: # 0000FF;»
style = «цвет границы: # 0000FF;»


Для других документов / приложений просто скопируйте и вставьте HEX / RGB значения из цветовой диаграммы.

Здесь вы можете переключиться на сегментированные диапазоны оттенков:

Ссылка на эту страницу:

URL

HTML-ссылка

Цитата

Электронная почта

Скопируйте и вставьте следующий текст:

WebD2: применение цвета в CSS

Обзор

В предыдущем разделе вы выбрали цветовую схему для фиктивного клиента. Пришло время выбрать один для своего собственного сайта-портфолио и применить его с помощью CSS.

Чтобы применить цвет с помощью CSS, важно знать, как цвета выражаются в CSS. Многие цвета можно выразить с помощью их английских названий. HTML 4.01 определил шестнадцать стандартных названий цветов (бирюзовый, черный, синий, фуксия, серый (или серый), зеленый, салатовый, бордовый, темно-синий, оливковый, фиолетовый, красный, серебристый, бирюзовый, белый и желтый, которые поддерживаются всеми браузерами. Сегодня браузеры поддерживают стандартные имена для многих других цветов, все они перечислены и показаны на странице HTML Color Names из W3Schools, а также на странице Web Colors в Wikipedia.

Использование названий цветов удобно и легко для понимания, но большинство компьютерных экранов сегодня способны отображать более 16 миллионов цветов. Все это невозможно назвать. Поэтому вместо этого мы идентифицируем их с помощью шестнадцатеричного триплета. Шестнадцатеричный триплет — это шестизначное число, где каждая пара цифр представляет (по порядку) значение красного, зеленого и синего цветов. Каждая пара цифр представляет собой шестнадцатеричное число (основание 16), где 00 — наименьшее значение, а FF — наибольшее. При использовании этой системы цвета формируются путем смешивания различного количества красного, зеленого и синего цветов.Вот несколько примеров:

  • # FF0000 имеет максимальное количество красного, но не имеет зеленого или синего (результат: красный)
  • # 9900FF смешивает много красного, без зеленого и максимум синего (результат: темно-фиолетовый)
  • # 000000 не имеет цвета (результат: черный)
  • #FFFFFF имеет максимальное количество всех цветов (результат: белый)

При использовании таких инструментов, как конструктор цветовых схем, ColorBlender, палитра цветов HTML из W3Schools или лаборатория цветов VisiBone Webmaster’s Color Lab, выбранные цвета выражаются в шестнадцатеричном триплете (возможно, в дополнение к другим форматам).Чтобы добавить эти цвета на свой веб-сайт, просто скопируйте и вставьте их (или запишите) в свой файл CSS.

Чтобы отслеживать все цвета в вашей цветовой схеме, может быть полезно добавить их в комментарий в верхней части внешнего файла CSS. Комментарии — это примечания автора или разработчика, размеченные таким образом, чтобы браузеры знали, что их нужно игнорировать. Все языки разметки или программирования имеют комментарии, но имеют разные теги для разметки начала и конца комментариев. Ранее вы узнали, что комментарии в HTML содержатся между .В CSS комментарии содержатся между / * и * /. Вот пример раздела комментариев в CSS:

  / *
    Цветовая гамма для этого сайта:
     # 4312AE
     # 472B83
     # 280671
     # 7446D7
     # 8E6DD7
  * / 

Результаты учащихся

По завершении этого упражнения:

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

Деятельность

  1. Повторите упражнение из предыдущего урока, но сделайте это для своего собственного сайта-портфолио. Учитывайте свою целевую аудиторию (есть ли среди них потенциальные работодатели? Если да, то кто они?). Решите, как вы хотите представить себя этой аудитории, и выберите подходящую цветовую схему.
  2. В текстовом редакторе откройте внешнюю таблицу стилей, которую вы создали на недавнем уроке. Также откройте домашнюю страницу своего портфолио в веб-браузере. Каждый раз, когда вы вносите изменения во внешнюю таблицу стилей, сохраняйте ее и обновляйте домашнюю страницу в браузере, чтобы увидеть результаты изменения.
  3. Добавьте каждое из значений цвета вашей цветовой схемы в комментарий в верхней части файла CSS.
  4. Примените свою цветовую схему к своему веб-сайту, используя некоторые цвета, чтобы определить цвет (цвет текста) или цвет фона различных элементов. Если вы применяете цвет фона, убедитесь, что цвет текста, который появляется на этом фоне, достаточно контрастен. Для максимальной контрастности в большинстве цветовых схем, если цвет фона — светлый, цвет текста должен быть черным; а если цвет фона — темный, цвет текста должен быть белым.

Раздаточные материалы / онлайн-документы

Готово?

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

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *