#codes hexadécimaux

[seodigitalmarketing-blog]

Application mobile: Créer un projet d'application mobile Vaadin dans Eclipse

Application mobile: Créer un projet d’application mobile Vaadin dans Eclipse

[animateddreams-blog]

Appliquer la couleur sur Html

L'utilisation de la couleur est une forme fondamentale de l'expression humaine. Les enfants expérimentent la couleur avant même d'avoir la dextérité manuelle à dessiner. C'est peut-être pour cette raison que la couleur est l'une des premières choses que les gens veulent souvent expérimenter lorsqu'ils apprennent à développer des sites Web. Avec CSS , il existe de nombreuses façons d'ajouter de la couleur à vos éléments HTML pour créer l'apparence souhaitée. Cet article est un guide introduisant chacune des manières dont la couleur CSS peut être utilisée en HTML.

Heureusement, ajouter de la couleur à votre code HTML est en réalité très facile à faire et vous pouvez ajouter de la couleur à presque n'importe quoi.

Nous allons aborder l'essentiel de ce que vous devez savoir lors de l'utilisation de la couleur, y compris une liste de ce que vous pouvez colorer et des propriétés CSS impliquées , comment vous décrivez les couleurs et comment utiliser les couleurs à la fois dans les feuilles de style et dans les scripts . Nous verrons également comment laisser l'utilisateur choisir une couleur .

Nous terminerons ensuite par une brève discussion sur l’ utilisation judicieuse des couleurs : comment sélectionner les couleurs appropriées, en tenant compte des besoins des personnes aux capacités visuelles différentes.

Choses qui peuvent avoir de la couleur Au niveau des éléments, la couleur peut être appliquée à tous les éléments HTML. À la place, examinons le type d'éléments dessinés dans les éléments, tels que le texte, les bordures, etc. Pour chacune d'elles, nous verrons une liste des propriétés CSS qui leur appliquent une couleur.

Au niveau fondamental, la colorpropriété définit la couleur de premier plan du contenu d'un élément HTML et la background-colorpropriété définit la couleur d'arrière-plan de l'élément. Ceux-ci peuvent être utilisés sur à peu près n'importe quel élément.

Texte

Chaque fois qu'un élément est rendu, ces propriétés sont utilisées pour déterminer la couleur du texte, son arrière-plan et les décorations éventuelles du texte.

color

