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

Обновлено 19 декабря 2023 Просмотров: 37 591 Автор: Дмитрий Петров

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

Изучение язsка HTML

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

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

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

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

Задание цвета в Html или CSS с помощью шестнадцатеричной системы

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

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

ОттенокШестнадцатиричная запись
Желтый#ffff00
Зеленый#008000
Белый#ffffff
Красный#ff0000
Серый#808080
Синий#0000ff
Черный#000000

Естественно, что вы не обязаны сами придумывать и сопоставлять шестнадцатиричные коды оттенков с теми, что вы хотите увидеть на своем интернет проекте. Подбирать колор для сайта вы можете в любом графическом редакторе (даже в бесплатном онлайн-редакторе 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 style="background-color:#fdf9fe" text="navy">Содержимое документа</body>

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

<span style="color:#ff0000">участок текста, который нужно было окрасить в синий колор</span>

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

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

Как задается цвет текста через CSS

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

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

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

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

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

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

  1. ColorPic
    Скачать программу для задания цвета ColorPic
  2. ColorMania
    Скачать ColorMania
  3. Contrast Analyser 2.0
    Скачать программу для анализа цвета на экране
  4. Absolute Color Picker
    Скачать цветовую пипетку Absolute Color Picker
  5. Just Color Picker
    Скачать анализатор цвета Just Color Picker

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

Комментарии и отзывы (12)

Витя

Может мой вопрос немного туповат но я всё же не понял как изменить цвет дизайна (например у меня цвет дизайна красный а я хочу поменять на чёрный) =))

Дмитрий

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

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

Виктор

А как сделать фон полупрозрачным?

Уткин Михаил

Здравствуйте, уважаемый Дмитрий!

Подскажите, плз: почему ФайрФокс понимает трёхзначное написание цвета, типа «.style1 {color: #666}», а ИЕ-9 абсолютно этого не понимает и требует шестизначного написания – «.style1 {color: #666666}», иначе выдаёт всё чёрным? Ну объясните, плз, в чём тут прикол?

С искреннейшим уважением, Михаил Уткин, http://tzhs.narod.ru/

Леха

Отличная утилита этот Just Color Picker! Только что скачал последнюю версию. Работает прекрасно, простой интерфейс и при этом много полезных функций, а также для понимания цветовых сочетаний.

Подобрал с помощью этого колорпикера хорошие оттенки для дизайна моего ресурса за 2 минуты. Кому интересно — качайте с сайта автора проги http://annystudio.com/software/colorpicker/ Бесплатно.

светлана

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

Даниил

Дмитрий, а не подскажите, какой у вас на сайте стоит шрифт и его размер. Заранее спасибо.

Дмитрий

Даниил: это довольно легко узнать для любого сайта с помощью плагина для Firefox под названием Firebug (ссылка на него приведена в моем ответе чуть выше). Ну, а в Опере и в Хроме уже имеются встроенные инструменты подобные Файрбагу.

Html коды цветов

skv

большое человеческое спасибо!! пойду маляваць))

ЖуткоSтрашно

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

===============

Заранее благодарю!

Юлия

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

Вы ее находили уже? не знаете, как теперь в нее попасть?

Юлия

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

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

Хотя зачем его убирать, такой удобный сервис.

Ваш комментарий или отзыв