Vlad Merjevitch
En HTML, une couleur est spécifiée de l'une des deux manières suivantes : à l'aide d'un code hexadécimal et par le nom de certaines couleurs. La méthode basée sur le système de nombres hexadécimaux est principalement utilisée, comme la plus universelle.
Couleurs hexadécimales
Les nombres hexadécimaux sont utilisés pour spécifier les couleurs en HTML. Le système hexadécimal, contrairement au système décimal, est basé, comme son nom l'indique, sur le nombre 16. Les nombres seront les suivants : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Numéros 10 à 15 remplacés avec des lettres latines... Tableau 6.1 montre la correspondance entre les nombres décimaux et hexadécimaux.
Les nombres supérieurs à 15 dans le système hexadécimal sont formés en combinant deux nombres en un (tableau 6.2). Par exemple, 255 décimal correspond à FF hexadécimal.
Pour éviter toute confusion dans la définition du système numérique, le caractère dièse # est placé devant le nombre hexadécimal, par exemple # aa69cc. Dans ce cas, le registre n'a pas d'importance, il est donc permis d'écrire # F0F0F0 ou # f0f0f0.
Une couleur typique utilisée en HTML ressemble à ceci.
Ici, la couleur d'arrière-plan de la page Web est définie sur # FA8E47. Le dièse # devant un nombre signifie qu'il est hexadécimal. Les deux premiers chiffres (FA) définissent la composante rouge de la couleur, les troisième à quatrième chiffres (8E) sont verts et les deux derniers chiffres (47) sont bleus. En conséquence, vous obtenez cette couleur.
| FA | + | 8E | + | 47 | = | FA8E47 |
Chacune des trois couleurs - rouge, vert et bleu - peut prendre des valeurs de 00 à FF, ce qui donne 256 nuances. Ainsi, le nombre total de couleurs peut être de 256x256x256 = 16.777.216 combinaisons. Le modèle de couleur basé sur les composantes rouge, verte et bleue est appelé RVB (rouge, vert, bleu ; rouge, vert, bleu). Ce modèle est additif (de add - to add), dans lequel l'addition des trois composants forme une couleur blanche.
Pour faciliter la navigation dans les couleurs hexadécimales, tenez compte de certaines règles.
- Si les valeurs des composantes de couleur sont les mêmes (par exemple : # D6D6D6), alors vous obtenez une teinte grise. Plus le nombre est grand, plus la couleur est claire, les valeurs varient de # 000000 (noir) à #FFFFFF (blanc).
- Une couleur rouge vif est formée si la composante rouge est définie au maximum (FF) et les autres composantes sont définies sur zéro. La couleur # FF0000 est la nuance de rouge la plus rouge possible. Il en est de même du vert (# 00FF00) et du bleu (# 0000FF).
- Le jaune (#FFFF00) est obtenu en mélangeant du rouge avec du vert. Ceci est clairement visible sur la roue chromatique (Fig. 6.1), où les couleurs primaires (rouge, vert, bleu) et les couleurs complémentaires ou complémentaires sont présentées. Ceux-ci incluent le jaune, le cyan et le violet (également appelé magenta). En général, n'importe quelle couleur peut être obtenue en mélangeant des couleurs voisines. Ainsi, le cyan (#00FFFF) est obtenu en combinant le bleu et le vert.
Riz. 6.1. Cercle de couleur
Les couleurs hexadécimales n'ont pas besoin d'être choisies de manière empirique. Dans ce but, éditeur graphique capable de travailler avec différents modèles de couleurs, par exemple, Adobe Photoshop... En figue. 6.2 montre une fenêtre pour choisir une couleur dans ce programme, la valeur hexadécimale résultante de la couleur actuelle est entourée d'une ligne. Vous pouvez le copier et le coller dans votre code.
Riz. 6.2. Fenêtre pour choisir une couleur dans Photoshop
Couleurs du Web
Si vous réglez la qualité des couleurs du moniteur sur 8 bits (256 couleurs), la même couleur peut être affichée dans différents navigateursà ma façon. Cela est dû à la façon dont les graphiques sont affichés, où le navigateur travaille avec sa propre palette et ne peut pas afficher une couleur qu'il n'a pas dans la palette. Dans ce cas, la couleur est remplacée par une combinaison de pixels d'autres couleurs proches qui imitent celle spécifiée. Pour que la couleur reste inchangée dans les différents navigateurs, nous avons introduit une palette de couleurs dites Web. Les couleurs Web sont ces couleurs, pour chaque composant - rouge, vert et bleu - l'une des six valeurs est définie - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). La valeur hexadécimale de ce composant est indiquée entre parenthèses. Le nombre total de couleurs de toutes les combinaisons possibles donne 6x6x6 - 216 couleurs. Un exemple de couleur Web est # 33FF66.
La principale caractéristique de la couleur Web est qu'elle apparaît de la même manière sur tous les navigateurs. À l'heure actuelle, la pertinence des couleurs Web est très faible en raison de l'augmentation de la qualité des moniteurs et de l'expansion de leurs capacités.
Couleurs par nom
Afin de ne pas mémoriser un ensemble de nombres, vous pouvez utiliser à la place les noms des couleurs couramment utilisées. Tableau 6.3 répertorie les noms des noms de couleurs populaires.
| Nom de la couleur | Couleur | La description | Valeur hexadécimale |
|---|---|---|---|
| le noir | Le noir | #000000 | |
| bleu | Bleu | # 0000FF | |
| fuchsia | Violet clair | # FF00FF | |
| grise | Gris foncé | #808080 | |
| vert | Vert | #008000 | |
| chaux | Vert clair | # 00FF00 | |
| bordeaux | Rouge foncé | #800000 | |
| marine | bleu marin | #000080 | |
| olive | olive | #808000 | |
| mauve | Violet foncé | #800080 | |
| rouge | rouge | # FF0000 | |
| argent | Gris clair | # C0C0C0 | |
| sarcelle | Bleu vert | #008080 | |
| blanche | blanche | #FFFFFF | |
| jaune | Jaune | #FFFF00 |
Peu importe la manière dont vous spécifiez la couleur - par son nom ou en utilisant des nombres hexadécimaux. Ces méthodes sont égales dans leur action. L'exemple 6.1 montre comment définir la couleur d'arrière-plan et de texte d'une page Web.
Exemple 6.1. Couleur du fond et du texte
Exemple de texte
DANS cet exemple la couleur de fond est définie à l'aide de l'attribut bgcolor de la balise
, et la couleur du texte via l'attribut text. Pour changer, la valeur de l'attribut text est définie comme un nombre hexadécimal, et pour bgcolor en utilisant le réservé mot-clé sarcelle.HEX/HTML
La couleur HEX n'est rien de plus qu'une représentation hexadécimale RVB.
Les couleurs sont représentées par trois groupes de chiffres hexadécimaux, où chaque groupe est responsable de sa propre couleur : # 112233, où 11 est rouge, 22 est vert, 33 est bleu. Toutes les valeurs doivent être comprises entre 00 et FF.
Dans de nombreuses applications, une forme abrégée de notation pour les couleurs hexadécimales est autorisée. Si chacun des trois groupes contient les mêmes caractères, par exemple # 112233, alors ils peuvent être écrits comme # 123.
- h1 (couleur : # ff0000 ;) / * rouge * /
- h2 (couleur : # 00ff00 ;) / * vert * /
- h3 (couleur : # 0000ff ;) / * bleu * /
- h4 (couleur : # 00f;) / * le même bleu, sténographie * /
RVB
L'espace colorimétrique RVB (Rouge, Vert, Bleu) se compose de toutes les couleurs possibles qui peuvent être obtenues en mélangeant le rouge, le vert et le bleu. Ce modèle est populaire dans la photographie, la télévision et l'infographie.
Les valeurs RVB sont spécifiées sous forme d'entier de 0 à 255. Par exemple, RVB (0,0,255) est affiché en bleu car le paramètre bleu est défini sur sa valeur la plus élevée (255) et le reste est défini sur 0.
Certaines applications (notamment les navigateurs Web) prennent en charge l'écriture en pourcentage des valeurs RVB (0 % à 100 %).
- h1 (couleur : rgb (255, 0, 0);) / * rouge * /
- h2 (couleur : rgb (0, 255, 0);) / * vert * /
- h3 (couleur : rgb (0, 0, 255) ;) / * bleu * /
- h4 (couleur : rgb (0%, 0%, 100%);) / * même bleu, pourcentage d'écriture * /
Les valeurs de couleur RVB sont prises en charge dans tous les principaux navigateurs.
RVBA
Récemment, les navigateurs modernes ont appris à travailler avec le modèle de couleur RGBA - une extension RVB prenant en charge un canal alpha qui détermine l'opacité d'un objet.
Une valeur de couleur RVBA est spécifiée comme : rgba (rouge, vert, bleu, alpha). Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).
- h1 (couleur : rgb (0, 0, 255) ;) / * bleu en RVB normal * /
- h2 (couleur : rgba (0, 0, 255, 1);) / * même bleu en RGBA, car opacité : 100% * /
- h3 (couleur : rgba (0, 0, 255, 0.5) ;) / * opacité : 50% * /
- h4 (couleur : rgba (0, 0, 255, .155) ;) / * opacité : 15,5% * /
- h5 (couleur : rgba (0, 0, 255, 0);) / * complètement transparent * /
RGBA est pris en charge dans IE9+, Firefox 3+, Chrome, Safari et Opera 10+.
Hsl
Le modèle de couleur HSL est une représentation cylindrique du modèle RVB. HSL représente les couleurs d'une manière plus intuitive et compréhensible que le RVB typique. Le modèle est souvent utilisé dans applications graphiques, dans les sélecteurs de couleurs et pour l'analyse d'images.
HSL signifie Hue, Saturation, Lightness / Luminance, à ne pas confondre avec la luminosité.
La teinte définit la position de la couleur sur la roue chromatique (de 0 à 360). La saturation est un pourcentage de saturation (0 % à 100 %). La luminosité est le pourcentage de luminosité (0 % à 100 %).
- h1 (couleur : hsl (120, 100 %, 50 %) ;) / * vert * /
- h2 (couleur : hsl (120, 100 %, 75 %);) / * vert clair * /
- h3 (couleur : hsl (120, 100 %, 25 %) ;) / * vert foncé * /
- h4 (couleur : hsl (120, 60 %, 70 %) ;) / * vert pastel * /
HSL est pris en charge dans IE9+, Firefox, Chrome, Safari et Opera 10+.
HSLA
Semblable à RGB / RGBA, HSL dispose d'un mode HSLA avec un canal alpha pour indiquer l'opacité d'un objet.
La valeur de couleur HSLA est donnée sous la forme : hsla (teinte, saturation, luminosité, alpha). Le paramètre alpha est un nombre allant de 0,0 (entièrement transparent) à 1,0 (entièrement opaque).
- h1 (couleur : hsl (120, 100 %, 50 %) ;) / * vert en HSL normal * /
- h2 (couleur : hsla (120, 100 %, 50 %, 1);) / * le même vert en HSLA, car opacité : 100 % * /
- h3 (couleur : hsla (120, 100 %, 50 %, 0,5) ;) / * opacité : 50 % * /
- h4 (couleur : hsla (120, 100 %, 50 %, .155) ;) / * opacité : 15,5 % * /
- h5 (couleur : hsla (120, 100%, 50%, 0);) / * complètement transparent * /
CMJN
Le modèle de couleur CMJN est souvent associé à l'impression couleur et à l'impression. Le CMJN (par opposition au RVB) est un modèle soustractif, ce qui signifie que des valeurs plus élevées sont associées à des couleurs plus sombres.
Les couleurs sont déterminées par le ratio Cyan, Magenta, Jaune, avec l'ajout de noir (Key / black).
Chacun des nombres qui définissent une couleur en CMJN représente le pourcentage d'encre d'une couleur donnée qui compose une combinaison de couleurs, ou plutôt, la taille d'un point de trame imprimé sur une photocomposeuse sur un film d'une couleur donnée (ou directement sur une plaque d'impression dans le cas du CTP).
Par exemple, pour obtenir la couleur PANTONE 7526, mélangez 9 parts de cyan, 83 de magenta, 100 de jaune et 46 de noir. Cela peut être indiqué comme suit : (9,83,100,46). Parfois, ils utilisent de telles désignations : C9M83Y100K46, ou (9%, 83%, 100%, 46%), ou (0,09 / 0,83 / 1,0 / 0,46).
HSB / HSV
Le HSB (également connu sous le nom de HSV) est similaire au HSL, mais ce sont deux modèles de couleurs différentes. Ils sont tous deux basés sur une géométrie cylindrique, mais le HSB/HSV est basé sur le modèle "hexcone", tandis que le HSL est basé sur le modèle "bi-hexcone". Les artistes préfèrent souvent utiliser ce modèle, il est généralement admis que le dispositif HSB/HSV est plus proche de la perception naturelle des couleurs. En particulier, le modèle de couleur HSB est utilisé dans Adobe Photoshop.
HSB / HSV signifie teinte, saturation, luminosité / valeur.
La teinte définit la position de la couleur sur la roue chromatique (de 0 à 360). La saturation est un pourcentage de saturation (0 % à 100 %). La luminosité est le pourcentage de luminosité (0 % à 100 %).
XYZ
Le modèle de couleur XYZ (CIE 1931 XYZ) est un espace purement mathématique. Contrairement aux modèles RVB, CMJN et autres, dans XYZ, les composants principaux sont « imaginaires », c'est-à-dire que vous ne pouvez pas associer X, Y et Z à un ensemble de couleurs à mélanger. XYZ est le modèle maître de presque tout le monde modèles de couleurs utilisé dans les domaines techniques.
LABORATOIRE
Le modèle colorimétrique LAB (CIELAB, "CIE 1976 L * a * b *") est calculé à partir de l'espace CIE XYZ. Lors du développement de Lab, l'objectif était de créer un espace colorimétrique dans lequel le changement de couleur sera plus linéaire du point de vue de la perception humaine (par rapport à XYZ), c'est-à-dire que le même changement de valeurs de coordonnées de couleur dans différentes régions de l'espace colorimétrique produisent la même sensation de changement de couleur.
>> Gestion des couleurs
Valeurs de couleur RVB hexadécimales
Les méthodes de description et de traitement des couleurs diffèrent les unes des autres par la présentation finale à laquelle elles sont destinées. Comparons, par exemple, les représentations des couleurs pour l'impression et pour les écrans d'ordinateur. Dans le premier cas, la base est prise blanche la couleur du papier, sur lequel trois couleurs primaires sont ensuite appliquées : bleu, mauve et jaune... Se mélangeant entre elles et avec la couleur blanche du papier dans des proportions différentes, ces trois couleurs primaires donnent des nuances de couleurs différentes, à l'exception du noir pur, ou, en l'absence totale de couleurs, donnent la couleur blanche du papier. Si nous leur ajoutons du noir, nous obtenons CMJN- une méthode de rendu des couleurs, lorsque la couleur recherchée est obtenue en soustrayant les couleurs manquantes du blanc.
Dans le second cas, la base est prise le noir la couleur de l'écran du moniteur, dont chaque cellule s'illumine dans l'une des trois couleurs suivantes : rouge-Rouge, vert-vert et bleu-bleu. Ensuite, en l'absence totale de toute lueur, nous obtenons une couleur d'écran noir pur, et l'une des couleurs requises est définie par le rapport de chacune des trois couleurs. Dans ce cas, on obtient RVB-la façon de transférer la couleur. Les couleurs primaires peuvent aller de 0
avant 255
, ou de 0%
avant 100%
, ou peut être représenté comme une valeur hexadécimale. Dans l'image ci-dessous, vous pouvez voir les résultats du mélange des couleurs primaires.
Le système de nombres hexadécimaux, contrairement au nombre décimal, dans sa rangée de chiffres n'a pas dix chiffres, mais seize - d'où le nom. En conséquence, les variantes non répétitives de combinaisons de deux chiffres ne peuvent être que - 256 , pour continuer une série de chiffres après 9 lettres de UNE avant F donc la série ressemblera à ceci -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
Dans ce cas, la couleur est spécifiée par trois nombres hexadécimaux, chacun composé de deux chiffres. Le premier nombre détermine l'intensité rouge couleurs, moyen vert, dernière chose- bleu couleurs. Tous les nombres peuvent prendre des valeurs comprises entre 00 avant FF(de 0 à 255). Par exemple : le vert est donné comme # 00FF00, rouge - comme # FF0000, bleu - comme # 0000FF, blanc - comme #FFFFFF, l'absence totale de couleur ou de noir est donnée comme #000000 .
Dans le formulaire ci-dessous, vous pouvez définir des valeurs hexadécimales pour chacune des trois couleurs et voir le résultat de leur mélange en cliquant dans le champ de sortie.
Des exemples de certains valeurs hexadécimales Couleurs RVB : dégradé de couleurs rouge, bleu et vert.
| vue | code | vue | code | vue | code | vue | code | vue | code | vue | code |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | # A00000 | #002000 | # 00A000 | #000020 | # 0000A0 | ||||||
| #300000 | # B00000 | #003000 | # 00B000 | #000030 | # 0000B0 | ||||||
| #400000 | # C00000 | #004000 | # 00C000 | #000040 | # 0000C0 | ||||||
| #500000 | # D00000 | #005000 | # 00D000 | #000050 | # 0000D0 | ||||||
| #600000 | # E00000 | #006000 | # 00E000 | #000060 | # 0000E0 | ||||||
| #700000 | # FF0000 | #007000 | # 00FF00 | #000070 | # 0000FF |
Spécification de la couleur à l'aide de littéraux de chaîne
Pour faciliter l'utilisation, certaines couleurs et leurs combinaisons ont reçu des noms reconnus par tous les navigateurs, et il est devenu possible de définir plusieurs d'entre elles par leur nom. Le tableau ci-dessous répertorie certains des noms de couleurs :
| vue | Nom | vue | Nom | vue | Nom | vue | Nom |
| blanche | rouge | Orange | Jaune | ||||
| Vert | Bleu | Mauve | Le noir | ||||
| Alicebleu | Blanc antique | Aqua | Bleu vert | ||||
| bleu azur | Beige | Bisque | Blanchedalmond | ||||
| bleu-violet | brun | Bois bohu | Cadetbleu | ||||
| Chartreuse | Chocolat | corail | Bleuet | ||||
| Soie de maïs | cramoisi | Cyan | Bleu foncé | ||||
| Cyan foncé | Verge d'or sombre | Gris foncé | Vert foncé | ||||
| Kaki foncé | magenta foncé | Vert olive foncé | Orange sombre | ||||
| Sombreorchidée | Rouge foncé | saumon noir | Vert d'eau foncé | ||||
| Darkslateblue | Darkslategrey | Turquoise foncé | violet foncé | ||||
| Rose profond | Bleu ciel profond | Dimgray | Dodgerblue | ||||
| Brique réfractaire | Floralblanc | Forêt verte | Fuschia | ||||
| Gainsboro | Blanc fantôme | Or | Verge d'or | ||||
| gris | Vert jaune | Miellat | Rose vif | ||||
| Indianred | Indigo | Ivoire | Kaki | ||||
| Lavande | Fard à joues lavande | Lemonchiffon | Bleu clair | ||||
| Corail clair | Cyan clair | Clairfroidrojaune | Vert clair | ||||
| Gris clair | Rose clair | saumon clair | Vert de mer clair | ||||
| Bleu ciel clair | Gris clair | Lightsteelblue | Jaune clair | ||||
| Chaux | Vert citron | Lin | Magenta | ||||
| Bordeaux | Aigue-marine moyenne | Bleu moyen | Médiumorchidée | ||||
| Violet moyen | Vert de mer moyen | Mediumardoisebleu | Vert printemps moyen | ||||
| Turquoise moyenne | Moyen-violet | Bleu nuit | Crème à la menthe | ||||
| Rose brumeuse | Navajoblanc | Marine | Oldlace | ||||
| olive | Olivedrab | Rouge-orange | Orchidée | ||||
| Verge d'or pâle | Vert pâle | Paléturquoise | Paleviolet | ||||
| Papayawhip | Peachpuff | Pérou | Rose | ||||
| Prune | Poudre bleue | Brun rosé | Bleu royal | ||||
| Brun de selle | Vert de mer | Coquillage | Terre de sienne | ||||
| Argent | Bleu ciel | Bleu ardoise | Gris ardoise | ||||
| Neige | Vert printanier | Bleu acier | bronzer | ||||
| Sarcelle | Chardon | Tomate | Turquoise | ||||
| Violet | Blé | Fumée blanche | Vert jaunâtre |
Utiliser un sélecteur de couleurs sécurisé
Malheureusement sur différentes plateformes, avec des paramètres système différents, la reproduction correcte des couleurs est un problème. Le fait est que le navigateur essaie toujours d'ajuster la palette de couleurs du document à les paramètres du système et surveiller les capacités par l'automélange et la substitution des couleurs. En conséquence, parfois l'utilisateur ne voit pas exactement ce que le webmaster voulait lui montrer. Un moyen de sortir de cette situation a été trouvé dans l'utilisation d'une palette, dont chaque couleur est garantie d'être rendue de la même manière par tous les navigateurs sur différentes plates-formes. C'est ce qu'on appelle garanti palette, aussi appelée en sécurité palette. Cette palette comprend des couleurs dont les composantes de couleur prennent les valeurs suivantes : 00 ,33 ,66 ,99 , CC,FF, dans tous les cas 216 leurs combinaisons.
| vue | code | vue | code | vue | code | vue | code | vue | code | vue | code |
| Fffffff | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | FCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Regardez attentivement le dessin. L'arrière-plan de la fenêtre déroulante est rendu semi-transparent. C'est une astuce de conception assez courante. Réfléchissons à la façon dont cela peut être mis en œuvre.
Une tâche
Créez une couleur semi-transparente sur plusieurs navigateurs.
Solution
La première pensée dans cette situation est d'utiliser une image png24 pour l'arrière-plan avec la translucidité déjà définie. Mais cette image est complètement superflue. Vous pouvez parfaitement vous en passer (et donc sans requête inutile au serveur). Essayons de trouver la solution optimale.
La deuxième pensée est d'utiliser. Mais dans ce cas, ce n'est pas très pratique. Après tout, non seulement l'arrière-plan deviendra translucide, mais aussi les inscriptions. Oui, en fait, toute la fenêtre à la fois.
Bien sûr, vous pouvez essayer d'ajouter un conteneur supplémentaire et de ne lui appliquer que de l'opacité, mais cet élément HTML ne servira qu'à la décoration et sera évidemment superflu. Pouvez-vous faire sans?
Bien sûr! Si vous utilisez RGBA.
Format de description de couleur RVBA
CSS3 vous permet de spécifier la couleur à l'aide des fonctions RVB et RVBA. En même temps, il faut indiquer la proportion de chaque composante de couleur, pour laquelle un octet est alloué (de 0 à 255, du coup, qui ne sait pas).
La syntaxe de ce cas est très simple :
Arrière-plan : rvb (0, 255, 0); / * vert pur * /
Pour RGBA, un quatrième paramètre est ajouté - la transparence alpha (de 0 à 1).
Fond : rgba (255, 0, 0, 0,5) ; / * rouge pur avec 50% de transparence * /
Voilà, la solution à notre problème. Il suffit de définir la couleur de fond en utilisant rgba et tout ressemblera à ce dont nous avons besoin. Pas d'images et d'éléments inutiles !
Où puis-je obtenir ces numéros ?
Vous pouvez regarder les composants de couleur à l'aide de l'outil Pipette dans Photoshop.
À propos de la compatibilité entre navigateurs
La fonction RGB étant bien plus ancienne que RGBA et présente depuis l'époque de la norme CSS2, vous pouvez utiliser la construction dupliquée suivante pour vous prémunir contre les navigateurs les plus anciens :
SomeBlock (fond : rgb (255, 0, 0); fond : rgba (255, 0, 0, 0.5 );)
Avec cette approche, les arrière-grands-pères des navigateurs modernes n'auront pas de translucidité, mais la couleur elle-même restera correcte.
Nous devrons nous occuper d'IE séparément. Les ânes ne comprennent pas le RGBA jusqu'à la version 8 incluse.
Comme toujours : la terre aux paysans, les usines aux ouvriers, et les ânes à la béquille ! Comme .
Bien sûr, dans des conditions de combat, nous mettons cette règle dans un CSS séparé, que nous connectons.
SomeBlock (arrière-plan : transparent ; filtre : progid : DXImageTransform.Microsoft.gradient (startColorstr = # 80ff0000, endColorstr = # 80ff0000) ; zoom : 1 ;)
L'astuce consiste à spécifier les couleurs de début et de fin de la même manière (ff0000 - rouge) et de profiter du fait que pour le dégradé dans ce filtre, vous pouvez définir le canal alpha (dans l'exemple, la valeur 80).
Pour référence : le filtre utilise système hexadécimal et la couleur complètement opaque correspond au code FF (en décimal c'est 255). Par conséquent, l'hexadécimal 80 est décimal 128, c'est-à-dire 50 % de transparence.
Enregistré:
- IE 6-9
- Firefox 3+
- Opéra 10+
- Safari 4
- Chrome
Les codes de couleur CSS sont utilisés pour spécifier une couleur. En règle générale, les codes de couleur ou les valeurs de couleur sont utilisés pour définir une couleur pour le premier plan d'un élément (par exemple, la couleur du texte, la couleur du lien) ou pour l'arrière-plan d'un élément (couleur d'arrière-plan, couleur du bloc). Ils peuvent également être utilisés pour changer la couleur d'un bouton, d'une bordure, d'un marqueur, d'un survol et d'autres effets décoratifs.
Vous pouvez définir vos propres valeurs de couleur dans différents formats. Le tableau suivant répertorie tous les formats possibles :
Les formats répertoriés sont décrits plus en détail ci-dessous.
Couleurs CSS - codes hexadécimaux
Code couleur hexadécimal est une représentation de couleur à six chiffres. Les deux premiers chiffres (RR) sont la valeur rouge, les deux suivants sont la valeur verte (GG) et les deux derniers sont la valeur bleue (BB).
Couleurs CSS - Codes hexadécimaux courts
Code couleur hexadécimal court est une forme plus courte de notation à six chiffres. Dans ce format, chaque chiffre est répété pour produire la valeur de couleur équivalente à six chiffres. Par exemple : # 0F0 devient # 00FF00.
La valeur hexadécimale peut être extraite de n'importe quel graphique Logiciel comme Adobe Photoshop, Core Draw, etc.
Chaque code de couleur hexadécimal en CSS sera précédé d'un signe dièse "#". Voici des exemples d'utilisation de la notation hexadécimale.
Couleurs CSS - Valeurs RVB
Valeur RVB est le code de couleur, qui est défini à l'aide de la propriété rgb (). Cette propriété prend trois valeurs, une pour le rouge, le vert et le bleu. La valeur peut être un entier, de 0 à 255, ou un pourcentage.
Noter: tous les navigateurs ne prennent pas en charge la propriété de couleur rgb (), il n'est donc pas recommandé de l'utiliser.
Vous trouverez ci-dessous un exemple montrant plusieurs couleurs utilisant des valeurs RVB.
Générateur de code couleur
Vous pouvez créer des millions de codes couleurs en utilisant notre service.
Couleurs de navigateur sécurisées
Vous trouverez ci-dessous un tableau de 216 couleurs qui sont les plus sûres et les plus indépendantes de l'ordinateur. Ces couleurs CSS vont de 000000 à FFFFFF hexadécimal. Ils sont sûrs à utiliser car ils garantissent que tous les ordinateurs affichent correctement les couleurs lorsqu'ils travaillent avec une palette de 256 couleurs.
| Table de couleurs CSS "sûre" | |||||
| #000000 | #000033 | #000066 | #000099 | # 0000CC | # 0000FF |
| #003300 | #003333 | #003366 | #003399 | # 0033CC | # 0033FF |
| #006600 | #006633 | #006666 | #006699 | # 0066CC | # 0066FF |
| #009900 | #009933 | #009966 | #009999 | # 0099CC | # 0099FF |
| # 00CC00 | # 00CC33 | # 00CC66 | # 00CC99 | # 00CCCC | # 00CCFF |
| # 00FF00 | # 00FF33 | # 00FF66 | # 00FF99 | # 00FFCC | # 00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | # 3366CC | # 3366FF |
| #339900 | #339933 | #339966 | #339999 | # 3399CC | # 3399FF |
| # 33CC00 | # 33CC33 | # 33CC66 | # 33CC99 | # 33CCCC | # 33CCFF |
| # 33FF00 | # 33FF33 | # 33FF66 | # 33FF99 | # 33FFCC | # 33FFFF |
| #660000 | #660033 | #660066 | #660099 | # 6600CC | # 6600FF |
| #663300 | #663333 | #663366 | #663399 | # 6633CC | # 6633FF |
| #666600 | #666633 | #666666 | #666699 | # 6666CC | # 6666FF |
| #669900 | #669933 | #669966 | #669999 | # 6699CC | # 6699FF |
| # 66CC00 | # 66CC33 | # 66CC66 | # 66CC99 | # 66CCCC | # 66CCFF |
| # 66FF00 | # 66FF33 | # 66FF66 | # 66FF99 | # 66FFCC | # 66FFFF |
| #990000 | #990033 | #990066 | #990099 | # 9900CC | # 9900FF |
| #993300 | #993333 | #993366 | #993399 | # 9933CC | # 9933FF |
| #996600 | #996633 | #996666 | #996699 | # 9966CC | # 9966FF |
| #999900 | #999933 | #999966 | #999999 | # 9999CC | # 9999FF |
| # 99CC00 | # 99CC33 | # 99CC66 | # 99CC99 | # 99CCCC | # 99CCFF |
| # 99FF00 | # 99FF33 | # 99FF66 | # 99FF99 | # 99FFCC | # 99FFFF |
| #CC0000 | # CC0033 | # CC0066 | # CC0099 | #CC00CC | # CC00FF |
| # CC3300 | # CC3333 | # CC3366 | # CC3399 | #CC33CC | # CC33FF |
| # CC6600 | # CC6633 | # CC6666 | # CC6699 | #CC66CC | # CC66FF |
| #CC9900 | # CC9933 | # CC9966 | # CC9999 | #CC99CC | # CC99FF |
| # CCCC00 | # CCCC33 | # CCCC66 | # CCCC99 | #CCCCCC | #CCCCFF |
| # CCFF00 | # CCFF33 | # CCFF66 | # CCFF99 | #CCFFCC | #CCFFFF |
| # FF0000 | # FF0033 | # FF0066 | # FF0099 | # FF00CC | # FF00FF |
| #FF3300 | # FF3333 | # FF3366 | # FF3399 | #FF33CC | # FF33FF |
| # FF6600 | # FF6633 | # FF6666 | # FF6699 | # FF66CC | # FF66FF |
| # FF9900 | # FF9933 | # FF9966 | # FF9999 | #FF99CC | # FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
