Автоматичне визначення кольору - досвід команди «Яндекса. Як поміняти колір яндекс браузера можна встановити на фон щось «своє»

На даний момент, для того щоб отримати валідну верстку сайту, рекомендую при завданні коду кольору використовувати 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 (таблицями каскадних стилів) і вказівка \u200b\u200bкоду кольору безпосередньо в 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, а так само спецсимволи нерозривного пробілу і інші мнемоніки

Створюючи яндекс, розробники піклувалися про те, щоб він був легкий і зрозумілий у використанні.

В налаштуваннях оформлення та шрифту немає нічого зайвого, так що користувачі швидко зможуть зрозуміти, що до чого.

Кожна версія яндекс браузера оформляється красиво, дизайном займаються кращі фахівці. Але є такі користувачі, які не люблять одноманітність. Навіть найкрасивіший вид їм швидко набридне, захочеться «змінити обстановку», «вдихнути життя» в роботу з браузером.

В цьому нічого поганого немає, інакше навіщо розробники внесли функцію зміни інтерфейсу? Щоб кожен, кому не подобається встановлений за стандартом фон або набридла одноманітність, міг поміняти вид свого застосування.

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

• Увімкніть веб-оглядач.
• Відкрийте нову вкладку (можна зробити це в налаштуваннях поруч з панеллю закладок).
• Перед вами з'явиться «Експрес-панель». Потрібно опуститися до нижньої частини екрану і натиснути на значок «Змінити фон».
• Потім відкриється перелік з різними видами оформлення браузера, серед яких вам потрібно вибрати потрібний найбільше. Вибравши відповідний малюнок, натисніть на кнопку «Готово».

Можете не турбуватися про те, що кожного разу потрібно змінювати фон - цього не буде потрібно. Тепер кожен раз при попаданні в «Експрес-панель» (навіть якщо ви закривали і знову відкривали яндекс) ви будете насолоджуватися приємною картиною. А працювати з піднятим настроєм набагато цікавіше і легше!

Чи можна встановити на фон щось «своє»?

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

Такі випадки передбачені творцями Яндекс браузера: ви можете завантажити особисті картини, наявні на вашому комп'ютері. Це дає повну волю фантазії. Яке, наприклад, буде приємно, якщо кожен раз, потрапляючи в «Експрес-панель», ви будете бачити яскравий фрагмент свого життя або фото маленької дитини?

Для того, щоб встановити на фон картинку зі свого пристрою, вам потрібно:

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

Тепер ви можете встановити абсолютно будь-яке зображення, яке зберігається до наступної зміни.

Новий алгоритм підбору кольорів для промо-карток додатків в Yandex Launcher.

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

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

Залежно від завдань підбір кольору може вимагати складних обчислень. Але буває, що отримати необхідний результат набагато простіше.

У нас в Yandex Launcher є промо-картки додатків: рейтинг, опис і кнопка «Встановити». Це контекстні рекомендації - вони відкриваються поверх списку додатків або в папці на робочому столі.

первісна реалізація

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

• неправильне визначення кольору;
• «Брудні» кольору через усереднення;
• тьмяні кнопки, нудні картки.

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

Чого насправді хотілося

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

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

В суботу я здув пил з редактора коду, розчохлив HTML5 і Canvas і став вигадувати. У понеділок прийшов до команди з пропозицією.

Новий алгоритм визначення квітів

Крок 1. Беремо іконку. Викидаємо білі, чорні і прозорі пікселі.

Вихідна іконка → Квадрат з відфільтрованих пікселів

Крок 2. Зменшуємо отримане зображення до розміру 2 × 2 пікселя (з відключеним антиалиасинг). В результаті отримаємо чотири кольори іконки. Якщо вихідна картинка однорідна, вони можуть повторюватися - нічого страшного.

Результат після другого кроку. Вихідна іконка → Кольори

У нас відключений антиалиасинг, щоб кольори не змішувалися, що не ставали «брудними».

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

Крок 3. Майже все готово. Залишилося зовсім трохи: дістаємо отримані кольору, переводимо в HSL, сортуємо по світлин (L). Фарбуємо картку.

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

• фон - найсвітліший колір;
• кнопка - найближчий до світлого;
• текст - найтемніший.

Темна схема (якщо два і більше кольорів темні):

• фон - найтемніший колір;
• кнопка - найближчий до темного;
• текст - найсвітліший.

Застосовуючи кольору, перевіряємо контрастність: різниця Lightness між фоном і кнопкою ≥ 20; між фоном і текстом ≥ 60. Якщо не відповідає, коригуємо.

Утворені картки. Вихідна іконка → Кольори → Картка

І ще трохи карток для прикладу:

результат

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

І найголовніше: через два дні після пропозиції нового алгоритму перша реалізація вже була доступна в dev-збірці. Випробували всередині команди, налаштували пороги для фільтра на першому кроці, передбачили особливі випадки:

• іконка з одного кольору - робимо фон трохи темніше, щоб не зливалася;
• іконка з фоном - дивимося пікселі по краях; якщо всі однакові, ставимо такої ж фон картки.

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