Здравейте, скъпи читатели на сайта на блога. Продължавам да публикувам статии в раздела "". Днес искам да говоря за цветовете в HTML и CSS кода, да обясня за тези, които все още не знаят как можете да ги зададете, как се формират, как да използвате програми, специално създадени за това, за да търсите или улавяте желания цвят и много Повече ▼.

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

Нека ви напомня, че вече успяхме да се запознаем с основните принципи, използвани в . Също така вече прегледахме етикетите и научихме, научихме много и как.

Кодове и таблица на основните RGB цветове

Съвсем логично е в езика за маркиране на хипертекст и каскадните стилови таблици да има възможност за оцветяване на документи, защото в противен случай сайтовете биха били много скучни и еднотипни. За това обикновено се използва модел, наречен RGB (съкращение, получено от три английски думи за червено, зелено и синьо).

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

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

Нека сега се опитаме да разберем как да настроим яркостта във всеки канал и колко възможности имаме за това?

Всъщност там два основни начина:

1. настройка чрез записване на яркостта за всеки от каналите (червен, зелен и син) в шестнадесетичен запис
2. задача, като въведете името на цвета в кода на уеб документа

Нека започнем със сложното и се опитаме да разберем как да напишем цветовете в шестнадесетичен код. Ако искаме например да запишем кода за бялото в десетичната система, тогава ще получим кода 256 256 256, а за черното - 0 0 0. Тук вероятно всичко е ясно.

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

Тези. Има две шестнадесетични цифри за всеки RGB цветови канал в CSS кода, така че записите на стойността на цвета се състоят от шест цифри (или букви, които се равняват на шестнадесетични числа), предшествани от знак за паунд "#". Всичко е доста просто.

Например в таблицата по-горе за най-простите нюанси техните шестнадесетични записи ще изглеждат така:

Естествено, не сте длъжни да измисляте и сравнявате шестнадесетични кодове на нюанси с тези, които искате да видите във вашия интернет проект. Можете да изберете цвят за сайта във всеки графичен редактор (дори в), където определено ще ви бъде показан запис на този нюанс в RGB формат, или намерете html таблицацветове и копирайте кода, от който се нуждаете.

Yandex Colors - избор на RGB цветови палитри в резултатите от търсенето на Yandex

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

Ако това не ви подхожда, просто го отворете и въведете в лентата за търсене заявка с името на този нюанс, който ви интересува (въпреки че можете просто да въведете: сиво-кафяво червено).

В резултат на това на самия връх Резултати от търсенето, ще видите много удобна таблица с палитри Yandex.Colors за избор на цветове за вашия сайт. В долния десен ъгъл на тази палитра можете да копирате шестнадесетичния код на нюанса, от който се нуждаете (има решетка пред него), който след това остава само да се вмъкне в Правилно мястовашия уеб документ.

Всичко това се реализира благодарение на т.нар., който е предназначен да помогне на дизайнерите и дизайнерите по оформление.

Можеш задайте цвят в реда за търсене на Yandex, както под формата на името му, така и под формата на код - в резултат ще видите как ще изглежда на екрана и, ако е необходимо, можете да получите неговия шестнадесетичен запис.

Всъщност този инструмент може да бъде полезен и обикновени потребителиИнтернет, например, за да разберете как ще изглеждат мебели в сиво-бур-малинови петна. Можете също да гледате видеоклип за използването на този съветник на Yandex:

Някои цветове в езика за маркиране на хипертекст може да се уточни с думи, например "черно" означава черно, "бяло" означава бяло и т.н. Но има едно предупреждение. Следователно задачата за цвят е възможна само за ограничен брой от тях.

Е, първо, вероятно е ясно, че всичките 16 милиона са възможни RGB моделняма да можете да си представите нюанси с помощта на думи в нито една таблица (ще се уморите да я превъртате).