Couleur à utiliser pour dessiner le texte et toutes les décorations de texte (telles que l'ajout de traits superposés ou superposés, de lignes de repère, etc.). background-color La couleur de fond du texte. text-shadow Configure un effet d'ombre à appliquer au texte. Parmi les options pour l'ombre, il y a la couleur de base de l'ombre (qui est ensuite floue et mélangée avec l'arrière-plan en fonction des autres paramètres). Reportez-vous à la rubrique Ombre portée de texte dans Texte fondamental et style de police pour en savoir plus.

text-decoration-color

Par défaut, les décorations de texte (soulignements, barrés, etc.) utilisent la colorpropriété comme couleurs. Toutefois, vous pouvez remplacer ce comportement et utiliser une couleur différente pour eux avec la text-decoration-colorpropriété.

text-emphasis-color

Couleur à utiliser pour dessiner des symboles de soulignement adjacents à chaque caractère du texte. Ceci est principalement utilisé pour dessiner du texte pour les langues est-asiatiques.

caret-color

La couleur à utiliser lors de l' élaboration du caret (parfois dénommé le curseur de saisie de texte) dans l'élément. Cela n'est utile que dans les éléments modifiables, tels que <input>et <textarea>et les éléments dont le content-editable-attribut HTML est défini.

Des boites

Chaque élément est une boîte avec un contenu quelconque, et a un arrière-plan et une bordure en plus du contenu éventuel de la boîte.

Les frontières

Voir la section Bordures pour une liste des propriétés CSS que vous pouvez utiliser pour définir les couleurs des bordures d'une boîte.

background-color

Couleur d'arrière-plan à utiliser dans les zones de l'élément qui n'ont pas de contenu de premier plan.

column-rule-color

Couleur à utiliser lors du tracé de la ligne séparant les colonnes de texte.

outline-color

Couleur à utiliser pour dessiner un contour autour de l’élément. Ce contour est différent de la bordure dans la mesure où il n’ya pas d’espace réservé dans le document (il est donc possible qu’il recouvre un autre contenu). Il est généralement utilisé comme indicateur de focus pour indiquer quel élément recevra les événements d'entrée.

Les frontières

Tout élément peut avoir une bordure dessinée. Une bordure d'élément de base est une ligne tracée autour des bords du contenu de l'élément. Voir Propriétés de zone dans Modèle de zone pour en savoir plus sur la relation entre les éléments et leurs bordures et l'article Styliser les bordures à l'aide de CSS pour en savoir plus sur l'application de styles à des bordures.

Vous pouvez utiliser la borderpropriété shorthand, qui vous permet de configurer tout ce qui concerne la bordure en une seule prise (y compris les caractéristiques non colorées des bordures, telles que sa largeur , son style (solide, en pointillé, etc.), etc.

border-color

Spécifie une couleur unique à utiliser pour chaque côté de la bordure de l'élément. border-left-color, border-right-color, border-top-colorEtborder-bottom-color Vous permet de définir la couleur du côté correspondant de la bordure de l'élément. border-block-start-color et border-block-end-color Avec ceux-ci, vous pouvez définir la couleur utilisée pour dessiner les bordures les plus proches du début et de la fin du bloc entouré par la bordure. Dans un mode d'écriture de gauche à droite (comme l'anglais), la bordure de début de bloc correspond au bord supérieur et la fin de bloc au bas. Cela diffère du début et de la fin en ligne, qui sont les bords gauche et droit (correspondant au début et à la fin de chaque ligne de texte dans la zone). border-inline-start-color et border-inline-end-color Cela vous permet de colorer les bords de la bordure les plus proches du début et de la fin du début des lignes de texte dans la zone. De quel côté cela varie en fonction des writing-mode, directionet des text-orientation propriétés, qui sont généralement (mais pas toujours) utilisé pour ajuster le texte directionnalité en fonction de la langue affichée. Par exemple, si le texte de la boîte est restitué de droite à gauche, le border-inline-start-colorsymbole est appliqué au côté droit de la bordure. Autres façons d'utiliser la couleur CSS n'est pas la seule technologie Web qui prend en charge la couleur. Il existe des technologies graphiques disponibles sur le Web qui prennent également en charge les couleurs.

L'API HTML Canvas

Vous permet de dessiner des graphiques 2D bitmap dans un <canvas>élément. Voir notre tutoriel Canvas pour en savoir plus. SVG (graphiques vectoriels évolutifs) Vous permet de dessiner des images à l'aide de commandes qui dessinent des formes, des motifs et des lignes spécifiques pour produire une image. Les commandes SVG sont au format XML et peuvent être incorporées directement dans une page Web ou placées dans la page à l’aide de l’ <img>élément, comme tout autre type d’image.

WebGL

La bibliothèque graphique Web est une API basée sur OpenGL ES permettant de dessiner des graphiques 2D et 3D hautes performances sur le Web. Voir Apprendre WebGL pour les graphiques 2D et 3D pour en savoir plus. Comment décrire une couleur Pour représenter une couleur en CSS, vous devez trouver un moyen de traduire le concept analogique de "couleur" en une forme numérique pouvant être utilisée par un ordinateur. Cela se fait généralement en décomposant la couleur en composants, tels que la quantité de chaque ensemble de couleurs primaires à mélanger, ou la luminosité pour rendre la couleur. En tant que tel, il existe plusieurs façons de décrire la couleur en CSS.

Pour une discussion plus détaillée de chacun des types de valeur de couleur, voir la référence de l' <color>unité CSS .

Mots clés

Un ensemble de noms de couleurs standard a été défini. Vous pouvez utiliser ces mots-clés au lieu de représentations numériques des couleurs si vous le souhaitez. Un mot-clé représente la couleur exacte à utiliser. Mots - clés de couleur comprennent les couleurs primaires et secondaires standard ( par exemple red, blueou orange), des nuances de gris (de blackà white, y compris les couleurs comme darkgrayet lightgrey), et une variété d'autres couleurs mélangées , y compris lightseagreen, cornflowerblueet rebeccapurple.

Voir Couleur mots - clés dans <color>une liste de tous les mots clés de couleurs disponibles.

Valeurs RVB

Il existe trois manières de représenter une couleur RVB en CSS.

Notation de chaîne hexadécimale La notation de chaîne hexadécimale représente une couleur utilisant des chiffres hexadécimaux pour représenter chacune des composantes de couleur (rouge, vert et bleu). Il peut également inclure un quatrième composant: le canal alpha (ou l'opacité). Chaque composant de couleur peut être représenté par un nombre compris entre 0 et 255 (0x00 et 0xFF) ou, éventuellement, par un nombre compris entre 0 et 15 (0x0 et 0xF). Tous les composants doivent être spécifiés avec le même nombre de chiffres. Si vous utilisez la notation à un chiffre, la couleur finale est calculée en utilisant deux fois le chiffre de chaque composant; c'est-à-dire "#D"devient "#DD"lors du dessin.

Une couleur en notation hexadécimale de chaîne commence toujours par le caractère "#". Viennent ensuite les chiffres hexadécimaux du code de couleur. La chaîne est insensible à la casse.

"#rrggbb" Spécifie une couleur totalement opaque dont la composante rouge est le nombre hexadécimal 0xrr, la composante verte est 0xgget la composante bleue 0xbb. "#rrggbbaa" Spécifie une couleur dont la composante rouge est le nombre hexadécimal 0xrr, la composante verte est 0xgget la composante bleue 0xbb. Le canal alpha est spécifié par 0xaa; plus cette valeur est basse, plus la couleur devient translucide. "#rgb" Spécifie une couleur dont la composante rouge est le nombre hexadécimal 0xrr, la composante verte est 0xgget la composante bleue 0xbb. "#rgba" Spécifie une couleur dont la composante rouge est le nombre hexadécimal 0xrr, la composante verte est 0xgget la composante bleue 0xbb. Le canal alpha est spécifié par 0xaa; plus cette valeur est basse, plus la couleur devient translucide. Par exemple, vous pouvez représenter la couleur opaque bleu vif sous la forme "#0000ff"ou "#00f". Pour le rendre opaque à 25%, vous pouvez utiliser "#0000ff44"ou "#00f4".

Notation fonctionnelle RVB

La notation fonctionnelle RVB (rouge / vert / bleu), comme la notation hexadécimale sous forme de chaîne, représente les couleurs en utilisant leurs composants rouge, vert et bleu (ainsi que, éventuellement, un composant de canal alpha pour l'opacité). Cependant, au lieu d'utiliser une chaîne, la couleur est définie à l'aide de la fonction CSS rgb(). Cette fonction accepte comme paramètres d'entrée les valeurs des composants rouge, vert et bleu et un quatrième paramètre facultatif, la valeur du canal alpha.

Les valeurs légales pour chacun de ces paramètres sont:

red, greenEtblue Chacun doit être une <integer>valeur comprise entre 0 et 255 (inclus), ou une valeur comprise entre <percentage>0% et 100%. alpha Le canal alpha est un nombre compris entre 0.0 (totalement transparent) et 1.0 (totalement opaque). Vous pouvez également spécifier un pourcentage où 0% correspond à 0.0 et 100% correspond à 1.0. Par exemple, un rouge vif opaque à 50% peut être représenté par rgb(255, 0, 0, 0.5)ou rgb(100%, 0, 0, 50%).

Notation fonctionnelle HSL

Les concepteurs et les artistes préfèrent souvent utiliser la méthode de coloration HSL (teinte / saturation / luminosité). Sur le Web, les couleurs HSL sont représentées à l'aide de la notation fonctionnelle HSL. La hsl()fonction CSS est très similaire à la rgb()fonction utilisée autrement.

Cylindre de couleur HSL

Figure 1. Un cylindre de couleur HSL. La teinte définit la couleur réelle en fonction de la position le long d'une roue chromatique circulaire représentant les couleurs du spectre visible. La saturation est un pourcentage de la distance entre une nuance de gris et le maximum possible de la teinte donnée. À mesure que la valeur de luminance (ou de luminosité) augmente, la couleur passe du plus sombre possible au plus brillant possible (du noir au blanc). Image reproduite avec l' aimable autorisation de l'utilisateur SharkD sur Wikipedia , distribuée sous la licence CC BY-SA 3.0 . La valeur de la composante de teinte (H) d'une couleur HSL est un angle allant du rouge au jaune en passant par le vert, le cyan, le bleu et le magenta (pour revenir au rouge à 360 °) qui identifie la couleur de base. La valeur peut être spécifiée dans n'importe quelle <angle>unité prise en charge par CSS, y compris degrés ( deg), radians ( rad), gradians ( grad) ou turn ( turn). Mais cela ne contrôle pas la vivacité ou la matité, ni la luminosité ou l’obscurité de la couleur.

Le composant saturation (S) de la couleur spécifie quel pourcentage de la couleur finale est composé de la teinte spécifiée. Le reste est défini par le niveau de gris fourni par le composant de luminance (L).

Pensez-y comme pour créer la couleur de peinture parfaite:

Vous commencez avec une peinture de base présentant l'intensité maximale possible pour une couleur donnée, telle que le bleu le plus intense pouvant être représenté par l'écran de l'utilisateur. C'est la composante hue (H): une valeur représentant l'angle autour de la roue chromatique pour la teinte vive que nous voulons utiliser comme base. Ensuite, sélectionnez une peinture en niveaux de gris qui correspond au degré de luminosité souhaité. c'est la luminance. Voulez-vous qu'il soit très brillant et presque blanc, ou très sombre et plus proche du noir, ou quelque part entre les deux? Ceci est spécifié en utilisant un pourcentage, 0% étant parfaitement noir et 100% parfaitement blanc. (peu importe la saturation ou la teinte). Entre les valeurs se trouve une zone grise littérale. Maintenant que vous avez une peinture grise et une couleur parfaitement vive, vous devez les mélanger. La composante de saturation (S) de la couleur indique quel pourcentage de la couleur finale doit être composé de cette couleur parfaitement vive. Le reste de la couleur finale est constitué de la peinture grise qui représente la saturation. Vous pouvez également éventuellement inclure un canal alpha, pour rendre la couleur moins opaque à 100%.

Voici quelques exemples de couleurs en notation HSL:

Notez que lorsque vous omettez l'unité de la teinte, celle-ci est supposée être en degrés ( deg).

En utilisant la couleur Maintenant que vous connaissez les propriétés CSS qui vous permettent d'appliquer une couleur aux éléments et les formats que vous pouvez utiliser pour décrire des couleurs, vous pouvez les associer pour commencer à utiliser la couleur. Comme vous l'avez peut-être vu dans la liste intitulée Ce qui peut être coloré , vous pouvez colorier de nombreux éléments avec CSS. Examinons cela sous deux angles: utiliser la couleur dans une feuille de style et ajouter et modifier une couleur à l'aide de code JavaScript pour modifier les styles des éléments.

Spécifier les couleurs dans les feuilles de style

Le moyen le plus simple d'appliquer une couleur à des éléments - et vous le ferez généralement - consiste simplement à spécifier des couleurs dans le CSS utilisé lors du rendu des éléments. Bien que nous n'utilisions pas chacune des propriétés mentionnées précédemment, nous examinerons quelques exemples. Le concept est le même partout où vous utilisez la couleur.

Prenons un exemple, en commençant par les résultats que nous essayons d'obtenir:

HTML

Le code HTML responsable de la création de l'exemple ci-dessus est présenté ici:

< div  class = " wrapper " >  < div  class = " box boxLeft " >    < p >      C'est la première case.    </ p >  </ div >  < div  class = " box boxRight " >    < p >      C'est la deuxième case.    </ p >  </ div > </ div > C’est assez simple, en utilisant <div>comme un wrapper autour du contenu, qui se compose de deux autres <div>s, chacun stylisé différemment avec un seul paragraphe ( <p>) dans chaque case.

La magie se passe, comme d'habitude, dans le CSS, où nous appliquerons des couleurs pour définir la mise en page du code HTML ci-dessus.

CSS

Nous allons examiner les CSS pour créer les résultats ci-dessus, un morceau à la fois, afin de pouvoir examiner les parties intéressantes un par un.

.wrapper  {  width : 620px ;  hauteur : 110px ;  marge : 0 ;  rembourrage : 10px ;  bord : 6px mediumturquoise solide ; } La .wrapperclasse est utilisée pour assigner des styles à ceux <div>qui englobent tous nos autres contenus. Ceci établit la taille du conteneur en utilisant widthet heightaussi bien que son marginet padding.

L’utilisation de la borderpropriété pour établir une frontière autour du bord extérieur de l’élément est plus intéressante pour notre discussion . Cette bordure est une ligne continue de 6 pixels de large dans la couleur mediumturquoise.

Nos deux boîtes colorées partagent un certain nombre de propriétés communes. Nous allons ensuite établir une classe .boxqui définit ces propriétés partagées:

.box  {  width : 290px ;  hauteur : 100px ;  marge : 0 ;  rembourrage : 4px 6px ;  police : 28px "Feutre de marqueur" , "Zapfino" , cursif ;  affichage : flex ;  justifier-contenu : centre ;  align-items : centre ; } En bref, .boxétablit la taille de chaque case, ainsi que la configuration de la police utilisée à l'intérieur. Nous profitons également de CSS Flexbox pour centrer facilement le contenu de chaque boîte. Nous activons le flexmode en utilisant display: flex, et définissons à la fois justify-contentet align-itemsà center. Ensuite, nous pouvons créer une classe pour chacune des deux boîtes qui définit les propriétés qui diffèrent entre les deux.

.boxLeft  {  float : left ;  couleur de fond :  RGB ( 245, 130, 130 ) ;  contour : 2px solid darkred ; } La .boxLeftclasse - qui, habilement, sert à styliser la boîte de gauche - la fait flotter à gauche, puis définit les couleurs:

La couleur d'arrière-plan de la boîte est définie en modifiant la valeur de la background-colorpropriété CSS en rgb(245, 130, 130). Un contour est défini pour la boîte. Contrairement au plus communément utilisé border, outlinen’affecte pas la mise en page; il dessine par-dessus tout ce qui peut se trouver en dehors de la boîte de l'élément au lieu de faire de la place comme il le borderfait. Ce contour est une ligne continue rouge sombre de deux pixels d'épaisseur. Notez l'utilisation du darkredmot clé lors de la spécification de la couleur. Notez que nous ne définissons pas explicitement la couleur du texte. Cela signifie que la valeur de colorsera héritée de l'élément contenant le plus proche qui la définit. Par défaut, c'est noir. .boxRight  {  float : right ;  couleur de fond :  hsl ( 270deg, 50%, 75% ) ;  contour : 4px pointillés rgb ( 110, 20, 120 ) ;  couleur :  hsl ( 0deg, 100%, 100% ) ;  text-decoration : soulignement ondulé # 88ff88 ;  texte-ombre : 2 pixels 2 pixels 3 pixels noir ; } Enfin, la .boxRightclasse décrit les propriétés uniques de la boîte dessinée à droite. Il est configuré pour faire flotter la boîte vers la droite afin qu'elle apparaisse à côté de la boîte précédente. Ensuite, les couleurs suivantes sont établies:

Le background-colorest défini à l'aide de la valeur HSL spécifiée à l'aide de hsl(270deg, 50%, 75%). Ceci est une couleur pourpre moyen. La boîte outlinesert à spécifier que la boîte doit être entourée d'une ligne pointillée de quatre pixels d'épaisseur dont la couleur est un violet un peu plus profond ( rgb(110, 20, 120)). La couleur de premier plan (texte) est spécifiée en définissant la colorpropriété sur hsl(0deg, 100%, 100%). C'est l'une des nombreuses façons de spécifier la couleur blanche. Nous ajoutons une ligne ondulée verte sous le texte avec text-decoration. Enfin, un peu d'ombre est ajouté au texte à l'aide de text-shadow. Son color paramètre est défini sur black. Laisser l'utilisateur choisir une couleur Il existe de nombreuses situations dans lesquelles votre site Web peut avoir besoin de laisser l’utilisateur choisir une couleur. Vous avez peut-être une interface utilisateur personnalisable ou vous implémentez une application de dessin. Vous avez peut-être du texte modifiable et devez laisser l’utilisateur choisir la couleur du texte. Ou peut-être que votre application permet à l'utilisateur d'attribuer des couleurs à des dossiers ou à des éléments. Bien que, par le passé, il ait été nécessaire d'implémenter votre propre sélecteur de couleur , HTML offre désormais la possibilité aux navigateurs de vous en fournir un à travers l' <input>élément, en utilisant "color"la valeur de son typeattribut.

L' <input>élément représente une couleur uniquement dans la notation de chaîne hexadécimale décrite ci-dessus.

Exemple: Choisir une couleur Regardons un exemple simple, dans lequel l'utilisateur peut choisir une couleur. Lorsque l'utilisateur ajuste la couleur, la bordure autour de l'exemple change pour refléter la nouvelle couleur. Une fois la couleur finale sélectionnée et sélectionnée, la valeur du sélecteur de couleur s’affiche.

Sous macOS, vous indiquez que vous avez finalisé la sélection de la couleur en fermant la fenêtre du sélecteur de couleurs.

HTML

Le code HTML crée une zone contenant un contrôle de sélecteur de couleur (avec une étiquette créée à l'aide de l' <label>élément) et un élément de paragraphe vide ( <p>) dans lequel nous allons générer du texte à partir de notre code JavaScript.

< div  id = " box " >  < label  pour = " colorPicker " > Couleur de la bordure: </ label >  <  type d' entrée = " color "  value = " # 8888ff "  id = " colorPicker " >  < p  id = " output " > </ p > </ div >

CSS

Le CSS établit simplement une taille pour la boîte et un style de base pour les apparences. La bordure est également établie avec une largeur de 2 pixels et une couleur de bordure qui ne durera pas, grâce au JavaScript ci-dessous ...

#box  {  width : 500px ;  hauteur : 200px ;  bordure : 2px solide rgb ( 245, 220, 225 ) ;  rembourrage : 4px 6px ;  police : 16px "Lucida Grande" , "Helvetica" , "Arial" , "sans-serif" }

JavaScript

Le script ici gère la tâche de mise à jour la couleur de départ de la bordure pour correspondre à la valeur du sélecteur de couleur. Ensuite, deux gestionnaires d'événements sont ajoutés pour gérer les entrées de l' <input type="color">élément.

laissez colorPicker = document . getElementById ( "colorPicker" ) ; let box = document . getElementById ( "box" ) ; laisser sortie = document . getElementById ( "sortie" ) ;

boîte . style . borderColor = colorPicker . La valeur ;

colorPicker . addEventListener ( "input" ,  function ( event )  {  box . style . borderColor = event . target . value ; } ,  false ) ;

colorPicker . addEventListener ( "change" ,  fonction ( événement )  {  sortie . innerText =  "Couleur définie sur"  + colorPicker . valeur +  "." ; } ,  false ) ; L' inputévénement est envoyé chaque fois que la valeur de l'élément change. c'est-à-dire chaque fois que l'utilisateur ajuste la couleur dans le sélecteur de couleur. Chaque fois que cet événement arrive, nous définissons la couleur de bordure de la boîte pour qu'elle corresponde à la valeur actuelle du sélecteur de couleur.

L' changeévénement est reçu lorsque la valeur du sélecteur de couleur est finalisée. Nous répondons en définissant le contenu de l' <p>élément avec l'ID "output"avec une chaîne décrivant la couleur finalement sélectionnée.

Utiliser la couleur à bon escient Faire les bons choix lors du choix des couleurs lors de la conception d'un site Web peut s'avérer une tâche ardue, en particulier si vous ne maîtrisez pas l'art, le design ou au moins la théorie des couleurs de base. Un mauvais choix de couleurs peut rendre votre site peu attrayant, voire pire, laisser le contenu illisible en raison de problèmes de contraste ou de couleurs en conflit. Pire encore, si vous utilisez les mauvaises couleurs, votre contenu risque d'être inutilisable par des personnes ayant certains problèmes de vision, en particulier le daltonisme.

Trouver les bonnes couleurs Il peut être difficile de créer des couleurs juste, surtout sans formation artistique ou design. Heureusement, il existe des outils disponibles qui peuvent vous aider. S'ils ne peuvent pas remplacer le fait qu'un bon concepteur vous aide à prendre ces décisions, ils peuvent certainement vous aider à démarrer.

Couleur de base

La première étape consiste à choisir votre couleur de base . C’est la couleur qui définit en quelque sorte votre site Web ou l’objet du site. Tout comme nous associons le vert à la boisson Mountain Dew et que l’on peut penser à la couleur bleue en relation avec le ciel ou l’océan, choisir une couleur de base appropriée pour représenter votre site est un bon point de départ. Il y a beaucoup de façons de choisir une couleur de base; quelques idées incluent:

Une couleur naturellement associée au sujet de votre contenu, telle que la couleur existante identifiée avec un produit ou une idée ou une couleur représentative de l'émotion que vous souhaitez transmettre. Une couleur qui provient des images associées au contenu de votre contenu. Si vous créez un site Web sur un article ou un produit donné, choisissez une couleur physiquement présente sur cet article. Parcourez des sites Web qui vous permettent de consulter de nombreuses palettes de couleurs et images existantes pour trouver l'inspiration. Lorsque vous essayez de choisir une couleur de base, vous pouvez trouver que les extensions de navigateur qui vous permettent de sélectionner les couleurs du contenu Web peuvent être particulièrement pratiques. Certains d'entre eux sont même spécifiquement conçus pour aider à ce type de travail. Par exemple, le site Web ColorZilla propose une extension ( Chrome / Firefox ) offrant un outil Pipette permettant de sélectionner des couleurs sur le Web. Il peut également prendre des moyennes des couleurs de pixels dans des zones de tailles différentes ou même dans une zone sélectionnée de la page.

L'avantage de la moyenne des couleurs peut être que souvent ce qui ressemble à une couleur unie est en réalité un nombre étonnamment varié de couleurs apparentées, toutes utilisées en concert, se mélangeant pour créer l'effet désiré. Si vous ne sélectionnez qu'un de ces pixels, vous obtiendrez une couleur qui, à elle seule, paraît très mal à sa place.

Étendre la palette

Une fois que vous avez choisi votre couleur de base, de nombreux outils en ligne peuvent vous aider à créer une palette de couleurs appropriées à utiliser avec votre couleur de base en appliquant la théorie des couleurs à votre couleur de base afin de déterminer les couleurs supplémentaires appropriées. Beaucoup de ces outils prennent également en charge l'affichage des couleurs filtrées afin que vous puissiez voir à quoi elles ressemblent pour les personnes souffrant de différentes formes de daltonisme. Voir Couleur et accessibilité pour une brève explication de la raison pour laquelle cela est important.

Quelques exemples (tous gratuits à utiliser à partir du moment où cette liste a été révisée pour la dernière fois):

Le sélecteur de couleurs de MDN

Paletton

Roue chromatique en ligne Adobe Color CC Lors de la conception de votre palette, n'oubliez pas qu'en plus des couleurs générées par ces outils, vous devrez probablement également ajouter des couleurs neutres telles que le blanc (ou presque le blanc), le noir (ou presque le noir), et un certain nombre de nuances de gris.

En général, il vaut mieux utiliser le plus petit nombre de couleurs possible. En utilisant la couleur pour accentuer plutôt que d'ajouter de la couleur à tout le contenu de la page, vous gardez votre contenu facile à lire et les couleurs que vous utilisez ont beaucoup plus d'impact.

Ressources de la théorie des couleurs

Un examen complet de la théorie des couleurs dépasse le cadre de cet article, mais de nombreux articles sur la théorie des couleurs sont disponibles, ainsi que des cours que vous pouvez trouver dans les écoles et les universités à proximité. Quelques ressources utiles sur la théorie des couleurs:

Color Science ( Khan Academy en association avec Pixar ) Un cours en ligne qui présente des concepts tels que la couleur, sa perception et l'utilisation des couleurs pour exprimer des idées. Présenté par les artistes et designers Pixar.

La théorie des couleurs sur Wikipedia

L'entrée de Wikipedia sur la théorie des couleurs, qui contient de très bonnes informations d'un point de vue technique. Ce n'est pas vraiment une ressource pour vous aider dans le processus de sélection des couleurs, mais il regorge d'informations utiles.

Couleur et accessibilité

La couleur peut être un problème d’ accessibilité de plusieurs manières . Une utilisation incorrecte ou imprudente de la couleur peut créer un site Web ou une application qu'un pourcentage de votre public cible peut ne pas être en mesure d'utiliser correctement, ce qui peut entraîner une perte de trafic, des affaires et éventuellement un problème de relations publiques. Il est donc important d’examiner attentivement votre utilisation de la couleur.

Vous devriez au moins faire des recherches fondamentales sur le daltonisme . Il y en a plusieurs sortes; le plus courant est le daltonisme rouge-vert, qui empêche les gens de faire la différence entre le rouge et le vert. Il en existe d’autres, allant de l’incapacité à dire la différence entre certaines couleurs à l’incapacité totale à voir la couleur.

La règle la plus importante: ne jamais utiliser la couleur comme seul moyen de savoir quelque chose. Si, par exemple, vous indiquez le succès ou l'échec d'une opération en modifiant la couleur d'une forme de blanc en vert pour un succès et en rouge en cas d'échec, les utilisateurs daltoniens rouge-vert ne pourront pas utiliser votre site correctement. Au lieu de cela, utilisez peut-être à la fois du texte et des couleurs pour que tout le monde puisse comprendre ce qui se passe.

Pour plus d'informations sur le daltonisme, voir les articles suivants:

Medline Plus: Colour Blindness (Institut national de la santé des États-Unis) Académie américaine d'ophtalmologie: Qu'est-ce que le daltonisme? Colour Blindness & Web Design (Ergonomie utilisable.gov: Ministère de la Santé et des Services sociaux des États-Unis) Exemple de conception de palette Prenons un exemple rapide de sélection d'une palette de couleurs appropriée pour un site. Imaginez que vous construisez un site Web pour un nouveau jeu qui se déroule sur la planète Mars. Faisons donc une recherche sur Google pour les photos de Mars . Beaucoup de bons exemples de coloration martienne là-bas. Nous évitons soigneusement les maquettes et les photos de films. Et nous décidons d'utiliser une photo prise par l'un des atterrisseurs de la planète Mars que l'humanité a garée à la surface au cours des dernières décennies, car le jeu se déroule à la surface de la planète. Nous utilisons un outil de sélection de couleur pour sélectionner un échantillon de la couleur que nous avons choisie.

À l'aide d'un outil Pipette, nous identifions une couleur que nous aimons et déterminons qu'il s'agit de la couleur en question #D79C7A, à savoir une couleur rouille-orange appropriée, si stéréotypée sur la surface martienne.

Après avoir sélectionné notre couleur de base, nous devons construire notre palette. Nous décidons d'utiliser Paletton pour créer les autres couleurs dont nous avons besoin. En ouvrant Paletton, on voit:

Juste après le chargement de Paletton.

Ensuite, nous entrons le code hexadécimal de notre couleur ( D79C7A) dans la case "Base RGB" située dans le coin inférieur gauche de l'outil:

Après avoir entré la couleur de base

Nous voyons maintenant une palette monochromatique basée sur la couleur que nous avons choisie sur la photo de Mars. Si vous avez besoin de nombreuses couleurs associées pour une raison quelconque, celles-ci seront probablement de bonnes couleurs. Mais ce que nous voulons vraiment, c'est une couleur d'accent. Quelque chose qui apparaîtra le long de la couleur de base. Pour le trouver, nous cliquons sur la bascule "Ajouter complémentaire" sous le menu qui vous permet de sélectionner le type de palette (actuellement "Monochromatique"). Paletton calcule une couleur d'accent appropriée; en cliquant sur la couleur d’accent dans le coin inférieur droit nous dit que cette couleur est #508D7C.

Maintenant avec les couleurs complémentaires incluses.

Si vous n'êtes pas satisfait de la couleur qui vous est proposée, vous pouvez modifier le schéma de couleurs pour voir si vous trouvez quelque chose que vous préférez. Par exemple, si nous n'aimons pas la couleur bleu verdâtre proposée, nous pouvons cliquer sur l'icône de jeu de couleurs Triad, qui présente les éléments suivants:

Palette de couleurs sélectionnée

Ce bleu grisâtre en haut à droite est plutôt beau. En cliquant dessus, nous constatons que c'est #556E8D. Cela serait utilisé comme couleur d'accentuation, à utiliser avec parcimonie pour faire ressortir les éléments, par exemple dans les titres ou dans la mise en surbrillance d'onglets ou d'autres indicateurs sur le site:

Palette de couleurs sélectionnée

Nous avons maintenant notre couleur de base et notre accent. En plus de cela, nous avons quelques nuances complémentaires de chacune, juste au cas où nous en aurions besoin pour les dégradés et autres. Les couleurs peuvent ensuite être exportées dans un certain nombre de formats afin que vous puissiez les utiliser.

Une fois que vous avez ces couleurs, vous devrez probablement toujours sélectionner les couleurs neutres appropriées. La pratique habituelle en matière de conception consiste à essayer de trouver le compromis idéal où il y a juste assez de contraste pour que le texte soit net et lisible, mais pas assez pour que les yeux soient trop durs. Il est facile d'aller trop loin d'une manière ou d'une autre, alors assurez-vous de recevoir des commentaires sur vos couleurs une fois que vous les avez sélectionnées et que vous avez des exemples d'utilisation disponibles. Si le contraste est trop faible, votre texte aura tendance à être délavé par l'arrière-plan, ce qui le rendra illisible, mais si votre contraste est trop élevé, l'utilisateur peut trouver votre site élogieux et désagréable à regarder.

Couleur, arrière-plans, contraste et impression Ce qui paraît bien à l'écran peut paraître très différent sur le papier. En outre, l'encre peut coûter cher et si un utilisateur imprime votre page, il n'a pas nécessairement besoin de tous les fonds et une telle utilisation de son encre précieuse lorsque seul le texte compte. Par défaut, la plupart des navigateurs suppriment les images d'arrière-plan lors de l'impression de documents.

Si vos couleurs et vos images d'arrière-plan ont été sélectionnées avec soin et / ou sont essentielles à l'utilité du contenu, vous pouvez utiliser la color-adjustpropriété CSS pour indiquer au navigateur qu'il ne doit pas modifier l'apparence du contenu.

La valeur par défaut de color-adjust, economyindique que le navigateur est autorisé à modifier l'apparence du contenu s'il le juge nécessaire pour tenter d'optimiser la lisibilité et / ou l'économie de contenu du contenu, en fonction du type de périphérique de sortie sur lequel le document est dessiné.

Vous pouvez définir color-adjustpour exactindiquer au navigateur que le ou les éléments sur lesquels vous l'utilisez ont été conçus spécifiquement pour fonctionner au mieux avec les couleurs et les images laissées telles quelles. Avec cet ensemble, le navigateur ne modifiera pas l'apparence de l'élément et le dessinera comme indiqué par votre CSS.