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

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

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

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

Значения цветов

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

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

Названия цветов

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

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

Безопасные цвета Web

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

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

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

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

Как работают 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. Это предварительно определенные ключевые слова цвета, такие как красный, синий, зеленый и т. Д.

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

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

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

1. # 000000 представляет черный цвет
2. # FF00FF представляет темно-фиолетовый цвет

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

цветов 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);} представляет собой цвет лайма

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

Как использовать цвета шестнадцатеричного кода 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 и т. Д.

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

должны начинаться с «знака числа» (#) (также известного как знак фунта или решетка). Затем шесть цифр шестнадцатеричного значения. Каждая пара из двух цифр представляет красный, зеленый и синий цвета. Шаблон выглядит как #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.

• # 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.

  
 Содержимое 
  

 .текст {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

Таблица цветов, цвета по имени и цветовой код 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. Покажите своему инструктору свои результаты перед тем, как приступить к следующему модулю.