Второ, в W3C валидатора за Hypertext Markup Language Specification 4.01 (тя се поддържа напълно от всички възможни браузърив момента) са дефинирани само 16 цвята, които могат да бъдат посочени в Html или CSS код с думите:

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

Следователно, в допълнение към таблицата с 16 основни нюанса, дадена точно по-горе, всички други цветове трябва да бъдат посочени в кода на уеб документите само с шестнадесетична нотация, за да се избегнат ненужни ексцесии.

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

На този моментвсичко външен дизайн уеб странициоставено на CSS (каскадни стилови таблици) и указването на цветовия код директно в Html е изключително рядко, но все още се среща. Освен това има ситуации, когато е невъзможно по една или друга причина да се използват външни таблици. css стилове(например в случай на създаване на съобщение).

Затова все пак ще дам пример за настройка на цветове в Html, въпреки че в този случай те вече ще се използват тагове, които не се препоръчват от W3C валидатора. Например, преди цвета на фона се задаваше в тага "BODY" чрез атрибута "bgcolor", а текстът се оцветяваше веднага на цялата уеб страница чрез атрибута "text".

Задаването на желаните нюанси в този случай може да изглежда например така:

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

В резултат на това ще получите уеб страница с бежов фон и тъмносин шрифт. Преди CSS да влезе в употреба, за промяна на цвета на шрифта на всяка отделна част от текста, етикетът „FONT“, който вече не се препоръчва от валидатора на W3C, беше често използван, който включваше атрибута „color“ със същото име за задайте цвета:

част от текста, която трябваше да бъде оцветена в синьо

За да видите резултата от написания код на екрана, трябва да запазите този файл с разширение html и след това да го отворите във всеки удобен за вас браузър.

Сега, за да се счита оформлението на вашия сайт за валидно, е препоръчително задаване на цветове на елементи в каскаден лист със стиловечрез съответните правила и свойства. Правилата за такова вмъкване в CSS не се различават от описаните по-горе.

Както можете да видите, понякога не се използват шест знака за съкращаване на записа на нюанса, а само три, ако съвпадат за всеки канал - „# 6c0“ вместо „# 66cc00“.

Избор на цвят от палитрата на специална програма или заснемането му от екрана

Както писах малко по-горе, цветовата схема RGB (червено, зелено, синьо) е широко използвана. За всеки от трите основни цвята са предвидени 256 градации - от 0 до 255 (ако преведем тези стойности в шестнадесетична бройна система, получаваме - от 00 до FF).

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

За това можете да използвате специална програма, което ви позволява да изберете желания нюанс от палитрата (или заснемете го от екранаинструмент за пипета) и незабавно вземете неговия код. Може да нямате програма, но отидете на Yandex и въведете името на всеки цвят в низа на заявката (писах за това малко по-горе).

Ето списък с програми, които ви позволяват да реализирате напълно всичко това:

Късмет! Ще се видим скоро на сайта на страниците на блога

Може да се интересувате

Списъци в Html код - UL, OL, LI и DL тагове
Как да поставите HTML връзкаи картинка (снимка) - IMG и A тагове
Как да създадете хипервръзка (A, Href, Target blank), как да я отворите в нов прозорец на сайта и също така да направите изображение връзка в Html код
Шрифтът (лице, размер и цвят), Blockquote и Pre етикетите са наследено форматиране на текст в чист HTML (без Използване на CSS)
Таблици в Html - тагове Table, Tr и Td, както и Colspan, Cellpadding, Cellspacing и Rowspan за създаването им
Html формиза сайта - тагове Form, Input and Select, Option, Textarea, Label и други за създаване на елементи на уеб форма Select, Option, Textarea, Label, Fieldset, Legend - Html тагове на формуляра с падащ списък и текстово поле
img- html тагза вмъкване на изображение (Src), подравняване и обвиване с текст (align), както и задаване на фон (background)
Директиви за коментари и Doctype в Html код, както и концепцията за блокови и вградени елементи (тагове)
Какво е Html Hypertext Markup Language и как да изброите всички тагове в W3C валидатора
Знаци за празни интервали и тяхното форматиране на код в Html, както и специални знаци за интервал без прекъсване и други мнемоники

