• Omnilude ToolsCollection d'outils en ligne
  • Accueil
Outils en ligne
  • Outils développeur
    • Générateur d'UUID
    • Convertisseur Timestamp
    • Encodeur/Décodeur
    • Sélecteur de Couleur
    • Testeur regex
    • Convertisseur de Données
    • Générateur de hash
    • Expression Cron
    • Convention de Nommage
    • Débogueur JWT
    • Infos Navigateur
    • Conversion de bases
    • Générateur de Meta Tags
    • Mot de passe
  • Outils texte
  • Outils utiles
  • Outils de Temps
  • Outils de calcul

Sélecteur de Couleur

Convertir les codes couleur

Mises à jour

Améliorations récemment publiées

Nouveau
Changer le thème
Mode clair
Mode sombre
Système

Sélectionner Couleur

R
G
B

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

white

#FFFFFF

black

#000000

slate

slate-50

#F8FAFC

slate-100

#F1F5F9

slate-200

#E2E8F0

slate-300

#CBD5E1

slate-400

#94A3B8

slate-500

#64748B

slate-600

#475569

slate-700

#334155

slate-800

#1E293B

slate-900

#0F172A

slate-950

#020617

gray

gray-50

#F9FAFB

gray-100

#F3F4F6

gray-200

#E5E7EB

gray-300

#D1D5DB

gray-400

#9CA3AF

gray-500

#6B7280

gray-600

#4B5563

gray-700

#374151

gray-800

#1F2937

gray-900

#111827

gray-950

#030712

zinc

zinc-50

#FAFAFA

zinc-100

#F4F4F5

zinc-200

#E4E4E7

zinc-300

#D4D4D8

zinc-400

#A1A1AA

zinc-500

#71717A

zinc-600

#52525B

zinc-700

#3F3F46

zinc-800

#27272A

zinc-900

#18181B

zinc-950

#09090B

neutral

neutral-50

#FAFAFA

neutral-100

#F5F5F5

neutral-200

#E5E5E5

neutral-300

#D4D4D4

neutral-400

#A3A3A3

neutral-500

#737373

neutral-600

#525252

neutral-700

#404040

neutral-800

#262626

neutral-900

#171717

neutral-950

#0A0A0A

stone

stone-50

#FAFAF9

stone-100

#F5F5F4

stone-200

#E7E5E4

stone-300

#D6D3D1

stone-400

#A8A29E

stone-500

#78716C

stone-600

#57534E

stone-700

#44403C

stone-800

#292524

stone-900

#1C1917

stone-950

#0C0A09

red

red-50

#FEF2F2

red-100

#FEE2E2

red-200

#FECACA

red-300

#FCA5A5

red-400

#F87171

red-500

#EF4444

red-600

#DC2626

red-700

#B91C1C

red-800

#991B1B

red-900

#7F1D1D

red-950

#450A0A

orange

orange-50

#FFF7ED

orange-100

#FFEDD5

orange-200

#FED7AA

orange-300

#FDBA74

orange-400

#FB923C

orange-500

#F97316

orange-600

#EA580C

orange-700

#C2410C

orange-800

#9A3412

orange-900

#7C2D12

orange-950

#431407

amber

amber-50

#FFFBEB

amber-100

#FEF3C7

amber-200

#FDE68A

amber-300

#FCD34D

amber-400

#FBBF24

amber-500

#F59E0B

amber-600

#D97706

amber-700

#B45309

amber-800

#92400E

amber-900

#78350F

amber-950

#451A03

yellow

yellow-50

#FEFCE8

yellow-100

#FEF9C3

yellow-200

#FEF08A

yellow-300

#FDE047

yellow-400

#FACC15

yellow-500

#EAB308

yellow-600

#CA8A04

yellow-700

#A16207

yellow-800

#854D0E

yellow-900

#713F12

yellow-950

#422006

lime

lime-50

#F7FEE7

lime-100

#ECFCCB

lime-200

#D9F99D

lime-300

#BEF264

lime-400

#A3E635

lime-500

#84CC16

lime-600

#65A30D

lime-700

#4D7C0F

lime-800

#3F6212

lime-900

#365314

lime-950

#1A2E05

green

green-50

#F0FDF4

green-100

#DCFCE7

green-200

#BBF7D0

green-300

#86EFAC

green-400

#4ADE80

green-500

#22C55E

green-600

#16A34A

green-700

#15803D

green-800

#166534

green-900

