# Aperçu de la notation des couleurs
Dans la conception et le développement Web, les couleurs sont représentées de différentes manières.Les trois plus courantes sont :
- hex (hex) : par exemple
# FF5733 - RVB (rouge, vert et bleu) : par exemple
rgb (255, 87, 51) - HSL (Hue-Saturation-Brightness) : par exemple
hsl (9, 100 %, 60 %)
Chaque notation a son propre scénario.Comprendre la transition entre eux peut vous rendre plus à l'aise lors de la conception.
# Explication détaillée des trois modèles de couleurs
# # hex
Le format de couleur Web le plus largement utilisé.Commence par « # » suivi d'un nombre hexadécimal à 6 chiffres (ou 3 chiffres pour faire court).Chaque deux chiffres représente la valeur des canaux rouge, vert et bleu (00-FF).
# FF5733 → Rouge = FF (255), Vert = 57 (87), Bleu = 33 (51)
# # RGB Rouge Vert Bleu
Le modèle de couleur le plus intuitif, spécifiant directement les valeurs des canaux rouge, vert et bleu (0-255).Le canal de transparence alpha peut également être ajouté au CSS en tant que « rgba (255, 87, 51, 0,5) ».
# # HSL Teinte-Saturation-Luminosité
Les modèles de couleurs les plus design-friendly :
- Teinte : 0-360 °, indiquant la position sur la roue chromatique
- Saturation : 0-100%, pureté des couleurs
- Luminosité : 0-100 %, la luminosité et l'obscurité de la couleur
L'avantage de HSL est que lorsque vous voulez « la même couleur mais plus lumineuse », il vous suffit d'ajuster la valeur de luminosité.
# Convert Formula
# # hex → RVB
R = parseInt (hex [1.. 2], 16)
G = parseInt (hex [3.. 4], 16)
B = parseInt (hex [5.. 6], 16)
# # RGB → HSL
R '= R/255, G' = G/255, B '= B/255
Cmax = max (R ', V', B ')
Cmin = min (R ', G', B ')
Δ = Cmax-Cmin
H = 60 ° × (formule pour différentes situations)
S = Δ/(1- | 2L - 1 |)
L = (Cmax + Cmin)/2
# Conseils pratiques
- Variables CSS : Définissez les couleurs du thème à l'aide de HSL pour générer facilement des variantes en ajustant les valeurs de luminosité
- Système de conception : Utilisez HSL pour gérer la teinte uniformément, modifiez la teinte pour changer la peau globalement
- Accessibilité : Déterminez le contraste entre les couleurs de premier plan et d'arrière-plan en fonction des valeurs de luminosité
- Couleur du dégradé : HSL peut créer des transitions de dégradé plus naturelles
Le transcodage des couleurs semble être fondamental, mais dans le développement réel, c'est une compétence qui peut être utilisée tous les jours.