Когато създаваха Yandex, разработчиците се увериха, че е лесен и разбираем за използване.

Няма нищо излишно в настройките на дизайна и шрифта, така че потребителите могат бързо да разберат какво е какво.

Всяка версия на браузъра Yandex е проектирана красиво, най-добрите специалисти се занимават с дизайн. Но има някои потребители, които не обичат монотонността. Дори най-много красива гледкате бързо ще се отегчат, ще искат да „променят ситуацията“, „да вдъхнат живот“ на работата с уеб браузър.

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

За да се промени нещо външен видна вашия браузър Yandex, трябва само да се разсеете за няколко минути:

• Включете вашия уеб браузър.
• отворен нов прозорец(можете да направите това в настройките до лентата с отметки).
• Експресният панел ще се появи пред вас. Трябва да слезете в долната част на екрана и да кликнете върху иконата "Промяна на фона".
• След това ще се отвори списък с различни дизайни на браузъри, сред които трябва да изберете този, който ви харесва най-много. След като изберете подходящото изображение, щракнете върху бутона "Край".

Не е нужно да се притеснявате да променяте фона всеки път - не е нужно. Сега всеки път, когато влезете в "Express Panel" (дори ако сте затворили и отворили отново Yandex), ще се насладите на приятна картина. И работата с високо настроение е много по-интересна и по-лесна!

Възможно ли е да зададете нещо „ваше“ на фона?

Разбира се, разработчиците на Yandex не могат да задоволят всеки потребител с предлаганите изображения за промяна на фона. След като прегледате пълния списък с налични чертежи и не намерите нищо подходящо, не се отчайвайте.

Такива случаи са предоставени от създателите на Yandex Browser: можете да изтеглите лични снимки, налични на вашия компютър. Дава пълен отдушник на фантазията. Какво, например, би било хубаво, ако всеки път, когато влезете в "Експресния панел", виждате ярък фрагмент от живота си или снимка на малко дете?

За да зададете картина от вашето устройство като фон, трябва:

• активирайте Yandex;
• отваряне на нов подпрозорец;
• намерете функцията "Промяна на фона" и кликнете върху нея;
• зад последното изображение има знак „+“, трябва да кликнете върху него;
• изберете снимката, която искате да видите в браузъра, и натиснете enter (Enter).

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

www.livemaster.ru

Кодове и таблица на основните RGB цветове

Съвсем логично е в езика за маркиране на хипертекст и каскадните стилови таблици да има възможност за оцветяване на документи, защото в противен случай сайтовете биха били много скучни и еднотипни. За това обикновено се използва модел, наречен RGB (съкращение, получено от три английски думи за червено, зелено и синьо).

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

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

Нека сега се опитаме да разберем как да настроим яркостта във всеки канал и колко възможности имаме за това?

Всъщност там два основни начина:

1. настройка чрез записване на яркостта за всеки от каналите (червен, зелен и син) в шестнадесетичен запис
2. задача, като въведете името на цвета в кода на уеб документа

Нека започнем със сложното и се опитаме да разберем как да напишем цветовете в шестнадесетичен код. Ако искаме например да запишем кода за бялото в десетичната система, тогава ще получим кода 256 256 256, а за черното - 0 0 0. Тук вероятно всичко е ясно.

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

Тези. Има две шестнадесетични цифри за всеки RGB цветови канал в CSS кода, така че записите на стойността на цвета се състоят от шест цифри (или букви, които се равняват на шестнадесетични числа), предшествани от знак за паунд "#". Всичко е доста просто.

Например в таблицата по-горе за най-простите нюанси техните шестнадесетични записи ще изглеждат така:

Естествено, не сте длъжни да измисляте и сравнявате шестнадесетични кодове на нюанси с тези, които искате да видите във вашия интернет проект. Можете да изберете цвят за сайта във всеки графичен редактор (дори в безплатния онлайн редактор на Pixlr), където определено ще ви бъде показан запис на този нюанс в RGB формат или намерете Html цветова таблица и копирайте кода, от който се нуждаете там.

Yandex Colors - избор на RGB цветови палитри в резултатите от търсенето на Yandex

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

Ако това не ви подхожда, просто отворете Yandex и въведете в полето за търсене заявка с името на този нюанс, който ви интересува (въпреки че можете просто да въведете: сиво-кафяво червено).

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

Всичко това се реализира благодарение на така наречения „магьосник“ на Yandex, който е предназначен да помогне на дизайнерите и дизайнерите на оформление.

Можеш задайте цвят в реда за търсене на Yandex, както под формата на името му, така и под формата на код - в резултат ще видите как ще изглежда на екрана и, ако е необходимо, можете да получите неговия шестнадесетичен запис.

Всъщност този инструмент може да бъде полезен и за обикновените интернет потребители, например, за да разберат как ще изглеждат мебелите в сиво-бур-малинов цвят. Можете също да гледате видеоклип за използването на този съветник на Yandex:

Някои цветове в езика за маркиране на хипертекст може да се уточни с думи, например "черно" означава черно, "бяло" означава бяло и т.н. Но има едно предупреждение. Следователно задачата за цвят е възможна само за ограничен брой от тях.

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

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

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

Следователно, в допълнение към таблицата с 16 основни нюанса, дадена точно по-горе, всички други цветове трябва да бъдат посочени в кода на уеб документите само с шестнадесетична нотация, за да се избегнат ненужни ексцесии.

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

В момента целият външен дизайн на уеб страниците е на милостта на CSS (каскадни стилови таблици) и определянето на цветовия код директно в Html е изключително рядко, но все още се среща. Освен това има ситуации, когато е невъзможно по една или друга причина да се използват външни таблици със стилове на CSS (например в случай на създаване на версия пощенски списъкАбонирай се).

Затова все пак ще дам пример за настройка на цветове в Html, въпреки че в този случай те вече ще се използват тагове, които не се препоръчват от W3C валидатора. Например, преди цвета на фона се задаваше в тага "BODY" чрез атрибута "bgcolor", а текстът се оцветяваше веднага на цялата уеб страница чрез атрибута "text".

Задаването на желаните нюанси в този случай може да изглежда например така:

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

В резултат на това ще получите уеб страница с бежов фон и тъмносин шрифт. Преди CSS да влезе в употреба, за промяна на цвета на шрифта на всяка отделна част от текста, етикетът „FONT“, който вече не се препоръчва от валидатора на W3C, беше често използван, който включваше атрибута „color“ със същото име за задайте цвета:

част от текста, която трябваше да бъде оцветена в синьо

За да видите резултата от написания код на екрана, трябва да запазите този файл с разширение html и след това да го отворите във всеки удобен за вас браузър.

Сега, за да се счита оформлението на вашия сайт за валидно, е препоръчително задаване на цветове на елементи в каскаден лист със стиловечрез съответните правила и свойства. Правилата за такова вмъкване в CSS не се различават от описаните по-горе.

Както можете да видите, понякога не се използват шест знака за съкращаване на записа на нюанса, а само три, ако съвпадат за всеки канал - „# 6c0“ вместо „# 66cc00“.

ktonanovenkogo.ru

RGB цветова палитра, как правилно да зададете цветове в CSS и Html.

Както знаете, за решаване на проблеми с цветовия дизайн на текста се използва общоприетата конструкция. RGB(това е, червен- Червен, Зелено- Зелено, и съответно Син- Син)

