#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.

[magikdick]

Les ingrédients d’un travail d’équipe réussi

Que vous soyez une agence social media ou une marque, une chose est sûre: coordonner le travail de plusieurs membres sur un même compte social media peut s’avérer difficile. Et quand je dis difficile, je veux dire énormément stressant. En tant que directeur de la création chez Contentworks, j’en ai une connaissance de première main. Dans cet article, je vais vous montrer comment votre équipe social media peut collaborer avec succès.

Les problèmes

La gestion de grands comptes nécessite plus d’une personne. L’équipe peut gérer le compte à tour de rôle ou simultanément. Avoir plusieurs membres de l’équipe travaillant sur un même compte occasionne des problèmes qui peuvent porter préjudice à la marque. Voici quelques-uns d’entre eux :

Incohérence des tons : Différentes personnes postent et répondent de façons très différentes

Manque de collaboration : Duplication ou retards dans les réponses aux messages, les publications, l’approbation des posts

Organisation chaotique : Retards dans la recherche de contenu, mots de passe non partagés

Mauvais reporting : Vous faites le travail, mais personne ne recueille les retours

Vous remarquez un fil conducteur ? Oui, le principal problème est la communication.

1. Incohérence des tons

La gestion des réseaux sociaux dans une organisation complexe n’est pas facile. Il y a plusieurs services, responsables et règles, ce qui peut entraîner de la confusion. Avoir plusieurs employés qui répondent et postent différemment sur le même compte peut également avoir un impact négatif sur la marque. Peut-être que John répond de manière formelle alors que Sarah est ludique et amusante. Le ton des publications de chaque personne reflétera la marque, influencera l’expérience client et affectera le résultat.

La solution

Votre marque a besoin d’un ensemble de lignes directrices claires pour gérer le ton, l’orthographe, le style et la personnalité de la marque. Je ne parle pas d’une énorme présentation PowerPoint. Je parle d’un document basique d’une page qui sert de point de référence pour le personnel. Le document doit inclure des informations de base comme:

Le slogan

La voix de la marque

Orthographe britannique ou américaine (pour les posts en langue étrangère)

Codes de couleur hexadécimaux

Les valeurs de l’entreprise

Les critères socio-démographiques du client

Avant de donner les codes d’accès d’un compte aux nouveaux membres de l’équipe, assurez-vous qu’ils comprennent la marque et savent comment la représenter efficacement. Vous pouvez également créer des réponses enregistrées à l’aide d’Agorapulse. Les employés peuvent ainsi choisir parmi une liste de réponses pré-approuvées dans l’esprit de la marque, ce qui permet à tous de gagner du temps et de préserver une cohérence de ton.

2. Manque de collaboration

Une équipe qui ne communique pas peut causer de nombreux problèmes : des réponses en double à un même message ou au contraire une absence totale de réponse; trop de publications ou aucune publication. Pire encore, cela pourrait vous amener à vous contredire et embrouiller les abonnés.

Rappelez-vous que toutes les équipes social media ne travaillent pas au même endroit. Dans mon cas, j’ai une équipe en Chine et une autre en Europe, donc je ne peux pas simplement entrer dans un bureau pour faire une annonce. Différents fuseaux horaires, différents départements et une vision différente des choses – tout cela peut causer une grande confusion.

La solution

Envoyer des emails à vos collègues pour chaque action n’est pas une solution viable. Le plus efficace est un tableau de bord social media dans lequel les membres de l’équipe se voient attribuer des actions et des rôles différents. Agorapulse vous permet d’attribuer un rôle à chaque utilisateur avec à chaque fois un niveau différent d’accès aux publications, aux réponses et à la création de rapports.

Choisissez parmi:

Admin

Éditeur

Modérateur

Invité

Vous avez ainsi une idée précise de qui est autorisé à prendre quelles mesures sur les comptes que vous gérez. Vous avez la possibilité de planifier ou mettre en file d’attente vos posts mais aussi d’affecter des actions aux autres membres de l’équipe. Par exemple, mon rédacteur junior peut m’affecter un post à approuver avant sa mise en ligne. Cool non?

Mieux encore, l’outil montre également quand quelqu’un d’autre répond à un abonné, vous assurant ainsi d’éviter l’embarrassante réponse en double  ! Je trouve ce système particulièrement utile pour les comptes de services financiers pour lesquels il est de la plus haute importance de s’assurer que les publications sur les réseaux sont en conformité avec l’entreprise. En savoir plus sur le workflow.

3. Organisation chaotique

Le marketing social est en constant mouvement, ce qui peut entraîner beaucoup de pertes dans une grande équipe social media. Voilà quelques exemples de mésaventures auxquelles j’ai été confrontées (les noms ont été changés car j’aime mon équipe!):

Sarah dépense 50 $ sur Facebook mais oublie de mettre à jour la feuille de budget du client

Todd reçoit des images du graphiste et les enregistre sur son ordinateur

Charli (oui moi, je suis aussi coupable) discute d’une nouvelle idée avec un client et oublie d’en parler au reste de l’équipe

