Хтмл цвет: CSS-цвета (свойство color)

Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах

29 декабря 2020

1. Коды и таблица базовых RGB цветов
2. Яндекс Цвета — подбор RGB палитры оттенков
3. Использование кодов и названий цветов на сайте
4. Программы для захвата цвета с экрана

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo. ru. Я продолжаю публиковать статьи в рубрике «HTML для чайников». Сегодня хочу поговорить про цвета в HTML и CSS коде, пояснить для тех, кто еще не в курсе, как можно их задать, каким образом они формируются, как для поиска или захвата нужного колора использовать специально предназначенные для этого программы и многое другое.

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

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

Коды и таблица базовых RGB цветов

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

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

Соответственно, для своего web документа мы можем выбрать любой оттенок из огромного количества возможных (256*256*256). Например, для получения черного цвета нужно, чтобы у всех трех каналов цветовой схемы было нулевое значение яркости, а для получения белого — красный, зеленый и синий цвета должны иметь максимальную яркость.

Давайте теперь попробуем разобраться, как задать яркость в каждом канале и сколько у нас есть для этого возможностей?

На самом деле, есть два основных способа:

1. задание с помощью записи яркости по каждому из каналов (красному, зеленому и синему) в шестнадцатеричной системе счисления
2. задание с помощью ввода названия цвета в коде web документа

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

Но в шестнадцатеричной системе счисления кроме арабских цифр используются еще и первые шесть букв латинского алфавита, ну и есть своя специфика формирования цифр. Углубляться в это, думаю, не стоит, но для примера скажу, что белый для Html можно будет задать так: #ffffff, а черный так: #000000. Т.е. 00 соответствует 0 в десятичной системе счисления, а ff соответствует 256.

Т.е. на каждый канал RGB цвета в CSS коде отводится две шестнадцатеричных цифры, поэтому записи значения цвета состоят из шести цифр (или букв, которые приравнены к цифрам в шестнадцатеричной системе), перед которыми ставится знак решетки «#». Все довольно просто.

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

Естественно, что вы не обязаны сами придумывать и сопоставлять шестнадцатиричные коды оттенков с теми, что вы хотите увидеть на своем интернет проекте. Подбирать колор для сайта вы можете в любом графическом редакторе (даже в бесплатном онлайн-редакторе Pixlr Editor), где вам обязательно покажут запись этого оттенка в формате RGB, или найти таблицу Html цветов и скопировать нужный вам код оттуда.

Яндекс Цвета — подбор RGB палитры оттенков в выдаче Yandex

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

Если и это вам не подходит, то откройте просто Яндекс и введите в поисковую строку запрос с названием того оттенка, который вам интересен (хотя, можно ввести просто: серобуромалиновый).

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

Все это реализуется благодаря так называемому «колдунщику» Яндекса, который призван помочь верстальщикам и дизайнерам.

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

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

Некоторые цвета в языке гипертекстовой разметки могут быть заданны с помощью слов, например, «black» означает черный, «white» — белый и т.д. Но тут есть один нюанс. Задание колора, таким образом, возможно только для ограниченного их числа.

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

Во-вторых, в валидаторе W3C для спецификации языка гипертекстовой разметки 4.01 (ее в полной мере поддерживают все возможные браузеры на текущий момент) определено только 16 колоров, которые в Html или CSS коде можно задавать словами:

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

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

Использование кодов и названий цветов в вебмастеринге

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

Поэтому я все же приведу пример задания цвета в Html, хотя при этом и будут использоваться уже не рекомендованные валидатором W3C теги. Например, раньше колор для фона задавали в теге «BODY» через атрибут «bgcolor», а текст раскрашивали сразу на всей вебстранице с помощью атрибута «text».

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

<body text="navy">Содержимое документа</body>

В результате вы получите вебстраницу с бежевым фоном и темно-синим шрифтом. До того, как CSS вошел в обиход, для изменения цвета шрифта какого-либо отдельного участка текста повсеместно использовали сейчас уже не рекомендуемый валидатором W3C тег «SPAN», в который для задания колора включали правило «color»:

<span>участок текста, который нужно было окрасить в синий колор</span>

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

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

Как вы можете видеть, иногда для сокращения записи оттенка используют не шесть знаков, а только три, в том случае, если они совпадают для каждого канала — «#6с0» вместо «#66сс00».

