Quelle est la différence entre HEX, RGB et HSL ?

HEX est une notation hexadécimale au format #RRGGBB, la plus couramment utilisée en CSS. RGB exprime les couleurs par une combinaison de rouge (0-255), vert (0-255) et bleu (0-255). HSL utilise la teinte (Hue, 0-360), la saturation (Saturation, 0-100 %) et la luminosité (Lightness, 0-100 %), ce qui est le plus proche de l'intuition humaine.

Qu'est-ce que OKLCH et pourquoi l'utiliser ?

OKLCH est un espace colorimétrique CSS moderne perceptuellement uniforme (perceptually uniform). Avec le HSL classique, les couleurs pouvaient paraître de luminosité différente même avec les mêmes valeurs de saturation et de luminosité. OKLCH résout ce problème, ce qui le rend avantageux pour créer des palettes cohérentes. Il est inclus dans la norme CSS Color Level 4.

Comment utiliser la valeur alpha (transparence) ?

La valeur alpha est un nombre entre 0 (complètement transparent) et 1 (complètement opaque) qui indique la transparence de la couleur. En CSS, elle s'utilise comme rgba(59, 130, 246, 0.5), et en HEX, on ajoute 2 chiffres à la fin comme #3B82F680. Elle est utilisée pour les superpositions, les ombres, les arrière-plans, etc.

Existe-t-il des critères de choix de couleur pour l'accessibilité web ?

Selon les directives WCAG 2.1, le rapport de contraste de luminosité entre le texte et l'arrière-plan doit être d'au moins 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille. Lors du choix des couleurs, il est important de vérifier le contraste avec la couleur d'arrière-plan afin que les personnes malvoyantes puissent également lire le contenu.

Comment appliquer les codes couleur d'un outil de design au CSS ?

Saisissez le code HEX copié depuis des outils de design comme Figma ou Sketch dans cet outil, et il sera automatiquement converti en formats utilisables en CSS tels que RGB et HSL. La gestion via des variables CSS est efficace pour les changements de thème, et le format HSL facilite le réglage de la luminosité et de la saturation.

Sélecteur de Couleur - HEX RGB HSL HSV OKLCH | Gratuit en Ligne

Sélectionner Couleur

RGB

Valeurs de Couleur

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

Palette de Couleurs

Cliquez pour sélectionner et copier

base

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Formats de Couleur

HEX

Format #RRGGBB. Le plus utilisé en CSS

RGB

Rouge, Vert, Bleu (0-255)

HSL

Teinte, Saturation, Luminosité. Ajustement intuitif des couleurs

HSV/HSB

Teinte, Saturation, Valeur. Utilisé dans les outils graphiques

OKLCH

Espace colorimétrique CSS moderne perceptuellement uniforme

RGBA/HSLA

Inclut le canal alpha (transparence)

Qu'est-ce qu'un sélecteur de couleurs ?

Le sélecteur de couleurs (Color Picker) est un outil en ligne permettant de convertir les codes entre différents modèles de couleurs et de choisir visuellement la couleur souhaitée. Il prend en charge tous les principaux formats de couleurs tels que HEX, RGB, HSL, HSV et OKLCH, et vous permet d'explorer les couleurs via des curseurs et palettes intuitifs pour copier instantanément les codes. Le canal alpha (transparence) est également pris en charge.

Conversion mutuelle entre 5 formats de couleur : HEX, RGB, HSL, HSV, OKLCH
Curseurs de couleur intuitifs et sélection dans la zone de couleur
Prise en charge du canal alpha (transparence)
Copie du code couleur en un clic
Fonction de génération de couleur aléatoire
Palettes de couleurs de base et avancées incluses

Mode d'emploi

1
Sélection de la couleur
Faites glisser le curseur de couleur ou cliquez dans la zone de couleur pour sélectionner la couleur souhaitée. Vous pouvez également saisir directement un code HEX ou un autre format.
2
Vérification des formats
La couleur sélectionnée est automatiquement convertie et affichée dans tous les formats : HEX, RGB, HSL, HSV, OKLCH.
3
Réglage de la transparence
Dans l'onglet alpha, ajustez la transparence dans une plage de 0 à 100 % pour créer des couleurs semi-transparentes.
4
Copie du code
Cliquez sur la valeur du format de couleur souhaité pour la copier automatiquement dans le presse-papiers. Collez-la directement dans votre CSS, vos outils de design, etc.

Questions fréquentes

Conseils d'utilisation

Le format HSL permet de créer facilement des variations plus claires ou plus foncées d'une même couleur en ajustant uniquement la luminosité (L), ce qui est avantageux pour le travail sur les thèmes
Utilisez la fonction de couleur aléatoire pour trouver l'inspiration, puis affinez avec les curseurs de couleur pour créer des palettes créatives
Combiné avec les propriétés personnalisées CSS (variables), le basculement entre les couleurs du mode sombre et du mode clair devient simple
Cliquez sur les couleurs fréquemment utilisées dans la palette de couleurs pour copier rapidement leur code
En utilisant le format OKLCH, vous pouvez concevoir un système de couleurs dont la saturation et la luminosité sont perceptuellement cohérentes