La solution

Ces actes sont tout à fait normaux pour une grande équipe social media, mais ils peuvent aussi provoquer un chaos indescriptible. Dès le premier jour, vous devez systématiquement trouver une organisation, et cela pour chaque compte que vous gérez.

Avoir des fichiers clients sur Dropbox et donner accès aux bons membres de l’équipe est un moyen de s’assurer que tout est stocké au même endroit. Votre équipe doit savoir où stocker correctement les fichiers, mettre à jour les feuilles de budget et ajouter de nouvelles idées dans un bloc-notes commun. Alternativement, vous pouvez également essayer l’un des outils de collaboration ci-dessous (capture d’écran de Trello) :

Trello: J’adore Trello pour suivre les campagnes et les idées de chacun, assigner les utilisateurs et cocher les éléments comme “terminé”. La clé d’une collaboration réussie est d’éviter les longs essais et de garder des idées sous forme de listes ou de notes courtes.

Basecamp: Basecamp est un bon petit outil à utiliser pour partager des nouvelles informations avec  les membres de l’équipe sans se lancer dans de longues chaînes de mails.

Workstack: il s’agit d’un outil qui fonctionne directement avec Basecamp, qui permet de voir les heures et les jours que votre équipe peut consacrer aux divers projets. Avec plusieurs personnes travaillant sur un seul compte, savoir comment chacun gère son temps de travail peut vous aider à optimiser votre travail en équipe et à gagner en efficacité.

4. Mauvais rapports

La collaboration social media c’est bien, jusqu’à ce que le reporting entre en ligne de compte. Un rapport social devrait être produit à la fin de chaque mois, que vous soyez une agence travaillant pour un client ou une équipe qui doit faire un retour à son responsable.

Un rapport doit clairement identifier les actions entreprises, l’argent dépensé, les KPIs atteints ou manqués et les actions à venir. Alors, où est le problème? Le problème est que, avec plusieurs personnes travaillant sur les mêmes comptes, comment se réunir chaque mois pour établir un rapport? Une chose est sûre: vos clients ne seront pas très ravis si vous n’expliquez pas clairement les actions entreprises.

La solution

Vous n’avez véritablement que deux documents à produire : votre reporting social media et votre feuille de budget. Tout d’abord, vous devez créer une feuille de budget pour chaque compte. Cela signifie que chaque fois qu’un membre de l’équipe ajoute une dépense, le total est recalculé (Google Drive est très utile pour faire ça).

Pensez à définir un budget sur la feuille afin que votre équipe connaisse les limites, et assurez-vous que le document soit mis à jour en temps réel. Vous pouvez oublier $10 ici ou $20 là, mais à la fin ça fait une somme ! Accédez ensuite à votre tableau de bord Agorapulse et créez un rapport pour vos comptes. C’est tellement simple et professionnel.

Les rapports Agorapulse étant générés en tant que fichier powerpoint, vous pouvez simplement ajouter une page de couverture présentant les statistiques clés, les dépenses budgétaires, les prospects, et vous êtes parés !

Grâce à Agorapulse, vous n’avez pas à élaborer un rapport pour chaque compte, ni à demander aux membres d’établir des rapports complexes – tout est fait pour vous ! Une fois le rapport créé, n’oubliez pas de le partager avec l’équipe et de mettre en évidence les actions réussies ou les points à améliorer. Rappelez-vous que la communication est la clé !

Plus de conseils pour une collaboration réussie

Fuseaux horaires : Assurez-vous que votre équipe couvre différents fuseaux horaires sur les grands comptes. Poster seulement de 8h à 17h n’est pas vraiment envisageable pour les grandes marques. De même, les publications en différentes langues doivent être ciblées et clairement communiquées aux autres.

Calendrier éditorial : Encouragez votre équipe à vérifier, mettre à jour le calendrier éditorial et à planifier les messages dans votre tableau de bord Agorapulse.

Faites des réunions : Oui, ça semble old school, mais c’est important de faire des réunions de temps en temps pour savoir où chacun en est. Faites participer l’équipe présente à l’étranger via Skype et assurez-vous qu’il y a du café et des croissants pour tout le monde !

Feedback: si vous dirigez une équipe, vous n’êtes pas forcément au courant des divers problèmes qui peuvent se poser ailleurs. Encouragez votre équipe à partager leurs commentaires, idées et autres problèmes entre eux.

Remplacements : Avez-vous un processus en place pour les vacances et les congés maladie ? Ne vous contentez pas de penser que le reste de l’équipe saura quoi faire si un membre clé est absent.

La collaboration social media peut être une expérience enrichissante quand on en connaît les bases. Comment se passe le travail au sein de votre équipe ? Dites-nous tout dans les commentaires ou sur Twitter.

Article rédigé par Charli Day et traduit de l’anglais.

Source https://feeds.feedblitz.com/~/575535730/0/visibiliteweb sur http://visibiliteweb.blogspot.com/ Chaine Youtube : https://www.youtube.com/channel/UC6oA6_t1R6Wqm6sPmKtZnkw