Выбор цвета из палитры специальной программы или захват его с экрана

Как я уже писал чуть выше, повсеместно используется RGB (красный, зеленый, синий) цветовая схема. Для каждого из трех основных колоров предусмотрено 256 градаций – от 0 до 255 (если перевести эти значения в шестнадцатеричную систему счисления, то получим – от 00 до FF).

Т.к. у нас три основных колора, из комбинации которых формируются все остальные оттенки, то шестнадцатиричная запись будет иметь примерно такой вид: 99FF66 (оттенок зеленого). Добавив перед ним # получим код #99FF66, который можно использовать как в Html, так и в стилевых файлах. Само собой разумеется, что вы сами не должны вычислять и помнить всю эту абрукадабру.

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

Вот список программ, которые позволяют все это реализовать в полной мере:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo. ru

Использую для заработка

Как изменить цвет по умолчанию выделенного текста с помощью CSS

1. Snippets
2. ›
3. CSS
4. ›
5. Как изменить цвет по умолчанию выделенного текста с помощью CSS

Содержание ¶

1. Как изменить цвет шрифта при выделении текста
2. Как изменить фоновый цвет при выделении текста
3. Как изменить цвет тени при выборе текста
4. Как изменить цвет полей Textarea и Input при выборе текста
5. Как изменить цвет выбранного изображения
6. Как создать разные эффекты выделения для одного и того же элемента на одной странице
7. Как применить эффекты выделения для всей страницы

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

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

Псевдоэлемент ::selection является известной функцией CSS3, который переопределяет цвет выделенного текста на уровне браузера или системы. Он также дает возможность указать цвет и фон для выбранного пользователем текста.

Можно изменить цвет/фоновый цвет определенных элементов или всей веб-страницы.

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

Для максимальной совместимости браузера используйте расширение -moz- для поддержки в Firefox (::-moz-selection).

Как изменить цвет шрифта при выделении текста¶

Чтобы изменить цвет элемента, необходимо добавить стиль к элементу с помощью псевдоэлемента ::selection. Можно изменить только цвет шрифта, а также цвет шрифта вместе с фоном.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .green::-moz-selection{
      color: #8ebf42;
      }
      .green::selection{
      color: #8ebf42;
      background-color: initial;
      }
      .bg-green::-moz-selection{
      background-color: #8ebf42;
      }
      .bg-green::selection{
      background-color: #8ebf42;
      }
      .bg-transparent::-moz-selection{
      color: #8ebf42;
      background-color: transparent;
      }
      .bg-transparent::selection{
      color: #8ebf42;
      background-color: transparent;
      }
      . white-green::-moz-selection{
      color: #fff;
      background-color: #8ebf42;
      }
      .white-green::selection{
      color: #fff;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p>Выберите этот текст и увидите зеленый цвет шрифта и фон по умолчанию.</p>
    <p>Выберите этот текст и увидите цвет шрифта по умолчанию и зеленый фон.</p>
    <p>Выберите этот текст и увидите зеленый цвет шрифта без фонового цвета.</p>
    <p>Выберите этот текст и увидите белый цвет шрифта и зеленый фоновый цвет.</p>
  </body>
</html>

В этом примере фоновый цвет по умолчанию — это цвет данного сайта.

Как изменить фоновый цвет при выделении текста¶

Здесь нужно применить то же самое, только для фонового цвета. Просто добавьте стиль к элементу с помощью ::selection и установите выбранный вами цвет для свойства background-color.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .green::-moz-selection{
      background-color: #8ebf42;
      }
      .green::selection{
      background-color: #8ebf42;
      }
      .yellow::-moz-selection{
      background-color: #ffcc00;
      }
      .yellow::selection{
      background-color: #ffcc00;
      }
    </style>
  </head>
  <body>
    <p>Текст с фоновым цветом по умолчанию.</p>
    <p>Выберите этот текст и увидите зеленый фон.</p>
    <p>Выберите этот текст и увидите желтый фон.</p>
  </body>
</html>

В случае, если не хотите фоновый цвет при выделении текста, установите свойство background-color со значением «transparent».

Как изменить цвет тени при выборе текста¶

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

Вам необходимо только установить свойство text-shadow для псевдоэлемента ::selection.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      
      .shadow2{
      text-shadow: 1px 1px 1px;
      }
      .shadow3{
      text-shadow: 1px 2px 4px #000;
      }
      .shadow4{
      text-shadow: 1px 2px 4px;
      }
      
      .shadow1::-moz-selection{
      text-shadow: 1px 1px 1px;
      background-color: transparent;
      }
      .shadow1::selection{
      text-shadow: 1px 1px 1px;
      background-color: transparent;
      }
      #shadow2::-moz-selection{
      text-shadow: none;
      background: #fffae6;
      }
      . shadow2::selection{
      text-shadow: none;
      background: #fffae6;
      }
      .shadow3::-moz-selection{
      text-shadow: 1px 1px 2px #222;
      }
      .shadow3::selection{
      text-shadow: 1px 1px 2px #222;
      }
      .shadow4::-moz-selection{
      text-shadow: 1px 2px 4px #208A28;
      background-color: transparent;
      color: #208A28;
      }
      .shadow4::selection{
      text-shadow: 1px 2px 4px #208A28;
      background-color: transparent;
      color: #208A28;
      }
    </style>
  </head>
  <body>
    <p>Выделите текст и увидите его тень.</p>
    <p>Выделите текст, чтобы удалить его тень.</p>
    <p>Выделите текст, чтобы он стал яснее.</p>
    <p>Выделите текст, чтобы изменить цвет его тени.</p>
  </body>