Цветова палитра RGBпредполага използването само на три цвята, всеки от които може да бъде представен с различно ниво на яркост. В CSS и Html кода за всеки цвят от палитрата може да се дефинира една от 256 възможни цветови градации.

По този начин, за да проектирате документ, можете да приложите доста голям брой цветове - 256-256-256. Например, за да получите черно в резултат и на трите цвята RGBнеобходимо е да настроите индикатора за яркост на нула и обратно, ако се изисква бял цвят, тогава, съответно, за всички цветове е необходимо да зададете максимална яркост.

Нека разгледаме по-отблизо как да зададем яркостта на цвят в Html. Има два начина за регулиране на яркостта:

1. Чрез задаване на цветовия код на палитрата за страницата в Html кода, чрез определяне на яркостта RGB цветовеизползвайки шестнадесетичната система
2. Чрез задаване на цветове в CSS в шестнадесетична бройна система.

Нека се занимаваме с писането на код в шестнадесетичната система и маркирането на хипертекст. Като начало, нека си припомним десетична системасмятане - например, ако имаме нужда от бял цвят, тогава неговият код ще изглежда така: 256 256 256, в случай на черен: 0 0 0.

За разлика от десетичен код, където има само числа, шестнадесетичната палитра съдържа и букви от латинската азбука. Тоест, в този случай, собствената си специфична система за представяне на числа намира своето място. Например бялото е указано в HTML като: #ffffff и черното като #000000. Лесно се вижда, че тук 00 съответства на 0, а ff съответства на 256 (когато се преобразува в десетична).

По този начин цветовата палитра RGB на Html, CSS е разделена на канали, на всеки от които са присвоени два шестнадесетични знака. Ето защо всички цветове в Html кода са изградени от шест букви (еквивалентни на числа) и самите числа. Трябва да се отбележи, че символът "#" се поставя преди кода.

Разбира се, няма нужда от ръчен избор на цветовия код - просто трябва да стартирате произволен графичен редактор, да намерите правилния цвят и да видите цветовия код в подробната информация. RGB система. Има и друг, по-прост вариант - палитра Html цветовес кодове. Намерете и го копирайте на себе си.

Yandex Colors - избор на Html цветовия код в RGB палитрата в резултатите на Yandex.

Освен всичко друго, можете да изберете цветова схема за вашия сайт с помощта на Yandex. За да направите това, просто въведете думата "цвят" или името на цвета, от който се нуждаете в полето за търсене. В резултат на заявката палитрата ще бъде показана в изхода Яндекс.Цветове.с който можете да изберете цвета. В десния ъгъл можете да видите цветовия код в RGB и шестнадесетичната система, която се използва при изграждане на уеб документ.

Тази опция от Yandex значително улеснява работния процес. Всичко е много просто - въведете името на цвета и вземете необходимия код.

Трябва да се отбележи, че някои от цветовете в хипертекстовото маркиране могат да бъдат доста зададени с дума, например: "сив" - сив, "бял" - бял, "черен" - черен и т.н. Разбира се, задаване на цвят в Html по този начин е възможно само за не много голямо разнообразие от цветове. Всъщност 16 милиона RGB цвята с помощта на думи не могат да бъдат намерени в нито един справочник или таблица.

W3C 4.01 Validator (Hypertext Markup) предоставя палитра от 16 основни нюанса, които изграждат CSS и Html цветова таблица, за да покажат кои цветове могат да бъдат определени с думи.

Останалите цветове трябва да бъдат посочени с помощта на шестнадесетичен код.

Името на цветовете на RGB палитрата в уеб страниците, както и замяната на цвета на самия текст чрез цветовия атрибут, примери и методи за използване на цветови кодове в CSS и Html.

Сега, външен дизайнСтраниците са стилизирани с помощта на CSS (каскадни стилови таблици), но въпреки това е доста често срещано явление, когато цветът е посочен в HTML.

Следователно по-долу е даден пример за определяне на цветове в HTML.

страница от вашия уебсайт

