Définition automatique de la couleur - l'expérience de l'équipe Yandex. Comment changer la couleur du navigateur YANDEX est qu'il est possible d'installer quelque chose de "votre" fond

Pour le moment, afin d'obtenir une disposition valide du site, je recommande d'utiliser CSS lors de la spécification du code de couleur. De plus, les règles d'insertion des codes de couleur dans CSS ne diffèrent pas de celles discutées ci-dessus.

www.bestseoblog.ru.

Bonjour, chère blog lecteurs site web. Je continue à publier des articles sous la rubrique "". Aujourd'hui, je veux parler de couleurs dans le code HTML et CSS, clarifiez pour ceux qui ne savent pas comment vous pouvez leur demander comment ils sont formés, comment rechercher ou capturer l'utilisation de la couleur souhaitée spécialement conçue pour ce programme et bien plus encore.

La question du travail de la nuance souhaitée peut être particulièrement pertinente pour les webmasters débutants, lorsque leurs codes ne sont pas complètement clairs dans le document Web (par exemple, # F3AF6C) et ce n'est pas clair comment et où il est possible de prendre cette information (Où trouver des tables HTML et CSS) et comment les utiliser pour concevoir un texte ou tout autre bloc de documents Web.

Permettez-moi de vous rappeler que nous avons déjà réussi à se familiariser avec les principes fondamentaux utilisés dans. Nous avons également examiné les balises et appris, appris beaucoup et comment.

Codes et table de base couleurs RVB

Il est tout à fait logique que dans la langue du marquage hypertexte et des tables de styles en cascade, il y a la possibilité de la paperasserie couleur, car sinon, les sites seraient très ennuyeux et le même type. Pour cela, un modèle appelé RVB est généralement utilisé (abréviation formée à partir de trois mots anglais dénotant rouge, vert et bleu).

Dans le modèle RVB Seules trois couleurs sont utilisées (il est clair qu'il est rouge, vert et bleu), chacun d'eux peut être représenté avec un niveau de luminosité différent de la lueur. Pour chacun des canaux (rouge, vert et bleu), l'une des 256 gradations de luminosité possibles seront sélectionnées. Le nombre 256 est pris pour la raison pour laquelle de nombreuses valeurs de nuances peuvent être codées dans une seule information.

En conséquence, pour votre document Web, nous pouvons choisir n'importe quelle nuance d'une énorme quantité de possible (256 * 256 * 256). Par exemple, pour obtenir une couleur noire, il est nécessaire que les trois canaux de la schéma de couleurs aient une valeur de luminosité zéro et pour obtenir des couleurs blanches-rouge, vert et bleue devraient avoir une luminosité maximale.

Essayons maintenant de déterminer comment définir la luminosité dans chaque canal et combien avons-nous pour cette opportunité?

En fait, il y a deux façons de base:

1. tâche utilisant l'enregistrement de la luminosité pour chacun des canaux (rouge, vert et bleu) dans un système numérique hexadécimal
2. tâche à l'aide de l'entrée du nom de couleur dans le code de document Web

Commençons par stimuler et essayer de traiter l'enregistrement des couleurs du code hexadécimal. Si nous voulions, par exemple, écrivez le code blanc dans le système décimal, vous obtiendrez le code 256 256 256 et pour le noir - 0 0 0. Ici, tout est clair.

Mais dans un système de nombres hexadécimaux, en plus des chiffres arabes, les six premières lettres de l'alphabet latin sont également utilisées et il existe sa propre spécificité de la formation de nombres. Pour approfondir, je pense que cela ne vaut pas la peine, mais par exemple, je dirai que le blanc pour HTML peut être réglé: #ffffff et noir alors: # 000000. Ceux. 00 correspond à 0 dans un système de nombres décimaux et FF correspond à 256.

Ceux. Sur chaque couleurs de canal RVB dans le code CSS, deux nombres hexadécimaux sont donnés, par conséquent, les enregistrements des valeurs de couleur sont constitués de six chiffres (ou de lettres égales à des nombres dans un système hexadécimal), qui est défini sur le réseau "#". signe. Tout est assez simple.

Par exemple, dans le tableau des nuances les plus simples, leurs archives hexadécimales ressembleront à ceci:

Naturellement, vous n'êtes pas obligé d'inventer et de comparer des codes de nuances hexadécimales avec ceux que vous souhaitez voir sur votre projet Internet. Vous pouvez sélectionner une couleur pour le site dans n'importe quel éditeur graphique (même dans), où vous montrerez certainement cette nuance dans le format RVB ou trouver le tableau des couleurs HTML et copier le code dont vous avez besoin de là.

Yandex Colors - Sélection Palette RVB Shades dans l'émission de Yandex

Vous ne voulez pas utiliser un éditeur graphique à cet effet ou recherchez une table avec des codes? Pas de problème. Faites défiler une baisse dans cette page et vous trouverez beaucoup de spécificité et affûtée de fonctionner avec la couleur dans le code du programme HTML ou CSS.

Si cela ne l'adapte pas, ouvrez-le simplement et entrez dans la chaîne de recherche. demande avec le nom de cette nuanceque vous êtes intéressé (bien qu'il soit possible d'entrer simplement: Séoburomaline).

En conséquence, au maximum des résultats de la recherche, vous verrez une table de table très pratique de Yandex.Le tuteur pour sélectionner la couleur de votre site. Dans le coin inférieur droit de cette palette, vous pouvez copier le code hexadécimal de l'ombre dont vous avez besoin (il y a une grille avant de cela), qui ne restera alors que d'insérer dans la place souhaitée de votre document Web.

Tout cela est mis en œuvre grâce à la soi-disant, qui est conçue pour aider les cameramen et les concepteurs.

Vous pouvez définir la couleur dans la barre de recherche YandexComme sous la forme de son nom et sous forme de code, vous verrez en conséquence comment il envahira l'écran et si nécessaire, vous pouvez l'obtenir hexadécimal.

En fait, cet outil peut être utile et des utilisateurs ordinaires d'Internet, par exemple, afin de mieux ressembler à une nuance de meuble de Ser-Bu-Malin-B-Krapinka. Vous pouvez voir la même vidéo sur l'utilisation de ce sorcier Yandex:

Quelques couleurs dans la langue du marquage hypertexte peut être défini en utilisant des motsPar exemple, "noir" signifie noir, "blanc" - blanc, etc. Mais il y a une nuance. La tâche du Colora est donc éventuellement pour un nombre limité.

Eh bien, d'abord, probablement, il est clair que toutes les 16 millions de nuances possibles dans le RVB ne pourront pas imaginer dans aucune table (vous remarquerez de la faire défiler).

Deuxièmement, dans le validateur W3C pour la spécification du langage de marquage hypertexte 4.01 (il prend en charge entièrement tous les navigateurs possibles à l'heure actuelle), seules 16 couleurs sont définies, qui dans le code HTML ou CSS peut être spécifiée par les mots:

Vous pouvez rencontrer des tables de nuances plus détaillées pouvant être définies dans le code avec des mots, mais il est possible que, dans un navigateur, cette couleur ne soit pas affichée correctement.

Par conséquent, en plus des nuances de base, toutes les autres couleurs sont données, toutes les autres couleurs doivent être spécifiées dans le code de code Web uniquement avec un enregistrement hexadécimal, afin d'éviter toute personne qui n'a pas besoin des excès nécessaires.

Utilisez le code et les noms de couleur dans webmastering

Pour le moment, toute la conception externe des pages Web est donnée au dépôt de CSS (styles en cascade) et les instructions du code de couleur directement dans HTML se réunissent extrêmement rarement, mais rencontre toujours. De plus, il est impossible d'utiliser des styles de CSS externes (par exemple, en cas de libération) pour une seule raison ou une autre.

Par conséquent, je vais toujours donner un exemple de tâche de couleur dans HTML, bien qu'il soit déjà utilisé non recommandé par les tags de validateur W3C. Par exemple, avant l'arrière-plan, la couleur de l'arrière-plan a été définie dans l'étiquette "Corps" via l'attribut "BGCOLOR" et le texte a été peint immédiatement sur l'ensemble de la bande Web à l'aide de l'attribut "Texte".

La tâche des nuances nécessaires dans ce cas pourrait ressembler, par exemple:

Document de contenu

En conséquence, vous recevrez un mémoire Web avec un fond beige et une police bleu foncé. Avant que CSS entrait la source, modifier la couleur de la police d'un texte séparé du texte, la "police" déjà non recommandée par le validateur W3C est utilisée partout, dans laquelle l'attribut de couleur de l'attribut couleur a été inclus pour le Colora. tâche:

le texte du texte que vous devez peindre dans la couleur bleue

Afin de voir le résultat du code écrit à l'écran, vous devez enregistrer ce fichier avec l'extension HTML, puis l'ouvrir dans n'importe quel navigateur pratique pour vous.

Maintenant, pour que la disposition de votre site soit valide, recommandée placez les couleurs des éléments dans une table de styles en cascade À travers les règles et les propriétés pertinentes. Les règles d'un tel insert dans CSS ne sont pas différentes de celles décrites ci-dessus.

Comme vous pouvez le constater, parfois pas six caractères utilisent pour réduire l'enregistrement de l'ombre, mais seulement trois, s'ils correspondent à chaque canal - "# 6C0" au lieu de "# 66SS00".

Sélectionnez la couleur dans une palette de programmes spéciale ou capturer à partir de l'écran

Comme je l'ai déjà écrit un peu plus haut, RVB (rouge, vert, bleu) est utilisé partout. Pour chacune des trois couleurs principales, 256 gradations sont fournies - de 0 à 255 (si vous traduisez ces valeurs en un système numérique hexadécimal, puis obtenez - à partir de 00 à FF).

Parce que Nous avons trois couleurs principales, de la combinaison de laquelle toutes les autres nuances sont formées, alors l'enregistrement hexadécimal aura quelque chose comme ceci: 99FF66 (nuance de vert). En ajoutant le code # 99FF66 avant lui, qui peuvent être utilisés à la fois en HTML et dans des fichiers de style. Il va sans dire que vous ne devriez pas calculer et vous souvenir de tous ces Abrunkandabra.

Pour ce faire, vous pouvez utiliser un programme spécial qui vous permet de sélectionner l'ombre souhaitée sur la palette (ou capturer de l'écran Type d'outil de pipette) et obtenez immédiatement son code. Vous ne pouvez pas avoir de programmes, mais allez à Yandex et composez le nom de toutes les couleurs de la ligne de requête (j'ai écrit un peu plus loin à ce sujet).

Voici une liste de programmes permettant à tout cela de mettre en œuvre pleinement:

Bonne chance à toi! À des réunions ambiguës sur le site Web des pages de blog

Vous pouvez être intéressé

Listes de code HTML - UL, OL, LI et DL Tags
Comment insérer dans le lien HTML et l'image (photo) - IMG et une balise
Comment créer un lien hypertexte (A, HREF, Cible Blank), comment l'ouvrir dans une nouvelle fenêtre sur le site, ainsi que créer un lien d'image dans le code HTML
Tags de police (visage, taille et couleur), formatage de texte de blocs et pré-dépassés dans PURE HTML (sans utiliser CSS)
Tables dans HTML - Tags Tableaux, TR et TD, ainsi que Colspan, Cellpadding, CellsCaçage et Rowspan pour les créer
Formulaires HTML pour le site - Formulaire de balises, entrées et sélectionner, option, textarea, étiquette et autres pour créer des éléments de signalisation Web Sélectionnez, option, textarea, étiquette, champique, légende - Tags HTML Formes de liste déroulante et champ de texte
IMG - Tag HTML pour insérer des images (SRC), alignement et la rationaliser avec du texte (alignement), ainsi que des tâches d'arrière-plan (arrière-plan)
Commentaires et directives DOCTYPE dans le code HTML, ainsi que le concept de bloc et d'éléments minuscules (balises)
Quelle est la langue de balisage HTML HyperText et comment voir la liste de toutes les balises dans le validateur W3C
Symboles aveugles et code de formatage en HTML, ainsi que des espaces de balayage spéciaux et autres mnémoniques

En créant Yandex, les développeurs se souciaient d'être facile et compris.

Dans les réglages de la conception et de la police, il n'y a rien de superflu, afin que les utilisateurs comprennent rapidement quoi.

Chaque version du navigateur YANDEX est réalisée magnifiquement, les meilleurs spécialistes sont engagés dans la conception. Mais il y a de tels utilisateurs qui n'aiment pas la monotonie. Même la plus belle vue sera rapidement ennuyée, elle voudra "changer la situation", "respirer la vie" pour travailler avec un navigateur Web.

Il n'y a rien de mal à cela, sinon, pourquoi les développeurs ont-ils apporté la fonction de changement d'interface? À tous ceux qui n'aiment pas les antécédents fixés par la monotonance standard ou ennuyé, pourraient changer l'apparence de son application.

Pour modifier l'apparence de votre navigateur Yandex, vous n'aurez besoin que d'être distraits pendant quelques minutes:

• Allumez le navigateur Web.
• Ouvrez un nouvel onglet (vous pouvez le faire dans les paramètres en regard du panneau Signets).
• Le panneau Express apparaîtra devant vous. Vous devez tomber au bas de l'écran et cliquer sur l'icône "Modifier fond".
• Ensuite, la liste avec les types les plus différents de la conception du navigateur s'ouvrira, parmi lesquelles vous devez choisir le plus que vous aimez. En sélectionnant un dessin approprié, cliquez sur le bouton "Terminer".

Vous ne pouvez pas vous soucier de ce que vous devez changer de fond à chaque fois - ceci n'est pas requis. Maintenant, chaque fois que vous arrivez au "panneau Express" (même si vous avez fermé et ouvert Yandex), vous apprécierez une image agréable. Et travailler avec l'humeur surélevée est beaucoup plus intéressant et plus facile!

Est-il possible d'installer quelque chose de «votre» »?

Pour chaque utilisateur proposé de changer les images de fond des développeurs Yandex, bien sûr, ne peut pas. Après avoir examiné la liste complète des dessins disponibles et ne pas trouver quoi que ce soit approprié, ne désespérez pas.

Ces cas sont fournis par les créateurs du navigateur Yandex: vous pouvez télécharger des images personnelles disponibles sur votre ordinateur. Cela donne la volonté complète de la fantaisie. Quoi, par exemple, ce sera bien, si à chaque fois, entrer dans un "panneau express", verrez-vous un fragment brillant de votre vie ou une photo d'un petit enfant?

Afin de définir une image sur l'arrière-plan de votre appareil, vous avez besoin de:

• allumez Yandex;
• ouvrir un nouveau terrain;
• trouvez la fonction "Changer fond" et cliquez dessus;
• derrière la dernière image, une icône "+", vous devez appuyer sur elle;
• sélectionnez la photo que vous souhaitez voir dans le navigateur et appuyez sur Entrée (Entrée).

Vous pouvez maintenant définir une image absolument une image enregistrée jusqu'à la prochaine modification.

Nouvel algorithme de sélection des couleurs pour applications d'application promotionnelles dans le lanceur de Yandex.

Divers services Yandex fonctionnent avec la couleur pour résoudre des tâches d'interface: allocation des blocs d'information et des réponses d'objet, une gestion de l'attention et la création d'une hiérarchie visuelle.

Exemples d'utilisation d'algorithmes de sélection des couleurs dans la recherche et en yandex.music

Selon les tâches, la sélection de la couleur peut nécessiter une informatique complexe. Mais il arrive que l'obtention du résultat nécessaire est beaucoup plus facile.

Dans notre lanceur Yandex, il existe des applications d'application promotionnelles: le bouton de la notation, la description et le bouton "Installer". Ce sont des recommandations contextuelles - elles s'ouvrent sur la liste des applications ou dans le dossier sur le bureau.

Mise en œuvre initiale

La couleur de l'arrière-plan d'arrière-plan a été choisie automatiquement sur la base de l'icône, le bouton était blanc translucide. L'algorithme a tenté de déterminer la couleur de base des icônes, désassemblé de pixels dans une tonalité de couleur. Une telle approche n'a pas toujours donné un beau résultat, il avait des inconvénients:

• définition inappropriée de la couleur;
• Couleurs "sales" en raison de la moyenne de la moyenne;
• boutons ternes, cartes ennuyeuses.

Exemples de cartes problématiques

Qu'est-ce qui voulait vraiment

La carte devait devenir une continuation actuelle de l'icône et les couleurs sont juteuses et lumineuses. Je voulais créer un sentiment que la carte était soigneusement faite à la main et ne glisse pas quelque chose de généré automatiquement automatiquement.

Je veux toujours tout faire, mais les ressources ne sont pas sans limites. Allouer l'équipe à écrire les bibliothèques miracles par définition des couleurs n'était pas prévue. La tâche est donc la tâche des forces minimales pour améliorer l'algorithme de définition de couleur, proposer comment peindre la carte est belle, ne pas inventer le vaisseau spatial.

Samedi, j'ai sauté la poussière de l'éditeur de code, le HTML5 et la toile ont découvert et ont commencé à inventer. Lundi est venu à l'équipe avec une proposition.

Nouvel algorithme de définition de fleurs

Étape 1. Nous prenons l'icône. Jeter des pixels blancs, noirs et transparents.

Icône de source → carré des pixels filtrés

Étape 2. Nous réduisons l'image résultante à 2 × 2 pixels (avec antitaidité désactivée). En conséquence, nous obtenons quatre icônes de quatre couleurs. Si l'image originale est homogène, elles peuvent répéter - rien de terrible.

Résultat après la deuxième étape. Icône de source → Couleurs

Il est désactivé par anti-aliasing de sorte que les couleurs ne soient pas mélangées, ne sont pas devenues sales.

En fait, il s'avère comme ceci: le carré est divisé en quatre parties, nous prenons le pixel moyen de la rangée supérieure de chaque trimestre. Dans les implémentations, tout est simple: nous n'avons même pas besoin d'images réelles de la contre-échantillonnage et de travail général avec des graphiques. Les pixels avec la position souhaitée prennent d'un tableau unidimensionnel, qui a reçu après la première étape.

Étape 3. Presque tout est prêt. Il reste très légèrement: nous obtenons les couleurs résultantes, nous traduisons en HSL, nous trions le long de la lumière (L). Carte de mots-clés.

Schéma de lumière:

• fond - la couleur la plus brillante;
• bouton - le plus proche de la lumière;
• le texte est le plus sombre.

Schéma sombre (si deux couleurs sombres et plus sombres):

• le fond est la couleur la plus sombre;
• le bouton est le plus proche du noir;
• le texte est le plus brillant.

Appliquer des couleurs, vérifiez le contraste: la différence de légèreté entre l'arrière-plan et le bouton ≥ 20; Entre l'arrière-plan et le texte ≥ 60. S'il ne correspond pas, ajustez.

Cartes reçues. Icône de source → Couleurs → Carte

Et quelques autres cartes par exemple:

Résultat

Nous avions des cartes colorées, des icônes de couleurs réelles, sans «sale» impuretés. En utilisant plusieurs couleurs, la carte semble beaucoup plus probable. Il est particulièrement agréable qu'avec un fond homogène de l'icône, la carte devient sa continuation directe: la frontière entre eux n'est pas du tout perceptible.

Et surtout: deux jours après l'offre du nouvel algorithme, la première mise en œuvre était déjà disponible dans l'assemblage de Dev. Testé à l'intérieur de la commande, configuré les seuils du filtre dans la première étape, prévoyant des cas spéciaux:

• icône d'une couleur - nous faisons le fond juste plus sombre, afin de ne pas fusionner;
• icône avec fond - nous regardons les pixels sur les bords; Si tous les mêmes, nous mettons la même carte de carte.

L'algorithme modifié est entré dans la version la plus proche. Spécial grâce à la tête du groupe de développement du lanceur Yandex DIME DIME Ovcharov - pour l'intérêt, le désir et la patience. Enfin, plus d'exemples.