Générateur de système de couleurs OKLCH

Presets de couleurs

Configuration de la couleur primaire (OKLCH)

Teinte (H) 250°

Luminosité (L) 0.65

Chroma (C) 0.18

Mode de calcul de la couleur accent

Harmonie de couleur

Mode de calcul de la couleur secondaire

Décalage de teinte

Luminosité secondaire 0.90

Saturation secondaire 0.04

Mode de calcul de la couleur texte

Décalage de teinte

Luminosité texte 0.15

Mode de calcul de la couleur background

Décalage de teinte

Luminosité background 0.95

Roues de couleur

Primaire / Accent

Primaire

Accent (150°)

Secondaire

Primaire

Secondaire (0°)

Texte

Primaire

Texte (0°)

Background

Primaire

Background (0°)

📐 Exemple avec la règle 60/30/10
Mode sombre

Titre de la section

30% - Couleur primaire

Votre couleur primaire est en cours de chargement...

La couleur accent est en cours de chargement...

Neutre

60%

Primaire

30%

Accent

10%

⭐ Couleur Primaire

📱 Couleur Secondaire (Plus claire et désaturée)

🎨 Couleur Accent (Complémentaire harmonieuse)

🎨 Background (Très clair et désaturé)

✍️ Texte (Très foncé et désaturé)

ℹ️ Avantages du système OKLCH

Perceptuellement uniforme : Les variations de luminosité et chroma sont perçues de manière constante par l'œil humain
Gamut étendu : Accès à des couleurs plus vives et saturées impossibles en HSL
Contrôle précis : L (luminosité 0-1), C (chroma 0-0.37), H (teinte 0-360°)
Dégradés fluides : Les transitions entre couleurs sont plus naturelles et harmonieuses
Accessibilité améliorée : Meilleur contrôle du contraste et de la lisibilité
Mobile : Affichage réduit aux nuances principales (50-500) pour plus de clarté

🎨 Système de génération automatique de couleurs OKLCH

Presets de couleurs

Configuration de la couleur primaire (OKLCH)

Mode de calcul de la couleur accent

Mode de calcul de la couleur secondaire

Mode de calcul de la couleur texte

Mode de calcul de la couleur background

Roues de couleur

Primaire / Accent

Secondaire

Texte

Background

📐 Exemple avec la règle 60/30/10
Mode sombre

Titre de la section

♿ Tests d'accessibilité (WCAG)

⭐ Couleur Primaire

📱 Couleur Secondaire (Plus claire et désaturée)

🎨 Couleur Accent (Complémentaire harmonieuse)

🎨 Background (Très clair et désaturé)

✍️ Texte (Très foncé et désaturé)

ℹ️ Avantages du système OKLCH

🎨 Système de génération automatique de couleurs OKLCH

Presets de couleurs

Configuration de la couleur primaire (OKLCH)

Mode de calcul de la couleur accent

Mode de calcul de la couleur secondaire

Mode de calcul de la couleur texte

Mode de calcul de la couleur background

Roues de couleur

Primaire / Accent

Secondaire

Texte

Background

📐 Exemple avec la règle 60/30/10 Mode sombre

Titre de la section

♿ Tests d'accessibilité (WCAG)

⭐ Couleur Primaire

📱 Couleur Secondaire (Plus claire et désaturée)

🎨 Couleur Accent (Complémentaire harmonieuse)

🎨 Background (Très clair et désaturé)

✍️ Texte (Très foncé et désaturé)

ℹ️ Avantages du système OKLCH

📐 Exemple avec la règle 60/30/10
Mode sombre