Les codes de couleur dans CSS sont utilisés pour indiquer la couleur. En règle générale, les codes de couleur ou les valeurs de couleur sont utilisés pour installer la couleur ou pour le premier plan de l'élément (par exemple, la couleur du texte, la référence) ou pour l'arrière-plan de l'élément (couleur d'arrière-plan, bloc). Ils peuvent également être utilisés pour changer la couleur du bouton, des bordures, du marqueur, du guidage et d'autres effets décoratifs.
Vous pouvez définir vos valeurs de couleur dans divers formats. Le tableau suivant répertorie tous les formats possibles:
Ci-dessous plus en détail, les formats énumérés sont décrits.
CSS couleurs - codes hexadécimaux
Code de couleur SUPERENT - Ceci est une présentation de couleur à six chiffres. Les deux premiers chiffres (RR) sont une valeur rouge, les deux suivantes sont une valeur verte (GG) et celle-ci est une valeur bleue (BB).
CYS CSS - Codes hexagonales courts
Code de couleur hexagonale courte - Il s'agit d'une forme plus courte de notation à six chiffres. Dans ce format, chaque chiffre est répété pour obtenir une valeur de couleur équivalente à six chiffres. Par exemple: # 0f0 devient # 00FF00.
La valeur hexadécimale peut être prise à partir de tout graphique logiciel, tel que Adobe Photoshop., Core Draw et al.
Chaque collier hexadécial en CSS sera précédé par le signe Hesha "#". Vous trouverez ci-dessous des exemples d'utilisation des désignations hexadécimales.
CSS Colors - Valeurs RVB
Valeur RVB - Ceci est un code de couleur défini à l'aide de la propriété RVB (). Cette propriété prend trois valeurs: une pour le rouge, le vert et le bleu. La valeur peut être un entier compris entre 0 et 255, ou pourcentage.
Noter: Tous les navigateurs ne prennent pas en charge les propriétés des couleurs RVB (), 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 de couleur
Vous pouvez créer des millions de codes de couleur à l'aide de notre service.
Couleurs de navigateur sécurisées
Vous trouverez ci-dessous une table de 216 couleurs les plus sécurisées et indépendantes de l'ordinateur. Ces couleurs dans CSS vont de 000000 à la FFFFFF du code hexadécimal. Ils sont en sécurité à utiliser, car ils garantissent que tous les ordinateurs affichent correctement la couleur lorsqu'ils travaillent avec 256 palettes de couleurs.
| Table "Safe" Couleurs dans CSS | |||||
| #000000 | #000033 | #000066 | #000099 | # 0000cc | # 0000FF. |
| #003300 | #003333 | #003366 | #003399 | # 0033cc | # 0033FF. |
| #006600 | #006633 | #006666 | #006699 | # 0066cc | # 0066FF. |
| #009900 | #009933 | #009966 | #009999 | # 0099cc. | # 0099F. |
| # 00cc00. | # 00cc33. | # 00cc66. | # 00cc. | # 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 | # 3399F. |
| # 33cc00. | # 33cc33 | # 33cc66. | # 33cc. | # 33CCCC. | # 33CFFF. |
| # 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. | # 66CFFF. |
| # 66FF00. | # 66FF33. | # 66FF66. | # 66FF99. | # 66FFCC | # 66FFFF. |
| #990000 | #990033 | #990066 | #990099 | # 9900CC | # 9900FF. |
| #993300 | #993333 | #993366 | #993399 | # 9933C. | # 9933FF. |
| #996600 | #996633 | #996666 | #996699 | # 9966CC | # 9966FF. |
| #999900 | #999933 | #999966 | #999999 | # 9999CC | # 9999FF. |
| # 99cc00. | # 99cc33 | # 99cc66 | # 99CC99. | # 99CCCC. | # 99CFFF. |
| # 99FF00. | # 99FF33 | # 99FF66. | # 99FF99. | # 99FCCC | # 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. |
| # CCC00. | # 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 | #FFCCCCC | #Ffcffff. |
| # Ffff00. | # Ffff33 | # Ffff66 | # FFFFF99. | #Ffffcc | #Ffffff. |
Vlad merzehevich
Dans HTML, la couleur est définie par l'une des deux manières: avec l'aide d'un code hexadécimal et par le nom de certaines couleurs. Méthode principalement utilisée basée sur système hexadécimal calcul comme le plus universel.
Couleurs hexagonales
Pour définir des couleurs dans HTML, les numéros sont utilisés dans le code hexadécimal. Le système hexadécimal, contrairement au système décimal, est basé sur son nom, parmi le numéro 16. Les chiffres seront les suivants: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Les chiffres de 10 à 15 sont remplacés par des lettres latines. Dans l'onglet. 6.1 La correspondance des nombres décimaux et hexadécimaux est donnée.
Les chiffres sont plus de 15 dans le système hexadécimal sont formés par la combinaison de deux nombres dans un (tableau 6.2). Par exemple, le nombre 255 dans le système décimal correspond au nombre FF en hexadécimal.
Afin de ne pas confondre la confusion dans la définition du système de numéros, le symbole de la grille est défini avant hexadécimal, par exemple # AA69CC. Dans ce cas, le registre n'a pas d'importance, il est donc permis d'écrire # f0f0f0 ou # f0f0f0.
La couleur typique utilisée en HTML est la suivante.
Ici, la couleur de la page Web est définie comme # FA8E47. Le symbole du réseau # devant le nombre signifie qu'il est hexadécimal. Les deux premiers chiffres (FA) déterminent le composant rouge des couleurs, les chiffres avec le troisième au quatrième (8e) - vert et les deux derniers chiffres (47) - bleu. En conséquence, il ira une telle couleur.
| FA. | + | 8e. | + | 47 | = | Fa8e47. |
Chacune des trois couleurs est rouge, verte et bleue - peut prendre des valeurs de 00 à FF, qui forme finalement 256 nuances. Ainsi, le nombre total de couleurs peut être 256x256x256 \u003d 16.777.216 Combinaisons. Le modèle de couleur basé sur le composant rouge, vert et bleu s'appelait RVB (rouge, vert, bleu; rouge, vert, bleu). Ce modèle est additif (à partir d'Add-Tolay), dans lequel l'ajout de tous les trois composants formes blanche.
Pour faciliter la navigation dans des couleurs hexadécimales, prenez en compte certaines règles.
- Si les valeurs du composant de couleur sont les mêmes (par exemple: # D6D6D6), il s'avère une nuance grise. Plus le nombre, la couleur plus claire, les valeurs changent de # 000000 (noir) à #ffffff (blanc).
- La couleur rouge vif est formée si le composant rouge est effectué maximum (FF) et la réinitialisation des composants restants. La couleur avec la valeur # FF0000 est la plus rouge des nuances rouges possibles. C'est la même chose avec vert (# 00FF00) et bleu (# 0000ff).
- Le jaune (# FFFF00) est obtenu en mélangeant rouge avec vert. Il est clairement visible dans le cercle de couleur (fig. 6.1), où les couleurs principales (rouge, vert, bleu) et complémentaires sont présentées ou complémentaires. Ceux-ci incluent le jaune, le bleu et le violet (toujours appelé violet). En général, toute couleur peut être obtenue en mélangeant les fleurs près de lui. Ainsi, le bleu (# 00FFFF) est obtenu en combinant bleu et vert.
Figure. 6.1. Cercle de couleur
Les couleurs des valeurs hexadécimales ne sélectionnent pas nécessairement de manière empirique. À cet effet correspondra éditeur graphiqueCapable de travailler avec des modèles de couleurs différents, tels que Adobe Photoshop. En figue. 6.2 Affichage d'une fenêtre Pour sélectionner la couleur Dans ce programme, la ligne a encerclé la valeur hexadécimale résultante de la couleur actuelle. Il peut être copié et collé à mon code.
Figure. 6.2. Fenêtre pour sélectionner la couleur dans programme Photoshop
Couleurs Web
Si vous définissez la qualité de la rendu de couleur du moniteur en 8 bits (256 couleurs), la même couleur peut apparaître dans différents navigateurs à sa manière. Cela est dû à la méthode d'affichage des graphiques, lorsque le navigateur travaille avec sa propre palette et ne peut pas montrer la couleur qu'il n'a pas dans la palette. Dans ce cas, la couleur est remplacée par une combinaison de pixels d'autre, près de celle-ci, des couleurs qui imitent les spécifiées. Pour que la couleur reste inchangée dans différents navigateurs, introduisez la palette des couleurs Web. Les sites Web sont appelés de telles couleurs pour chaque composant - rouge, vert et bleu - une des six valeurs est installée - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Entre parenthèses, la valeur hexadécimale de ce composant est indiquée. Le nombre total de couleurs de toutes les combinaisons possibles donne 6x6x6 - 216 couleurs. Exemple de couleur Web - # 33FF66.
La caractéristique principale de la toile Web est qu'il est montré de manière égale dans tous les navigateurs. Pour le moment, la pertinence des couleurs Web est assez faible en raison de l'amélioration de la qualité des moniteurs et de développer leurs capacités.
Couleurs par nom
Afin de ne pas mémoriser l'ensemble des chiffres, vous pouvez utiliser les noms de couleurs généralisées à la place. Dans l'onglet. 6.3 montre les noms des noms de couleurs populaires.
| Nom de couleur | Couleur | La description | Hexadécimal |
|---|---|---|---|
| noir. | Le noir | #000000 | |
| bleu | Bleu | # 0000FF. | |
| fuchsia. | Violet clair | # FF00FF. | |
| gris. | Gris foncé | #808080 | |
| vert. | Vert | #008000 | |
| chaux | Vert clair | # 00FF00. | |
| bordeaux. | Rouge foncé | #800000 | |
| mARINE. | Bleu foncé | #000080 | |
| olive. | olive | #808000 | |
| mauve. | Violette | #800080 | |
| rouge | rouge | # Ff0000. | |
| argent | Gris clair | # C0c0c0. | |
| sarcelle | Vert sine | #008080 | |
| blanc | blanc | #Ffffff. | |
| jaune | Jaune | # Ffff00. |
Peu importe la façon dont vous définissez la couleur - par son nom ou avec des chiffres hexadécimaux. En ce qui concerne son action, ces voies sont égales. Exemple 6.1 montre comment définir la couleur de l'arrière-plan et du texte de la page Web.
Exemple 6.1. Fond de couleur et texte
Exemple de texte
DANS cet exemple La couleur de fond est définie à l'aide de l'attribut BGColor Tag
et la couleur du texte via l'attribut de texte. Pour une variété, la valeur de l'attribut de texte est installée en tant que numéro hexadécimal et BGColor a un mot clé réservé Teal.Hex / html.
La couleur au format hexagone n'est rien comme une représentation hexadécimale RVB.
Les couleurs sont présentées sous la forme de trois groupes de nombres hexadécimaux, où chaque groupe est responsable de sa couleur: # 112233, où 11 - rouge, 22 - vert, 33 - bleu. Toutes les valeurs doivent être comprises entre 00 et ff.
De nombreuses applications permettent une forme abrégée d'enregistrement de couleurs hexadécimales. Si chacun des trois groupes contient les mêmes caractères, par exemple # 112233, ils peuvent être écrits comme n ° 123.
- h1 (couleur: # FF0000;) / * rouge * /
- h2 (couleur: # 00FF00;) / * vert * /
- h3 (couleur: # 0000ff;) / * bleu * /
- h4 (couleur: # 00f;) / * La même entrée bleue et abrégée * /
Rvb.
L'espace colorimétrique RVB (rouge, vert, bleu) est constitué de toutes les couleurs possibles pouvant être obtenues en mélangeant rouge, vert et bleu. Ce modèle est populaire dans la photographie, la télévision et les graphiques informatiques.
Les valeurs RVB sont définies par un entier de 0 à 255. Par exemple, RGB (0,0.255) est affichée en bleu, car le paramètre bleu est défini sur sa valeur la plus élevée (255) et le reste est réglé sur 0.
Certaines applications (en particulier les navigateurs Web) prennent en charge le pourcentage de valeurs RVB (de 0% à 100%).
- h1 (Couleur: RVB (255, 0, 0);) / * rouge * /
- h2 (Couleur: RVB (0, 255, 0);) / * vert * /
- h3 (couleur: rvb (0, 0, 255);) / * bleu * /
- h4 (Couleur: RVB (0%, 0%, 100%);) / * Même bleu, record d'intérêt * /
Les valeurs de couleur RVB sont prises en charge dans tous les grands navigateurs.
Rgba
Récemment, les navigateurs modernes ont appris à travailler avec la couleur modèle rvb.A - L'extension RVB avec le support du canal alpha détermine l'opacité de l'objet.
La valeur de couleur RGBA est définie comme RGBA (rouge, vert, bleu, alpha). Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) à 1,0 (complètement opaque).
- h1 (Couleur: RVB (0, 0, 255);) / * bleu dans le RVB * /
- h2 (Couleur: RGBA (0, 0, 255, 1);) / * Le même bleu de RGBA, car opacité: 100% * /
- h3 (Couleur: RGBA (0, 0, 255, 0.5);) / * Opacité: 50% * /
- h4 (Couleur: RGBA (0, 0, 255, 0,155);) / * Opacité: 15,5% * /
- h5 (couleur: rgba (0, 0, 255, 0);) / * entièrement 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 du modèle RVB dans le système cylindrique de coordonnées. HSL présente les couleurs plus intuitives et compréhensibles de percevoir la manière que la RVB typique. Le modèle est souvent utilisé dans applications graphiques, dans des palettes de couleurs et analyser des images.
HSL est déchiffré comme une teinte (couleur / teinte), saturation (saturation), légèreté / luminance (Svetlota / légèreté / luminativité, à ne pas confondre avec la luminosité).
Hue définit la position de couleur sur le cercle de couleur (de 0 à 360). La saturation est un pourcentage de saturation (de 0% à 100%). La légèreté est le pourcentage de légèreté (de 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
Par analogie avec RGB / RGBA, HSL a le mode HSLA avec un support de canal alpha pour indiquer l'opacité de l'objet.
La valeur de couleur HSLA est définie comme HSLA (teinte, saturation, légèreté, alpha). Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) à 1,0 (complètement opaque).
- h1 (Couleur: HSL (120, 100%, 50%, 50%);) / * Green in the Usual HSL * /
- 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);) / * Entièrement transparent * /
Cmyk.
Le modèle de couleur CMJN est souvent associé à une impression couleur, avec polygraphie. CMYK (Contrairement à 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 rapport bleu (cyan), violet (magenta), jaune (jaune), avec l'addition de noir (clé / noir).
Chacun des chiffres définissant la couleur de CMYK est le pourcentage de peinture de cette couleur, ce qui constitue la combinaison de couleurs, ou plutôt la taille du point raster affiché sur la machine photophonaton sur le film de cette couleur (ou directement sur le forme imprimée dans le cas de CTP).
Par exemple, pour obtenir une couleur "Pantone 7526", 9 parties de peinture bleue doivent être mélangées, 83 morceaux de peinture pourpre, 100 - peinture jaune et 46 - Noir. Cela peut être désigné comme suit: (9 83 100,46). Parfois, ils utilisent cette notation: C9M83Y100K46, ou (9%, 83%, 100%, 46%), ou (0,09 / 0,83 / 1,0 / 0,46).
HSB / HSV.
HSB (également appelé HSV) est similaire à HSL, mais ce sont deux modèles de couleurs différents. Ils sont tous deux basés sur la géométrie cylindrique, mais HSB / HSV est basé sur le modèle "HexCone", tandis que HSL est basé sur le modèle BI-HEXCONE. Les artistes préfèrent souvent utiliser ce modèle, on pense que le périphérique 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 est déchiffré comme une teinte (couleur / teinte), saturation (saturation), luminosité / valeur (luminosité / valeur).
Hue définit la position de couleur sur le cercle de couleur (de 0 à 360). La saturation est un pourcentage de saturation (de 0% à 100%). La luminosité est un pourcentage de luminosité (de 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 d'autres modèles, dans XYZ, les composants principaux sont "imaginaires", c'est-à-dire que vous ne pouvez pas relier x, y et z avec n'importe quel ensemble de couleurs pour le mélange. XYZ est un modèle maître de presque tous les autres modèles de couleurs utilisés dans les champs techniques.
Laboratoire
Le laboratoire de modèle de couleur (CIEAB, "CIE 1976 L * A * B *") est calculé à partir de l'espace CIE XYZ. Lors du développement de laboratoire, le but de créer un espace de couleur a été poursuivi, un changement de couleur dans lequel il serait plus linéaire du point de vue de la perception humaine (comparé à XYZ), c'est-à-dire que la même modification des valeurs de coordonnées de la couleur Dans différents champs d'espace de couleur produisit la même sensation de changement de couleur.
\u003e\u003e Gestion des couleurs
Valeurs de couleur hex RVB
Les méthodes de décrivant et de traitement de la couleur diffèrent les unes des autres pour quelle représentation finale est destinée. Comparez, par exemple, présentation des couleurs d'impression et de moniteurs informatiques. Dans le premier cas, la base est prise blanc La couleur du papier sur laquelle trois couleurs principales sont appliquées: bleu, mauve et jaune. Mélanger entre eux et avec du papier blanc dans des proportions différentes, ces trois couleurs principales donnent diverses nuances de couleur, à l'exception du noir propre ou d'absence totale de peintures donnent du papier de couleur blanche. Si vous y en ajoutez plus et en noir, nous obtenons Cmyk.renvoyé à un transfert de couleur, lorsque la couleur requise est obtenue en soustrayant des couleurs manquantes blanches.
Dans le second cas, la base est acceptée le noir La couleur de l'écran du moniteur, dont chaque cellule est brillante dans l'une des trois couleurs: rouge-rouge, vert.-Sélectionnez I. bleu-bleu. Ensuite, avec l'absence totale de tout lueur, nous obtenons une couleur d'écran noire pure et toutes les couleurs requises sont données par le rapport de chacune des trois couleurs. Dans ce cas, nous obtenons Rvb.se référant à la couleur de la couleur. Les couleurs de base peuvent compter de 0
avant que 255
, ou ot 0%
avant que 100%
Ou peut être présenté sous la forme d'hexadécimal. Dans la figure ci-dessous, vous pouvez voir les résultats de mélanger les couleurs principales.
Le système de nombres hexadécimaux, contrairement à la décimale de sa rangée, les chiffres n'ont pas dix signes, mais seize - d'où le nom. En conséquence, des variantes non répétées de combinaisons de deux chiffres ne peuvent être que: 256 , pour continuer un certain nombre de chiffres après 9 Les lettres sont utilisées UNE. avant que F., par conséquent, la ligne ressemblera à ça -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
Dans ce cas, la couleur est définie par trois nombres hexadécimaux, dont chacun consiste en deux chiffres. Le premier numéro détermine l'intensité rouge Couleurs, moyenne vert, dernière chose- saint couleurs. Tous les chiffres peuvent prendre des valeurs dans la gamme de 00 avant que Ff. (de 0 à 255). Par exemple: la couleur verte est définie comme # 00FF00., rouge - comme # Ff0000., bleu - comme # 0000FF., blanc - comment #Ffffff., une absence complète de couleur ou de noir est définie comme #000000 .
Dans le formulaire ci-dessous, vous pouvez spécifier toutes les valeurs hexadécimales de chacune des trois couleurs et voir le résultat de leur mélange en cliquant dans le champ de sortie.
Exemples de valeurs hexadécimales de couleurs RVB: l'obtention du diplôme de couleurs rouges, bleues et vertes.
| vue | le code | vue | le code | vue | le code | vue | le code | vue | le code | vue | le 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. |
Couleur de tâches avec littéraux minuscules
Pour la commodité d'utiliser certaines couleurs et leurs combinaisons, les noms ont été attribués à tous les navigateurs et la possibilité de leur demander beaucoup d'entre eux. Le tableau ci-dessous montre certains des noms des couleurs:
| vue | nom | vue | nom | vue | nom | vue | nom |
| blanc | rouge | Orange. | Jaune | ||||
| Vert. | Bleu | Mauve. | Noir. | ||||
| Aliceblue. | Blanc antique. | Aqua. | Bleu vert | ||||
| Bleu azur. | Beige | BISQUE. | Blanchhedalmond. | ||||
| Blueviolet. | Marron. | Bois bohu. | CadetBlue. | ||||
| Chartreuse | Chocolat. | corail | Bleuet. | ||||
| Soie de maïs. | Cramoisi. | Cyan. | Bleu foncé | ||||
| Darkcyan. | Darkgoldenrod. | Gris foncé. | Vert foncé. | ||||
| Darkkhaki. | Darkmagenta. | DarkoliveGreen. | Orange sombre. | ||||
| Darkorchid | Rouge foncé. | Darksalmon. | DarkSeagreen. | ||||
| Darkslateblue | DarkslateGray. | DarkTurquoise. | Sombrevolet. | ||||
| Rose profond. | Deeptskyblue | Gradateur. | Dodgerblue. | ||||
| Foyer | Floraldwhite. | Forêt verte. | Fuschia. | ||||
| Gainsboro. | Ghostwhite. | OR. | Goldenrod. | ||||
| Gris. | Vert jaune. | Miellat | Rose vif | ||||
| Indided. | Indigo. | Ivoire. | Kaki. | ||||
| Lavande. | Lavenderblush. | Lémonchiffon. | Bleu clair | ||||
| Lumineux | Cyan clair. | LightColdenradyellowerellower | Vert clair. | ||||
| Gris clair. | Rose clair. | LightsAlleMon. | SmebleAgreen. | ||||
| LightskyBlue. | LightsLateGray. | Lightselblue. | Jaune clair | ||||
| Chaux | Vert citron. | Lin. | Magenta. | ||||
| Bordeaux. | Midiaquamarine | Mediumblue. | Moyenneorchid | ||||
| Mediumpupe. | MédiocreeAgreen | Moyennelateblue | Moyennepringgcreen | ||||
| Midituloise | MediumVioletDred. | Bleu nuit. | Mintcream | ||||
| MISTYROSE. | Navajowhite. | MARINE. | OLDLACE. | ||||
| Olive. | Olivedrab | Rouge-orange | Orchidée | ||||
| Palegoldenrod. | Vert pâle. | Paleturquoise. | Palevioled. | ||||
| Papaawhip. | Pêcher | Pérou. | ROSE. | ||||
| Prune. | Poudre bleue. | Rosybrown. | Bleu royal. | ||||
| Saddlebrown. | Seagreen. | Coquillage. | Terre de sienne. | ||||
| Argent | Bleu ciel. | Slateblue | GRIS ARDOISE. | ||||
| Neige | Vert printanier. | SteelBlue. | Bronzer. | ||||
| Sarcelle | Chardon | Tomate. | Turquoise. | ||||
| Violet. | Du blé. | Fumée blanche | Vert jaunâtre |
En utilisant une palette de couleurs sécurisée
Malheureusement, sur différentes plates-formes, avec différents paramètres du système, la transmission de couleurs correcte est un problème. La chose est que le navigateur essaie toujours d'ajuster la palette de couleurs du document sous les paramètres du système Et la capacité du moniteur, par des couleurs auto-mélangées et leur substitution. En conséquence - Parfois, l'utilisateur ne voit pas exactement ce qu'il voulait montrer un maître Web. La sortie de cette situation a été trouvée dans l'utilisation de la palette, dont chaque couleur est garantie pour être transmise de manière égale par tous les navigateurs sur différentes plates-formes. C'est le soi-disant garanti Palette l'a toujours appelée sûr palette. Cette palette comprend des couleurs, dont les composants de couleur, prennent les valeurs suivantes: 00 ,33 ,66 ,99 , Cc.,Ff.dans tout ce possible 216 leurs combinaisons.
| vue | le code | vue | le code | vue | le code | vue | le code | vue | le code | vue | le code |
| Ffffff. | CCCCCC. | 999999 | 666666 | 333333 | 000000 | ||||||
| CCC66. | CCCC33. | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66. | CCFF00. | Ccff33 | 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. | 00cc. | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF. | 99FFFF. | 66FFFF. | 33FFFF. | 00ffff. | 00cccc. | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CFFF. | 33CFFF | 00ccff. | 3399CC. | 0099cc. | 003333 | ||||||
| 99CFFF. | 3399F. | 0099F. | 6699cc | 336699 | 006699 | ||||||
| 0066FF. | 3366CC | 0066cc. | 0033FF. | 003399 | 003366 | ||||||
| 6699F. | 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. | 6633C | 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. | Fff99. | Ffff66. | Ffff33. | Ffff00. | CCCC00. |
La couleur de la langue CSS peut être définie différentes façons:
- par titre,
- en valeur hexadécimale
- dans les formats RVB et RGBA,
- dans les formats HSL et HSLA.
Couleur de tâches par nom
Les navigateurs prennent en charge l'indication de certaines couleurs aux noms par des noms. Dans ce tableau certains mots clés (Noms de couleur anglais) Utilisé pour définir les propriétés de couleur, le code RVB, le code hexadécimal (HEX) et le code HSL.
| Nom | Couleur | Rvb. | Hexagonal. | Hsl. | La description |
|---|---|---|---|---|---|
| blanc | rVB (255, 255, 255) | #Fffffff ou #fff. | hSL (0, 0%, 100%) | blanc | |
| argent | rVB (192, 192, 192) | # C0c0c0. | hSL (0, 0%, 75%) | Gris | |
| gris. | rVB (128, 128, 128) | #808080 | hSL (0, 0%, 50%) | Gris foncé | |
| noir. | rvb (0, 0, 0) | # 000000 ou #000 | hsl (0, 0%, 0%) | Le noir | |
| bordeaux. | rvb (128, 0, 0) | #800000 | hSL (0, 100%, 25%) | Rouge foncé | |
| rouge | rvb (255, 0, 0) | # Ff0000 ou # f00 | hSL (0, 100%, 50%) | rouge | |
| orange | rVB (255, 165, 0) | # FFA500. | hSL (38,8, 100%, 50%) | Orange | |
| jaune | rVB (255, 255, 0) | # Ffff00 ou # ff0 | hSL (60, 100%, 50%) | Jaune | |
| olive. | rVB (128, 128, 0) | #808000 | hSL (60, 100%, 25%) | olive | |
| chaux | rvb (0, 255, 0) | # 00FF00 ou # 0f0 | hSL (120, 100%, 50%) | Vert clair | |
| vert. | rvb (0, 128, 0) | #008000 | hSL (120, 100%, 25%) | Vert | |
| aqua. | rvb (0, 255, 255) | # 00ffff ou # 0ff | hSL (180, 100%, 50%) | Bleu | |
| bleu | rvb (0, 0, 255) | # 0000ff ou # 00f | hSL (240, 100%, 50%) | Bleu | |
| mARINE. | rVB (0,0,128) | #000080 | hSL (240, 100%, 25%) | Bleu foncé | |
| sarcelle | rVB (0, 128, 128) | #008080 | hSL (180, 100%, 25%) | Vert sine | |
| fuchsia. | rvb (255, 0, 255) | # FF00FF ou # F0F | hSL (300, 100%, 50%) | Rose | |
| mauve. | rVB (128, 0, 128) | #800080 | hSL (300, 100%, 25%) | Mauve |
Il s'agit d'un échantillon d'utilisation des noms des couleurs, les pauses des couleurs sont extraites de la table étendue.
Voici comment ce code fonctionne:
Définir la couleur en utilisant rgb
RVB est un modèle de couleur additif. Sur le langue Anglaise uNE ADDITION - Ajouter. RVB est une abréviation de mots anglais: rouge, vert, bleu - rouge, vert, bleu). De là, il est clair que les modèles RVB sont synthétisés en ajoutant trois couleurs (rouge, vert, bleu) de différentes quantités.
Le mélange de couleur rouge, vert et bleu peut être obtenu plusieurs millions de nuances. Toutes les combinaisons possibles sont stockées dans la mémoire des ordinateurs.
Plus proche des affaires.
Pour définir les propriétés de ce format, l'enregistrement RVB (R, G, B) est utilisé, où R, G, B est trois canaux pour chaque couleur (rouge, vert, bleu). Les valeurs de chaque canal sont définies dans la plage de 0 à 255.
Exemple de code.
Pour préciser, je vais donner un exemple de code:
C'est ainsi que cet exemple devrait fonctionner:
Fig. 1. Couleurs dans RVB. Explications par exemple.
Au début de la page, je crée une classe div.rgb, il a besoin des blocs créés par la balise
Ensuite, dans le jeu de code couleur de l'arrière plan Blok
Essayez d'éditer cet exemple et de spécifier vos valeurs, telles que RVB (100, 100, 100).
Définir la couleur en utilisant rgba
À CSS3 est apparu nouvel outil Travailler avec la couleur - format RGBA. On peut appeler le développement du modèle RVB, mais avec l'ajout d'un nouveau canal - un canal alpha. Ce canal établit la transparence des couleurs. Ses valeurs sont définies dans la plage de 0 à 1. La valeur de 0 correspond à une transparence complète, une opacité complète (la couleur sera aussi spécifiée dans trois premiers Canaux RVB) et les valeurs intermédiaires, telles que 0,4 ou 0,6 - translucidité à des degrés divers.
Exemple de code.
C'est ainsi que cela fonctionnera:
Ce code à sa manière représentation visuelle Semblable à ce qui suit à l'aide du modèle RVB pour définir la valeur de couleur:
Voici son résultat:
La valeur de canal alpha égale au KNAU fait n'importe quelle couleur invisible - absolument transparente, la valeur égale à celle-ci traduit la couleur du code RVB inchangé. La propriété RGBA (255,0,0,1.0) montre le RGB rouge (255, 0, 0).
En valeur hexadécimale (code hexagone)
Dans la durée de vie de Noise-vie, nous utilisons le système de score décimal. Ses origines sont très simples - nous avons dix doigts dans vos bras et c'était commode de compter sur les doigts de mon chemin. S'il y a dix chiffres dans le système décimal: de 0 à 9, le numéro 10 est déjà la prochaine décharge, puis dans un nombre hexadécimal de 16 chiffres, et la prochaine décharge sera le numéro 16.
Pour spécifier les codes de couleurs car des chiffres hexadécimaux sont utilisés des nombres décimaux classiques de 0 à 9 et pour désigner des nombres de 10 à 15 utilisations des lettres De A à F c'est (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Pour plus de clarté, nous réduirons cela dans le tableau:
Pour enregistrer des nombres hexadécimaux, plus de F (15 sur le système décimal), comme dans le système décimal, utilisez également la combinaison de deux chiffres, mais déjà hexadécimal, ce qui est évident. Donc, pour enregistrer un nombre décimal 255 dans un système hexadécimal utilise un enregistrement FF.
Le système hexadécimal est plus compréhensible pour l'ordinateur, il traite les valeurs spécifiées en valeur hexadécimale.
Pour spécifier la couleur dans le système 16th-riche, avant la valeur numérique, vous devez définir le signe "#", un exemple: # FFC0CB. La valeur de # FFC0CB elle-même consiste en trois chiffres hexadécimaux FF, C0 et CB. La signification de cet enregistrement est la même que l'installation de couleur au format RGB (RVB (R, G, B)) - chaque figure hexadécimale du code Hex indique la saturation des couleurs dans son canal modèle RVB.
Ce code affichera les éléments suivants:
Mais le dessin avec le résultat de la section "Réglez la couleur à l'aide de RVB" sur cette page ci-dessus.
Fig. 1. Couleurs dans RVB. Nous voyons que les couleurs sont identiques.
L'enregistrement abrégé du code Hex de la couleur est autorisé: le numéro à 6 chiffres peut être écrit à 3 chiffres. Il est permis que dans le cas où deux chiffres sont répétés dans la couleur de la couleur d'un canal.
C'est-à-dire que la réduction d'enregistrement suivante est autorisée:
Par exemple, la couleur # FF22AA est autorisée à écrire SO - # F2A ou de couleur # 44AA22 est autorisée à spécifier sous la forme # 4a2.
Définir la couleur à l'aide de HSL
Un nouveau format est apparu dans CSS3 pour spécifier la couleur.
Le format HSL est une abréviation des mots anglais: Hue (teinte), saturer (saturation) et sa légèreté (Svetlota).
Hue à HSL est une valeur de couleur sur un cercle de couleur spécial (Figure 2) et il est placé en degrés. Si vous tenez des analogies avec le modèle RGB, la température de 0 ° correspond au rouge, 120 ° correspond à la couleur verte et bleu de 240 °.
La valeur de l'ombre sera modifiée dans la plage de 0 à 359.
Figure 2. Cercle de couleur HSL. La deuxième valeur est la saturation (saturer) définie en pourcentage. Avec une saturation à 100%, la couleur est le maximum «juteux», car l'indicateur déplace la saturation à 0%, la couleur devient plus terne et roule en gris.
Troisième signification - Lightlock (légèreté) a également défini pourcentage. Plus le pourcentage est élevé, la couleur plus vive sera. Les valeurs extrêmes de 0% et 100% seront notées par le noir (manque de lumière) et les couleurs blanches (damnées), peu importe la couleur du cercle de couleur a été sélectionnée dans la première chaîne. L'optimal peut être considéré comme une valeur de luminosité de couleur de 50%.
Définir la couleur à l'aide de HSLA
Le format HSLA est associé à HSL, ainsi que RVB avec RGBA. Au format HSLA, comme dans RGBA a ajouté Alpha Channel responsable de la transparence des couleurs.
La couleur spécifiée au format HSL en savoir plus simplement. On peut dire qu'il est compris intuitivement. Par exemple, le code HSL (120,60%, 50%) peut être soumis une couleur finale s'il ya une image du cercle de couleur HSL. Il est impossible de dire sur les formats RVB et HEX, le code de couleur spécifié dans ces formats ne devient évident qu'après la visualisation sur le moniteur.
Nouveaux formats dans CSS3 (HSL, HSLA et RGBA) Travailler dans des navigateurs à partir de la version: IE 9.0, Opera 10.0 Firefox 3.0. Comment faire des styles travaillant sur de vieux navigateurs?
Quelquebloc (couleur-couleur: RVB (255,50,50); Couleur de fond: RGBA (255,50,50,0,0,085))
Lorsque vous utilisez un tel code dans les anciens navigateurs, la couleur de fond de la classe .Somebloxk, bien qu'elle n'utilise pas le canal alpha, mais sera affichée dans le format RVB.
