Цвет главных страницах яндекса. Автоматическое определение цвета — опыт команды «Яндекса

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

www.bestseoblog.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержимое документа

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

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

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

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

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

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

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

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

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

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

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

Вам может быть интересно

Списки в Html коде - теги UL, OL, LI и DL
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники

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

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

Каждая версия яндекс браузера оформляется красиво, дизайном занимаются лучшие специалисты. Но есть такие пользователи, которые не любят однообразие. Даже самый красивый вид им быстро наскучит, захочется «поменять обстановку», «вдохнуть жизнь» в работу с веб-обозревателем.

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

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

• Включите веб-обозреватель.
• Откройте новую вкладку (можно сделать это в настройках рядом с панелью закладок).
• Перед вами появится «Экспресс-панель». Нужно опуститься до нижней части экрана и нажать на значок «Сменить фон».
• Затем откроется перечень с самыми разными видами оформления браузера, среди которых вам нужно выбрать понравившийся больше всего. Выбрав подходящий рисунок, нажмите на кнопку «Готово».

Можете не беспокоиться о том, что каждый раз нужно менять фон — этого не потребуется. Теперь каждый раз при попадании в «Экспресс-панель» (даже если вы закрывали и снова открывали яндекс) вы будете наслаждаться приятной картиной. А работать с поднятым настроением намного интереснее и легче!

Можно ли установить на фон что-то «свое»?

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

Такие случаи предусмотрены создателями Яндекс Браузера: вы можете загрузить личные картины, имеющиеся на вашем компьютере. Это дает полную волю фантазии. Каково, например, будет приятно, если каждый раз, попадая в «Экспресс-панель», вы будете видеть яркий фрагмент своей жизни или фото маленького ребенка?

Для того, чтобы установить на фон картинку из своего устройства, вам нужно:

• включить Яндекс;
• открыть новое подокно;
• найдите функцию «Сменить фон» и нажмите на нее;
• за последним изображением имеется значок «+», на него вам нужно нажать;
• выберите фото, которое хотите видеть в браузере, и нажмите ввод («Энтер»).

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

Новый алгоритм подбора цветов для промо-карточек приложений в Yandex Launcher.

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

Примеры использования алгоритмов подбора цветов в поиске и в «Яндекс.Музыке»

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

У нас в Yandex Launcher есть промо-карточки приложений: рейтинг, описание и кнопка «Установить». Это контекстные рекомендации - они открываются поверх списка приложений или в папке на рабочем столе.

Первоначальная реализация

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

• неправильное определение цвета;
• «грязные» цвета из-за усреднения;
• тусклые кнопки, скучные карточки.

Примеры проблемных карточек

Чего на самом деле хотелось

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

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

В субботу я сдул пыль с редактора кода, расчехлил HTML5 и Canvas и стал придумывать. В понедельник пришел к команде с предложением.

Новый алгоритм определения цветов

Шаг 1. Берем иконку. Выкидываем белые, черные и прозрачные пиксели.

Исходная иконка → Квадрат из отфильтрованных пикселей

Шаг 2. Уменьшаем полученное изображение до размера 2 × 2 пикселя (с отключенным антиалиасингом). В результате получим четыре цвета иконки. Если исходная картинка однородная, они могут повторяться - ничего страшного.

Результат после второго шага. Исходная иконка → Цвета

У нас отключен антиалиасинг, чтобы цвета не смешивались, не становились «грязными».

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

Шаг 3. Почти все готово. Осталось совсем чуть-чуть: достаем полученные цвета, переводим в HSL , сортируем по светлоте (L). Красим карточку.

Светлая схема:

• фон - самый светлый цвет;
• кнопка - ближайший к светлому;
• текст - самый темный.

Темная схема (если два и более цветов темные):

• фон - самый темный цвет;
• кнопка - ближайший к темному;
• текст - самый светлый.

Применяя цвета, проверяем контрастность: разница Lightness между фоном и кнопкой ≥ 20; между фоном и текстом ≥ 60. Если не соответствует, корректируем.

Получившиеся карточки. Исходная иконка → Цвета → Карточка

И еще немного карточек для примера:

Результат

У нас получились красочные карточки, из настоящих цветов иконки, без «грязных» примесей. За счет использования нескольких цветов карточка выглядит гораздо живее. Особенно приятно, что при однородном фоне иконки карточка становится ее прямым продолжением: граница между ними совсем не заметна.

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

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

Доработанный алгоритм вошел в ближайший релиз. Отдельное спасибо руководителю группы разработки Yandex Launcher Диме Овчарову - за интерес, желание и терпение. Напоследок - больше примеров.