#14532D

green-950

#052E16

emerald

emerald-50

#ECFDF5

emerald-100

#D1FAE5

emerald-200

#A7F3D0

emerald-300

#6EE7B7

emerald-400

#34D399

emerald-500

#10B981

emerald-600

#059669

emerald-700

#047857

emerald-800

#065F46

emerald-900

#064E3B

emerald-950

#022C22

teal

teal-50

#F0FDFA

teal-100

#CCFBF1

teal-200

#99F6E4

teal-300

#5EEAD4

teal-400

#2DD4BF

teal-500

#14B8A6

teal-600

#0D9488

teal-700

#0F766E

teal-800

#115E59

teal-900

#134E4A

teal-950

#042F2E

cyan

cyan-50

#ECFEFF

cyan-100

#CFFAFE

cyan-200

#A5F3FC

cyan-300

#67E8F9

cyan-400

#22D3EE

cyan-500

#06B6D4

cyan-600

#0891B2

cyan-700

#0E7490

cyan-800

#155E75

cyan-900

#164E63

cyan-950

#083344

sky

sky-50

#F0F9FF

sky-100

#E0F2FE

sky-200

#BAE6FD

sky-300

#7DD3FC

sky-400

#38BDF8

sky-500

#0EA5E9

sky-600

#0284C7

sky-700

#0369A1

sky-800

#075985

sky-900

#0C4A6E

sky-950

#082F49

blue

blue-50

#EFF6FF

blue-100

#DBEAFE

blue-200

#BFDBFE

blue-300

#93C5FD

blue-400

#60A5FA

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

blue-900

#1E3A8A

blue-950

#172554

indigo

indigo-50

#EEF2FF

indigo-100

#E0E7FF

indigo-200

#C7D2FE

indigo-300

#A5B4FC

indigo-400

#818CF8

indigo-500

#6366F1

indigo-600

#4F46E5

indigo-700

#4338CA

indigo-800

#3730A3

indigo-900

#312E81

indigo-950

#1E1B4B

violet

violet-50

#F5F3FF

violet-100

#EDE9FE

violet-200

#DDD6FE

violet-300

#C4B5FD

violet-400

#A78BFA

violet-500

#8B5CF6

violet-600

#7C3AED

violet-700

#6D28D9

violet-800

#5B21B6

violet-900

#4C1D95

violet-950

#2E1065

purple

purple-50

#FAF5FF

purple-100

#F3E8FF

purple-200

#E9D5FF

purple-300

#D8B4FE

purple-400

#C084FC

purple-500

#A855F7

purple-600

#9333EA

purple-700

#7E22CE

purple-800

#6B21A8

purple-900

#581C87

purple-950

#3B0764

fuchsia

fuchsia-50

#FDF4FF

fuchsia-100

#FAE8FF

fuchsia-200

#F5D0FE

fuchsia-300

#F0ABFC

fuchsia-400

#E879F9

fuchsia-500

#D946EF

fuchsia-600

#C026D3

fuchsia-700

#A21CAF

fuchsia-800

#86198F

fuchsia-900

#701A75

fuchsia-950

#4A044E

pink

pink-50

#FDF2F8

pink-100

#FCE7F3

pink-200

#FBCFE8

pink-300

#F9A8D4

pink-400

#F472B6

pink-500

#EC4899

pink-600

#DB2777

pink-700

#BE185D

pink-800

#9D174D

pink-900

#831843

pink-950

#500724

rose

rose-50

#FFF1F2

rose-100

#FFE4E6

rose-200

#FECDD3

rose-300

#FDA4AF

rose-400

#FB7185

rose-500

#F43F5E

rose-600

#E11D48

rose-700

#BE123C

rose-800

#9F1239

rose-900

#881337

rose-950

#4C0519

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. 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. 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. 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. 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

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.

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.

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.

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.

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.

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

Omnilude Tools

Collection d'outils en ligne gratuits pour les développeurs, designers et créateurs. Toutes les données sont traitées localement dans votre navigateur.

Outils développeur

  • Générateur d'UUID
  • Convertisseur Timestamp
  • Encodeur/Décodeur
  • Sélecteur de Couleur

Outils texte

  • Éditeur JSON
  • Comparer texte
  • Compteur de texte
  • Markdown

Mentions légales

  • Politique de confidentialité
  • Conditions d'utilisation
  • À propos du service

© 2026 Omnilude. Tous droits réservés.

Envoyer un retour