Guide de conversion des formats de couleur : HEX, RGB, HSL, OKLCH entièrement couverts
Aperçu des formats de couleur
Formats de couleur courants en développement web :
| Format | Exemple | Caractéristiques |
|---|---|---|
| HEX | #FF6B35 |
Le plus courant, compact |
| RGB | rgb(255, 107, 53) |
Intuitif, valeurs de canal 0-255 |
| HSL | hsl(16, 100%, 60%) |
Teinte/Saturation/Luminosité, intuitif pour les ajustements |
| OKLCH | oklch(0.68 0.17 37) |
Perceptuellement uniforme, recommandé en CSS moderne |
Différents formats représentent la même couleur — simplement différents systèmes de coordonnées.
Format HEX expliqué
HEX utilise l'hexadécimal pour représenter les trois canaux RGB :
#FF6B35
↑ ↑ ↑
R G B → Chaque canal 00-FF (0-255)
- Raccourci 3 chiffres :
#F63équivaut à#FF6633 - Raccourci 4 chiffres avec alpha :
#F63Aéquivaut à#FF6633AA - Complet 8 chiffres avec alpha :
#FF6B3580(80 = 50% d'opacité)
RGB et canal alpha
RGB mappe directement les couleurs primaires d'affichage :
rgb(255, 107, 53) /* opaque */
rgba(255, 107, 53, 0.5) /* 50% transparent */
rgb(255 107 53 / 50%) /* syntaxe moderne */
Canal alpha : 1 = entièrement opaque, 0 = entièrement transparent. Le CSS moderne préfère
rgb()avec des valeurs séparées par des espaces et/pour la transparence.
HSL : Ajustement de couleur intuitif
HSL décompose la couleur en teinte, saturation et luminosité :
| Paramètre | Plage | Signification |
|---|---|---|
| H (Teinte) | 0-360° | Angle du cercle chromatique : 0=rouge, 120=vert, 240=bleu |
| S (Saturation) | 0-100% | 0%=gris, 100%=couleur pure |
| L (Luminosité) | 0-100% | 0%=noir, 50%=couleur pure, 100%=blanc |
Conseils d'ajustement :
- Même teinte, nuances différentes ? Fixez H et S, ajustez L
- Ton plus doux ? Réduisez S
- Couleur complémentaire ? H ± 180°
OKLCH : Le standard perceptuellement uniforme
OKLCH est un espace couleur introduit dans CSS Color Level 4, modélisé sur la perception humaine :
| Avantage | Description |
|---|---|
| Perceptuellement uniforme | Le changement de luminosité de 0,5→0,6 paraît identique à 0,7→0,8 |
| Gamme plus large | Supporte P3 et autres écrans à large gamme |
| Ajustements prévisibles | L fixe avec C/H variable maintient la luminosité visuelle constante |
oklch(0.68 0.17 37)
↑ ↑ ↑
L C H → Luminosité/Chroma/Teinte
Le L=50% du HSL varie considérablement en luminosité visuelle selon les teintes. OKLCH corrige cela.
Utilisation de l'outil de conversion de couleur
Étape 1 : Ouvrir l'outil
Visitez l'outil de conversion de couleur et entrez une couleur dans n'importe quel format.
Étape 2 : Sélectionner le format d'entrée
Entrez une couleur dans le champ de saisie. Formats pris en charge :
- HEX :
#FF6B35 - RGB :
255, 107, 53 - HSL :
16, 100%, 60% - OKLCH :
0.68, 0.17, 37
Étape 3 : Consulter les résultats de conversion
L'outil affiche automatiquement toutes les conversions de format. Copiez n'importe quel résultat directement.
Étape 4 : Ajuster le canal alpha
Cochez « Inclure la transparence » et entrez une valeur alpha (0-1). Les résultats incluront le canal alpha.
CSS color-mix() en pratique
OKLCH combiné avec color-mix() permet des mélanges de couleur précis :
/* Mélanger dans l'espace OKLCH — perceptuellement uniforme */
.button {
background: color-mix(in oklch, #FF6B35, #3B82F6);
}
/* Mélanger 30% de la couleur d'accent */
.card {
border-color: color-mix(in oklch, #FF6B35 30%, white);
}
Utilisez le vérificateur de contraste pour vérifier que la couleur mélangée respecte les exigences de contraste avec le texte.
Formats de couleur dans les dégradés
Lors de l'utilisation du générateur de dégradés, le format OKLCH est recommandé :
/* Les transitions de dégradé OKLCH sont plus uniformes */
background: linear-gradient(
in oklch,
oklch(0.7 0.15 30),
oklch(0.7 0.15 250)
);
Les dégradés traditionnels RGB/HSL peuvent produire des points médians ternes autour du cercle chromatique. OKLCH évite cela.
Problèmes courants
| Problème | Cause | Solution |
|---|---|---|
| Résultat HEX vers RGB incorrect | Raccourci non développé | Développer d'abord en HEX à 6 chiffres |
| Décalage de couleur HSL vers HEX | Perte de précision en virgule flottante | Utiliser l'outil pour une conversion précise |
| OKLCH non pris en charge | Navigateur ancien | Utiliser un fallback CSS ou un plugin PostCSS |
| Affichage de la valeur alpha incorrect | Pourcentage et décimal mélangés | Utiliser systématiquement le décimal 0-1 ou 0%-100% |
Résumé
Maîtriser les formats HEX, RGB, HSL et OKLCH et leurs conversions est une compétence fondamentale pour le développement frontend et le design. L'uniformité perceptuelle d'OKLCH en fait le premier choix pour le CSS moderne. L'outil de conversion de couleur gère toutes les conversions de format en un clic, tandis que le vérificateur de contraste et le générateur de dégradés complètent votre flux de travail couleur.