</html>

Как изменить цвет полей Textarea и Input при выборе текста¶

Также возможно изменить цвет при выделении текста для полей <textarea> и <input>. Давайте рассмотрим пример с псевдоэлементом ::selection с элементами textarea и input:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      input::-moz-selection{
      color: #1c87c9;
      background-color: #eee;
      }
      input::selection{
      color: #1c87c9;
      background-color: #eee;
      }
      textarea::-moz-selection{
      color: white;
      background-color: #8ebf42;
      }
      textarea::selection{
      color: white;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p>Элемент input</p>
    <form><input type="text" value="Выделите этот input текст" /></form>
    <p>Элемент textarea</p>
    <textarea rows="5" cols="25">Выделите этот textarea текст</textarea>
  </body>
</html>

Как изменить цвет выбранного изображения¶

Вы можете изменить цвет выделенного изображения с помощью псевдоэлемента ::selection. Смотрите пример сами:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      padding: 10px;
      }
      #img2::-moz-selection{
      background-color: #d9d9d9;
      }
      #img2::selection{
      background-color: #d9d9d9;
      }
    </style>
  </head>
  <body>
    <p>Здесь второе изображение при выделении становится серым.</p>
    <p>Выделите обе изображения, чтобы увидеть разницу.</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>

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

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.green::selection {
      background: #8ebf42;
      }
      p.green::-moz-selection {
      background: #8ebf42;
      }
      p.blue::selection {
      background: #1c87c9;
      }
      p.blue::-moz-selection {
      background: #1c87c9;
      }
      p.yellow::selection {
      background: #ffcc00;
      }
      p.yellow::-moz-selection {
      background: #ffcc00;
      }
      p.red::selection {
      background: #ff6666;
      }
      p.red::-moz-selection {
      background: #ff6666;
      }
    </style>
  </head>
  <body>
    <p>Выберите текст, и он выделится зеленым цветом. </p>
    <p>Выберите текст, и он выделится синим цветом.</p>
    <p>Выберите текст, и он выделится желтым цветом.</p>
    <p>Выберите текст, и он выделится красным цветом.</p>
  </body>
</html>

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

Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.¶