Крайният резултат е страница с пурпурен шрифт на златист фон.

Преди това в CSS, за да се укаже цветът на текста в една секция, беше необходимо да се напише етикетът FONT (не се препоръчва от W3C), а за да се зададе цвета, атрибутът „цвят“ беше включен в него:

текстът да бъде оцветен в червено

За да оцветите някой текстов елемент в цвета, който ви е необходим, трябва да напишете HTML код с помощта на тага „FONT“, който ще изглежда така:

Текстът, чийто цвят на шрифта искате да замените

В момента, за да получите валидно оформление на сайта, препоръчвам да използвате CSS при настройка на цветовия код. Като цяло правилата за вмъкване на цветови кодове в CSS не се различават от тези, обсъдени по-горе.

www.bestseoblog.ru

Нов алгоритъм за избор на цветове за промоционални карти на приложения в Yandex Launcher.

Различни услуги на Yandex работят с цвят за решаване на интерфейсни задачи: подчертаване на информационни блокове и отговори на обекти, управление на вниманието и създаване на визуална йерархия.

Примери за използване на алгоритми за съвпадение на цветовете в търсене и Yandex.Music

В зависимост от задачата съпоставянето на цветовете може да изисква сложни изчисления. Но се случва, че получаването на желания резултат е много по-лесно.

Имаме промоционални карти за приложения в Yandex Launcher: рейтинг, описание и бутон „Инсталиране“. Това са контекстуални препоръки - те се отварят в горната част на списъка с приложения или в папка на работния плот.

Първоначално изпълнение

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

• неправилно определяне на цвета;
• "мръсни" цветове поради осредняване;
• тъпи копчета, скучни карти.

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

Какво наистина искаше

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

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

В събота изтупах праха от редактора на кодове, разкрих HTML5 и Canvas и започнах да изобретявам. В понеделник той дойде в отбора с оферта.

Нов алгоритъм за откриване на цветовете

Етап 1.Взимаме иконата. Изхвърляме бели, черни и прозрачни пиксели.

Икона на източник → Квадрат от филтрирани пиксели

Стъпка 2Намаляваме полученото изображение до размер 2 × 2 пиксела (с деактивирано анти-алиасинг). В резултат на това получаваме четири цвята на иконата. Ако оригиналната картина е хомогенна, те могат да се повторят - това е добре.

Резултат след втората стъпка. Икона на източник → Цветове

Деактивирахме изглаждането, така че цветовете да не се смесват, да не стават „мръсни“.

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

Стъпка 3Почти всичко е готово. Остава съвсем малко: получаваме получените цветове, превеждаме в HSL, сортираме по лекота (L). Рисуваме картичката.

Светлинна схема:

• фон - най-светлият цвят;
• бутон - най-близо до светлина;
• текстът е най-тъмен.

Тъмна схема (ако два или повече цвята са тъмни):

• фонът е най-много тъмен цвят;
• бутон - най-близо до тъмно;
• текстът е най-лек.

Прилагайки цветове, проверете контраста: Разлика в светлотата между фона и бутона ≥ 20; между фон и текст ≥ 60. Ако не съвпада, коригираме го.

Получени карти. Икона на източник → Цветове → Карта

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

Резултат

Получихме цветни карти, от реалните цветове на иконата, без “мръсни” примеси. Благодарение на използването на няколко цвята, картата изглежда много по-оживена. Особено приятно е, че с еднакъв фон на иконата, картата става нейно пряко продължение: границата между тях изобщо не се забелязва.

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

• икона от един цвят - направете фона малко по-тъмен, така че да не се слива;
• икона с фон - погледнете пикселите около краищата; ако всички са еднакви, задайте същия фон на картата.

Модифицираният алгоритъм е включен в следващото издание. Специални благодарности на Дима Овчаров, ръководител на екипа за разработка на Yandex Launcher, за неговия интерес, желание и търпение. И накрая, още примери.