Modèle de couleur HEX : explication de la notation #RRGGBB
La notation des couleurs HEX est un raccourci hexadécimal pour les valeurs RVB. Le format est #RRGGBB où :
- RR = canal rouge (00 à FF = 0 à 255)
- GG = canal vert (00 à FF = 0 à 255)
- BB = canal bleu (00 à FF = 0 à 255)
| Couleur | HEX | Sens |
|---|---|---|
| Pur rouge | #FF0000 | R=255 G=0 B=0 |
| Pur vert | #00FF00 | R=0 G=255 B=0 |
| Pur bleu | #0000FF | R=0 G=0 B=255 |
| Blanc | #FFFFFF | R=255 G=255 B=255 |
| Noir | #000000 | R=0 G=0 B=0 |
| OutilDolfen bleu | #3B82F6 | R=59 G=130 B=246 |
Raccourci HEX : Lorsque les deux chiffres sont identiques pour chaque canal, un raccourci à 3 caractères fonctionne : #F00 = #FF0000.
Modèle de couleur RVB : canaux rouge, vert et bleu
RVB (rouge, vert, bleu) : chaque canal est compris entre 0 et 255.
RVB est un modèle de couleur additif : l'ajout de canaux se déplace vers le blanc. C'est ainsi que fonctionne la lumière (écrans de télévision, moniteurs).
En CSS :
color: rgb(59, 130, 246); /* Blue */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */Modèle de couleur HSL : teinte, saturation, luminosité
HSL sépare la couleur en trois dimensions perceptuellement significatives :
- Teinte (0–360°) : La couleur elle-même : rouge à 0°, vert à 120°, bleu à 240°
- Saturation (0 – 100 %) : Intensité de la couleur : 0 % pour le gris, 100 % pour les couleurs pures et vives.
- Luminosité (0 – 100 %) : Luminosité : 0 % pour le noir, 100 % pour le blanc, 50 % pour le plus pur couleur
En CSS :
color: hsl(217, 91%, 60%); /* Blue */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */Avantage du flux de travail du concepteur : Pour créer une palette de 5 nuances à partir d'une seule couleur :
- 90 % de luminosité → teinte très claire
- 75 % de luminosité → teinte claire
- 50 % de luminosité → couleur de base
- 35 % de luminosité → foncé teinte
- 20 % de luminosité → teinte très foncée
Ajustez simplement la valeur L tout en gardant H et S constants.
Quand utiliser HEX, RVB ou HSL en CSS
Utilisez HEX : Pour les références monochromes pour lesquelles vous avez besoin de la valeur d'un système de conception ou d'un guide de marque. HEX est le format le plus courant dans les spécifications de conception.
Utiliser RVB : Lorsque vous devez manipuler dynamiquement des canaux de couleur en JavaScript : rgb(${r}, ${g}, ${b}).
Utilisez HSL : Lors de la création de systèmes de thèmes, de la génération dynamique de palettes ou de l'utilisation de propriétés personnalisées CSS pour un changement de mode clair/sombre accessible.
Conversion des couleurs sur ToolDolfen
Utilisez le Sélecteur et Convertisseur de Couleurs pour :
- Choisissez visuellement n'importe quelle couleur sur une roue chromatique et un spectre
- Saisissez n'importe quelle valeur HEX, RVB ou HSL et voyez instantanément les trois équivalents de format
- Copiez n'importe quel format dans le presse-papiers avec un seul cliquez sur
- Utilisez la pipette pour échantillonner les couleurs de votre écran (Chrome et Edge uniquement)
Guides complémentaires recommandés
Explorez les didacticiels et utilitaires complémentaires de ce groupe de sujets pour améliorer votre flux de travail numérique :