Применение эффектов выделения к определенным элементам может быть напрасной потерей времени, если просто необходимо иметь одинаковый эффект для всей страницы вашего сайта. Использование псевдоэлемента ::selection дает возможность задать цвет выделения для всей страницы без его применения к определенным элементам.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ::-moz-selection{
      color: #fff;
      background-color: #8ebf42;
      }
      ::selection{
      color: #fff;
      background-color: #8ebf42;
    </style>
  </head>
  <body>
    <h4>Выберите несколько элементов на странице и увидите белый цвет выделения, а фоновый цвет установлен в зеленый для всей страницы.</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.  Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.. I</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>

::selection поддерживается многими браузерами. Проблема совместимости с Firefox решается при помощи добавления префикса -moz- перед селектором. В случае планшетов и мобильных устройств данный селектор не поддерживается в iOS Safari и Opera Mini.

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

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

Как мы можем улучшить это?

Спасибо за ваш отзыв!

Спасибо за ваш отзыв!

Считаете ли это полезным? Да Нет

Похожие статьи

HTML цвета, таблица с кодами цветов и названиями

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

• Black
• HTML цвет: #000000
• 0, 0, 0

• Gray
• HTML цвет: #808080
• 128, 128, 128

• Silver
• HTML цвет: #C0C0C0
• 192, 192, 192

• White
• HTML цвет: #FFFFFF
• 255, 255, 255

• Fuchsia
• HTML цвет: #FF00FF
• 255, 0, 255

• Purple
• HTML цвет: #800080
• 128, 0, 128

• Red
• HTML цвет: #FF0000
• 255, 0, 0

• Maroon
• HTML цвет: #800000
• 128, 0, 0

• Yellow
• HTML цвет: #FFFF00
• 255, 255, 0

• Olive
• HTML цвет: #808000
• 128, 128, 0

• Lime
• HTML цвет: #00FF00
• 0, 255, 0

• Green
• HTML цвет: #008000
• 0, 128, 0

• Aqua
• HTML цвет: #00FFFF
• 0, 255, 255

• Teal
• HTML цвет: #008080
• 0, 128, 128

• Blue
• HTML цвет: #0000FF
• 0, 0, 255

• Navy
• HTML цвет: #000080
• 0, 0, 128

Красные тона

• IndianRed
• #CD5C5C
• 205, 92, 92

• LightCoral
• #F08080
• 240, 128, 128

• Salmon
• #FA8072
• 250, 128, 114

• DarkSalmon
• #E9967A
• 233, 150, 122

• LightSalmon
• #FFA07A
• 255, 160, 122

• Crimson
• #DC143C
• 220, 20, 60

• FireBrick
• #B22222
• 178, 34, 34

Зеленые тона

• GreenYellow
• #ADFF2F
• 173, 255, 47

• Chartreuse
• #7FFF00
• 127, 255, 0

• LawnGreen
• #7CFC00
• 124, 252, 0

• LimeGreen
• #32CD32
• 50, 205, 50

• PaleGreen
• #98FB98
• 152, 251, 152

• LightGreen
• #90EE90
• 144, 238, 144

• MediumSpringGreen
• #00FA9A
• 0, 250, 154

• SpringGreen
• #00FF7F
• 0, 255, 127

• MediumSeaGreen
• #3CB371
• 60, 179, 113

• SeaGreen
• #2E8B57
• 46, 139, 87

• ForestGreen
• #228B22
• 34, 139, 34

• DarkGreen
• #006400
• 0, 100, 0

• YellowGreen
• #9ACD32
• 154, 205, 50

• OliveDrab
• #6B8E23
• 107, 142, 35

• DarkOliveGreen
• #556B2F
• 85, 107, 47

• MediumAquamarine
• #66CDAA
• 102, 205, 170

• DarkSeaGreen
• #8FBC8F
• 143, 188, 143

• LightSeaGreen
• #20B2AA
• 32, 178, 170

• DarkCyan
• #008B8B
• 0, 139, 139

Розовые тона

• LightPink
• #FFB6C1
• 255, 182, 193

• HotPink
• #FF69B4
• 255, 105, 180

• DeepPink
• #FF1493
• 255, 20, 147

• MediumVioletRed
• #C71585
• 199, 21, 133

• PaleVioletRed
• #DB7093
• 219, 112, 147

Оранжевые тона

• LightSalmon
• #FFA07A
• 255, 160, 122

• OrangeRed
• #FF4500
• 255, 69, 0

• DarkOrange
• #FF8C00
• 255, 140, 0

Желтые тона

• LightYellow
• #FFFFE0
• 255, 255, 224

• LemonChiffon
• #FFFACD
• 255, 250, 205

• LightGoldenrodYellow
• #FAFAD2
• 250, 250, 210

• PapayaWhip
• #FFEFD5
• 255, 239, 213

• Moccasin
• #FFE4B5
• 255, 228, 181

• PeachPuff
• #FFDAB9
• 255, 218, 185

• PaleGoldenrod
• #EEE8AA
• 238, 232, 170

• Khaki
• #F0E68C
• 240, 230, 140

• DarkKhaki
• #BDB76B
• 189, 183, 107

Синие тона

• LightCyan
• #E0FFFF
• 224, 255, 255

• PaleTurquoise
• #AFEEEE
• 175, 238, 238

• Aquamarine
• #7FFFD4
• 127, 255, 212

• Turquoise
• #40E0D0
• 64, 224, 208

• MediumTurquoise
• #48D1CC
• 72, 209, 204

• DarkTurquoise
• #00CED1
• 0, 206, 209

• CadetBlue
• #5F9EA0
• 95, 158, 160

• SteelBlue
• #4682B4
• 70, 130, 180

• LightSteelBlue
• #B0C4DE
• 176, 196, 222

• PowderBlue
• #B0E0E6
• 176, 224, 230

• LightBlue
• #ADD8E6
• 173, 216, 230

• SkyBlue
• #87CEEB
• 135, 206, 235

• LightSkyBlue
• #87CEFA
• 135, 206, 250

• DeepSkyBlue
• #00BFFF
• 0, 191, 255

• DodgerBlue
• #1E90FF
• 30, 144, 255

• CornflowerBlue
• #6495ED
• 100, 149, 237

• MediumSlateBlue
• #7B68EE
• 123, 104, 238

• RoyalBlue
• #4169E1
• 65, 105, 225

• MediumBlue
• #0000CD
• 0, 0, 205

• MidnightBlue
• #191970
• 25, 25, 112

Фиолетовые тона

• Lavender
• #E6E6FA
• 230, 230, 250

• Thistle
• #D8BFD8
• 216, 191, 216

• Violet
• #EE82EE
• 238, 130, 238

• Orchid
• #DA70D6
• 218, 112, 214

• Fuchsia
• #FF00FF
• 255, 0, 255

• Magenta
• #FF00FF
• 255, 0, 255

• MediumOrchid
• #BA55D3
• 186, 85, 211

• MediumPurple
• #9370DB
• 147, 112, 219

• BlueViolet
• #8A2BE2
• 138, 43, 226

• DarkViolet
• #9400D3
• 148, 0, 211

• DarkOrchid
• #9932CC
• 153, 50, 204

• DarkMagenta
• #8B008B
• 139, 0, 139

• SlateBlue
• #6A5ACD
• 106, 90, 205

• DarkSlateBlue
• #483D8B
• 72, 61, 139

Белые тона

• White
• #FFFFFF
• 255, 255, 255

• Honeydew
• #F0FFF0
• 240, 255, 240

• MintCream
• #F5FFFA
• 245, 255, 250

• Azure
• #F0FFFF
• 240, 255, 255

• AliceBlue
• #F0F8FF
• 240, 248, 255

• GhostWhite
• #F8F8FF
• 248, 248, 255

• WhiteSmoke
• #F5F5F5
• 245, 245, 245

• Seashell
• #FFF5EE
• 255, 245, 238

• Beige
• #F5F5DC
• 245, 245, 220

• OldLace
• #FDF5E6
• 253, 245, 230

• FloralWhite
• #FFFAF0
• 255, 250, 240

• Ivory
• #FFFFF0
• 255, 255, 240

• AntiqueWhite
• #FAEBD7
• 250, 235, 215

• Linen
• #FAF0E6
• 250, 240, 230

Как изменить цвет ссылки HTML

Ссылка в HTML выглядит следующим образом:

<a href=»/» title=»Ссылка HTML»>Изменяем цвет ссылки</a>

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

<a href=»/» title=»Ссылка HTML» style=»color:#FF0000; text-decoration:none»>Изменяем цвет ссылки</a>

Есть и другой способ изменить внешний вид ссылки. Для этих целей используются таблицы стилей CSS. Причем вы сможете задать значения для ссылок при различных условиях, будь-то активная ссылка (a:active), посещенная ссылка(a:visited) либо ссылка при наведении мыши (a:hover). Вот как это делается:

a {
color:#FF0000;
text-decoration:none
}

a:active {
color:#FF0000;
text-decoration:none
}

a:visited {
color:#666666;
text-decoration:none
}

a:hover {
color:#339900;
text-decoration: underline
}

<html>

<head>
<link rel=»stylesheet» type=»text/css» href=»style. css»>
</head>

<body>

<a href=»/» title=»Ссылка HTML»>Изменяем цвет ссылки</a>

</body>

</html>

a {
color:#FF0000;
text-decoration:none
}

a:active {
color:#FF0000;
text-decoration:none
}

a:visited {
color:#666666;
text-decoration:none
}

a:hover {
color:#339900;
text-decoration: underline
}

Изменяя значения свойств можно менять внешний вид ссылок.

— HTML: язык разметки гипертекста

элементов типа color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путем ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb формат. Разрешены только простые цвета (без альфа-канала), хотя цвета CSS имеют больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.

Значение элемента типа color всегда является DOMString , содержащим 7-символьную строку, определяющую цвет RGB в шестнадцатеричном формате. Хотя вы можете вводить цвет как в верхнем, так и в нижнем регистре, он будет сохранен в нижнем регистре. Значение никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

Примечание : Установка значения, которое не является допустимым, полностью непрозрачным, цветом RGB в шестнадцатеричной системе счисления , приведет к установке значения # 000000 .В частности, вы не можете использовать стандартные названия цветов CSS или какой-либо синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS — это отдельные языки и спецификации. Кроме того, не поддерживаются цвета с альфа-каналом; указание цвета в 9-значном шестнадцатеричном формате (например, # 009900aa ) также приведет к установке цвета на # 000000 .

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

Предоставление цвета по умолчанию

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

Если вы не укажете значение, по умолчанию будет установлено значение # 000000 , которое является черным. Значение должно быть в семизначном шестнадцатеричном формате, то есть за символом «#» следуют две цифры, каждая из которых представляет красный, зеленый и синий цвета, например: #rrggbb .Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba () ), вам придется преобразовать их в шестнадцатеричный формат, прежде чем устанавливать значение .

Отслеживание изменений цвета

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

Вот пример, который отслеживает изменение значения цвета с течением времени:

  colorPicker. addEventListener («вход», updateFirst, false);
colorPicker.addEventListener ("изменение", watchColorPicker, false);

function watchColorPicker (event) {
  document.querySelectorAll ("p"). forEach (function (p) {
    п.style.color = event.target.value;
  });
}
  

Выбор значения

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

  colorWell.select ();  

Варианты внешнего вида

Как упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация ввода цвета будет текстовым полем, которое автоматически проверяет содержимое, чтобы гарантировать, что значение имеет правильный формат. Например, в Safari 10.1 вы увидите что-то вроде этого:

То же самое содержимое выглядит так в Firefox 55:

В этом случае щелчок по ячейке цвета представляет палитру цвета платформы, из которой вы можете выбрать цвет (в данном случае палитра macOS):

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

Давайте создадим пример, который делает немного больше с вводом цвета, отслеживая события change и input , чтобы взять новый цвет и применить его к каждому элементу

в документе.

HTML

HTML довольно прост — пара параграфов описательного материала с типа color с идентификатором colorWell , который мы будем использовать для изменения цвета параграфов » текст.

  
 Пример, демонстрирующий использование  & lt; input type = "color" & gt; 
   контроль. 

 Цвет: 


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

JavaScript

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

  var colorWell;
var defaultColor = "# 0000ff";

window. addEventListener ("загрузка", запуск, ложь);
  

Инициализация

После загрузки страницы вызывается наш обработчик событий load , startup () :

  function startup () {
  colorWell = документ.querySelector ("# colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener («ввод», updateFirst, false);
  colorWell.addEventListener ("изменение", updateAll, false);
  colorWell.select ();
}
  

Он получает ссылку на элемент color в переменной с именем colorWell , затем устанавливает значение входного цвета на значение в defaultColor . Затем событие ввода input настраивается для вызова нашей функции updateFirst () , а событие change настраивается на вызов updateAll () .Оба они показаны ниже.

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

Реагирование на изменение цвета

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

  function updateFirst (событие) {
  var p = document.querySelector ("p");

  if (p) {
    p.style.color = event.target.value;
  }
}  

Когда палитра цветов закрывается, указывая, что значение больше не будет изменяться (если пользователь повторно не откроет палитру цветов), элементу отправляется событие change .Мы обрабатываем это событие с помощью функции updateAll () , используя Event. target.value , чтобы получить окончательный выбранный цвет:

  function updateAll (событие) {
  document.querySelectorAll ("p"). forEach (function (p) {
    p.style.color = event.target.value;
  });
}
  

Устанавливает цвет каждого блока

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

Результат

Окончательный результат выглядит так:

таблицы BCD загружаются только в браузере

Руководство для начинающих по цветовым кодам HTML

Добавление цвета на ваш сайт может вызвать эмоции, создать атмосферу и сделать ваш общий дизайн более целостным.

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

Начнем с определения цветовых кодов HTML.

Цветовые коды HTML

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

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

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

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

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

Байт — это пара символов в шестнадцатеричном коде, которые представляют интенсивность трех основных цветов (красного, зеленого и синего) в цвете. Диапазон значений от 00 (самая низкая интенсивность основного цвета) до FF (самая высокая интенсивность основного цвета)

Это означает, что каждый шестнадцатеричный код состоит из трех пар или шести символов в общей сложности. Эти шесть символов могут быть любой комбинацией из десяти цифр (0-9) и шести букв (a-f).Эта 16-символьная система счисления известна как шестнадцатеричный код. Всего существует 16 777 216 возможных комбинаций. Попробуем разобраться в некоторых из них.

Чтобы вычислить шестнадцатеричный код белого цвета, примите во внимание, что вы должны смешать каждый из трех основных цветов с их полной интенсивностью. Это означает, что шестнадцатеричный код белого цвета — #FFFFFF. Поскольку черному не хватает основного цвета, его шестнадцатеричный код цвета # 000000. Если вы хотите красный цвет, вам нужна самая высокая интенсивность красного и самая низкая интенсивность двух других основных цветов.Следовательно, шестнадцатеричный код красного цвета будет # FF0000. Взгляните на диаграмму ниже, чтобы увидеть еще несколько комбинаций.

Источник

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

Источник

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

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

Источник

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

Теперь, когда вы понимаете, что такое цветовые коды HTML и, в частности, шестнадцатеричные коды, давайте посмотрим, как можно использовать цветовые коды HTML.

Как использовать цветовые коды HTML

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

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

 
 
  Красный текст абзаца 
 

  

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

Источник

Вы также можете разделить HTML и CSS и получить тот же результат.

Вот код CSS, который вы поместили в заголовок своего документа:

 
 
 кузов {
 
 цвет: # FF0000; 
 
} 
  

Вот HTML-код, который вы поместили в основной раздел документа:

 
 
 
 Красный абзац текста 
 

  

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

Создание сайта в цвете

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

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

цветовых кодов HTML — CodeBerry Blog

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

Мы уже написали введение в веб-разработку, поэтому вам следует прочитать эту статью, если вы интересуетесь основами HTML.

В этом посте мы рассмотрим, как определять цвета и оттенки в цветовых кодах HTML, с множеством примеров иллюстраций.

Названия цветовых кодов HTML

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

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

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

С помощью цветовых кодов HTML мы можем создавать бесконечное разнообразие красочных иллюстраций.

Палитры цветов и смешивание цветов

Мы можем найти цветовые коды с помощью инструментов палитры цветов.

Вот несколько примеров палитры цветов:

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

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

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

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

Цветовой код начинается с символа #, за которым следует серия из шести символов. Мы можем определить точный цвет, который мы хотим использовать, с числами (0-9) и буквами (a-f).Первые два символа определяют значение красного (RR), второй набор из двух определяет зеленый (GG), а третий набор из двух определяет синий (BB).

Например: # eb4034

Различные оттенки серого содержат одинаковое количество всех компонентов.

Например,

# 404040

#bebebe

Каждый символ черного цвета 0

# 000000

Белый цвет содержит максимальное значение всех компонентов

#ffffff

Короче шестнадцатеричный значения

Бывают случаи, когда мы можем использовать даже более короткие коды; для цветов, которые имеют одинаковые символы для каждого компонента, мы можем использовать только три символа и получить один и тот же цвет.

Код # 000 определяет черный цвет, как и # 000000, а # 0ff создает тот же бирюзовый цвет, что и # 00ffff.

Более короткая версия # cc2244 — # c24

Куда идет цветовой код HTML?

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

и т.

Атрибуты:

В теге мы можем определить цвет текста с помощью атрибута « text» и цвет фона с помощью атрибута «bgcolor» . Мы можем использовать атрибут «цвет» в теге , чтобы изменить цвет.

В HTML мы можем использовать тег