English | Français

A web tool for generating color palettes with light and dark variants, supporting HSL, RGB, and HEX formats. Features real-time preview, accessibility support, and CSS variables export.

• 🔗 Live Demo
• 💻 GitHub Repository

• HSL color palette generator with Normal (5% steps) and Vivid (10% steps) variants
• Dual input system :
  • Quick color input (HSL, RGB, or HEX)
  • Detailed HSL component inputs
• Real-time color preview
• Accessibility-first design with screen reader support
• Flexible palette copying :
  • Copy individual palettes
  • Copy all palettes at once
• Multi-format color export (HSL, RGB, HEX)
• Empty state management
• Modern, responsive interface
• Light/Dark theme support with system preference detection
• Integrated bilingual user guide (FR/EN)

1. Enter your color using either:
   • Quick input (e.g., hsl(320, 80%, 58%), rgb(255, 100, 50), or #FF6432)
   • Separate HSL inputs for Hue (0-360), Saturation (0-100%), and Lightness (0-100%)
2. Get instant preview of your color
3. Generate and copy color palettes

For best color palette results:

• Saturation: prefer values > 0% to avoid pure grays
• Lightness: use values between 40% and 60% for base color
• Avoid combinations of 0% saturation with very low lightness

• Customizable variable naming
• Direct CSS file download
• Social sharing

Un outil web pour générer des palettes de couleurs avec variantes claires et foncées, supportant les formats HSL, RGB et HEX. Propose une prévisualisation en temps réel, un support d'accessibilité et l'export de variables CSS.

• 🔗 Démo en ligne
• 💻 Dépôt GitHub

• Générateur de palettes HSL avec variantes Normal (pas de 5%) et Vivid (pas de 10%)
• Double système de saisie :
  • Entrée rapide (HSL, RGB ou HEX)
  • Entrées détaillées des composantes HSL
• Prévisualisation en temps réel
• Conception axée sur l'accessibilité avec support des lecteurs d'écran
• Copie flexible des palettes :
  • Copie individuelle des palettes
  • Copie simultanée de toutes les palettes
• Export multi-format des couleurs (HSL, RGB, HEX)
• Gestion des états vides
• Interface moderne et responsive
• Support des thèmes clair/sombre avec détection des préférences système
• Guide utilisateur intégré bilingue (FR/EN)

1. Saisissez votre couleur via :
   • L'entrée rapide (ex : hsl(320, 80%, 58%), rgb(255, 100, 50) ou #FF6432)
   • Les entrées HSL séparées pour Teinte (0-360), Saturation (0-100%) et Luminosité (0-100%)
2. Obtenez une prévisualisation instantanée
3. Générez et copiez les palettes de couleurs

Pour obtenir les meilleures palettes de couleurs :

• Saturation : préférez une valeur > 0% pour éviter les gris purs
• Luminosité : utilisez des valeurs entre 40% et 60% pour la couleur de base
• Évitez les combinaisons de saturation 0% avec une luminosité très faible

• Nommage personnalisable des variables
• Téléchargement direct de fichiers CSS
• Partage social