Sélecteur de Couleur

Apercu de l'outil : Outil Sélecteur de Couleur

Cet outil fournit un système complet de sélection et de gestion des couleurs. Il prend en charge les conversions entre plusieurs formats de couleur, la génération de palettes, l'analyse de contraste et les systèmes de thèmes, en faisant un outil essentiel pour les designers et développeurs.

Qu'est-ce que Outil Sélecteur de Couleur ?

Outil Sélecteur de Couleur permet de sélectionner des couleurs et exporter les valeurs pour prévisualiser et exporter rapidement.

Comment l'utiliser

1. Importez un fichier ou saisissez le contenu.
2. Ajustez taille, qualité, format ou effets.
3. Prévisualisez et téléchargez le résultat.

Cas d'usage courants

• Optimiser les assets web/app
• Convertir des formats pour design/dev
• Retouches rapides pour social ou e‑commerce

❓ FAQ

Q1 : Pourquoi le résultat est incorrect ?
R : Vérifiez le format d'entrée et les options, puis essayez l'exemple s'il existe.

Q2 : Et si l'entrée est très grande ?
R : Découpez les données en plus petits blocs pour plus de stabilité.

Q3 : Comment sauvegarder la sortie ?
R : Utilisez les boutons de copie ou de téléchargement si l'outil les propose.

✨ Fonctionnalités Principales

• 🎨 Support Multi-format : Conversion entre HEX, RGB, HSL, HSV et plus
• 🌈 Génération de Palettes : Génération automatique de schémas de couleurs harmonieux
• 📊 Analyse de Contraste : Vérification de conformité aux standards d'accessibilité WCAG
• 🎯 Sélection Précise de Couleur : Support pour la saisie et l'ajustement précis des valeurs de couleur
• 💾 Historique des Couleurs : Sauvegarde automatique des couleurs récemment utilisées

📖 Exemples d'Utilisation

Conversion Basique de Couleurs

HEX vers RGB :

Entrée : #3498db
Sortie : rgb(52, 152, 219)

RGB vers HSL :

Entrée : rgb(52, 152, 219)
Sortie : hsl(204, 70%, 53%)

HSL vers HSV :

Entrée : hsl(204, 70%, 53%)
Sortie : hsv(204, 76%, 86%)

Génération de Palettes

Schéma de Couleurs Complémentaires :

Couleur de Base : #3498db (Bleu)
Complémentaire : #db7834 (Orange)

Schéma de Couleurs Triadiques :

Couleur de Base : #3498db
Triadique 1 : #34db98
Triadique 2 : #db3456

Schéma de Couleurs Analogues :

Couleur de Base : #3498db
Analogue 1 : #3456db
Analogue 2 : #34dbdb

🎯 Scénarios d'Application

1. Développement de Système de Design

/* Système de design généré depuis l'outil couleur */
:root {
  /* Couleurs primaires */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* Couleurs sémantiques */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Couleurs neutres */
  --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;
}

/* Styles de composants */
.btn-primary {
  background-color: var(--primary-600);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: var(--primary-700);
}

.btn-primary:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

2. Système de Couleurs de Marque

// Système de gestion des couleurs de marque
class BrandColorSystem {
  constructor() {
    this.brandColors = {
      primary: '#2563eb',
      secondary: '#7c3aed',
      accent: '#06b6d4',
      neutral: '#6b7280'
    };
    
    this.colorPalettes = new Map();
    this.generatePalettes();
  }

  // Générer des palettes complètes
  generatePalettes() {
    Object.entries(this.brandColors).forEach(([name, color]) => {
      this.colorPalettes.set(name, this.generateShades(color));
    });
  }

  // Générer des nuances de couleur
  generateShades(baseColor) {
    const shades = {};
    const lightness = [95, 90, 80, 70, 60, 50, 40, 30, 20, 10];
    
    lightness.forEach((l, index) => {
      const shade = (index + 1) * 100;
      shades[shade] = this.adjustLightness(baseColor, l);
    });
    
    return shades;
  }

  // Vérifier le contraste des couleurs
  checkContrast(color1, color2) {
    const luminance1 = this.getLuminance(color1);
    const luminance2 = this.getLuminance(color2);
    
    const lighter = Math.max(luminance1, luminance2);
    const darker = Math.min(luminance1, luminance2);
    
    const contrast = (lighter + 0.05) / (darker + 0.05);
    
    return {
      ratio: contrast,
      aa: contrast >= 4.5,
      aaa: contrast >= 7,
      aaLarge: contrast >= 3
    };
  }

  // Obtenir la luminance relative
  getLuminance(hex) {
    const rgb = this.hexToRgb(hex);
    const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(c => {
      c = c / 255;
      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
    });
    
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
  }

  // Conversion HEX vers RGB
  hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }
}

// Exemple d'utilisation
const brandSystem = new BrandColorSystem();

// Vérifier le contraste
const contrast = brandSystem.checkContrast('#2563eb', '#ffffff');
console.log('Vérification de contraste :', contrast);

// Obtenir la palette primaire
const primaryPalette = brandSystem.getPalette('primary');
console.log('Palette primaire :', primaryPalette);

3. Système de Thèmes Dynamiques

// Système de changement de thèmes dynamiques
class ThemeManager {
  constructor() {
    this.themes = new Map();
    this.currentTheme = null;
    this.initializeDefaultThemes();
  }

  // Initialiser les thèmes par défaut
  initializeDefaultThemes() {
    // Thème clair
    this.addTheme('light', {
      name: 'Thème Clair',
      colors: {
        background: '#ffffff',
        surface: '#f8fafc',
        primary: '#3b82f6',
        secondary: '#64748b',
        accent: '#06b6d4',
        text: '#1e293b',
        textSecondary: '#64748b',
        border: '#e2e8f0'
      }
    });

    // Thème sombre
    this.addTheme('dark', {
      name: 'Thème Sombre',
      colors: {
        background: '#0f172a',
        surface: '#1e293b',
        primary: '#60a5fa',
        secondary: '#94a3b8',
        accent: '#22d3ee',
        text: '#f1f5f9',
        textSecondary: '#94a3b8',
        border: '#334155'
      }
    });
  }

  // Appliquer un thème
  applyTheme(themeId) {
    const theme = this.themes.get(themeId);
    if (!theme) {
      throw new Error(`Thème '${themeId}' non trouvé`);
    }

    const root = document.documentElement;
    
    // Appliquer les variables de couleur
    Object.entries(theme.colors).forEach(([key, value]) => {
      root.style.setProperty(`--color-${key}`, value);
    });

    this.currentTheme = themeId;
    localStorage.setItem('preferred-theme', themeId);

    return theme;
  }

  // Détecter le thème système
  detectSystemTheme() {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  }
}

🔧 Détails Techniques

Formats de Couleur Supportés

HEX (Hexadécimal) :

• Format : #RRGGBB ou #RGB
• Exemple : #3498db, #fff

RGB (Rouge, Vert, Bleu) :

• Format : rgb(r, g, b)
• Plage : 0-255 pour chaque canal
• Exemple : rgb(52, 152, 219)

HSL (Teinte, Saturation, Luminosité) :

• Format : hsl(h, s%, l%)
• H : 0-360°, S : 0-100%, L : 0-100%
• Exemple : hsl(204, 70%, 53%)

HSV/HSB (Teinte, Saturation, Valeur/Luminosité) :

• Similaire à HSL mais utilise la Valeur au lieu de la Luminosité
• Exemple : hsv(204, 76%, 86%)

Théorie des Couleurs

Harmonie des Couleurs :

• Complémentaires : Couleurs opposées sur la roue chromatique
• Analogues : Couleurs adjacentes sur la roue chromatique
• Triadiques : Trois couleurs équidistantes sur la roue
• Monochromatiques : Variations d'une seule couleur

Contraste et Accessibilité :

• WCAG AA : Rapport de contraste minimum 4.5:1
• WCAG AAA : Rapport de contraste minimum 7:1
• Texte Large : Rapport de contraste minimum 3:1

💡 Conseils d'Utilisation

• Accessibilité : Toujours vérifier le contraste entre le texte et l'arrière-plan
• Cohérence : Utiliser un système de couleurs cohérent dans tout le projet
• Contexte Culturel : Considérer les significations culturelles des couleurs
• Tests sur Appareils : Tester les couleurs sur différents appareils et conditions d'éclairage

⚠️ Notes Importantes

• Daltonisme : Considérer les utilisateurs avec des déficiences de vision des couleurs
• Sortie d'Impression : Les couleurs peuvent apparaître différemment à l'impression
• Différences de Moniteur : La calibration du moniteur affecte la perception des couleurs
• Différences Culturelles : Les significations des couleurs varient selon les cultures

🚀 Comment Utiliser

1. Sélectionner une Couleur : Utiliser le sélecteur visuel ou saisir des codes couleur
2. Conversion de Format : Voir automatiquement les couleurs dans différents formats
3. Générer des Palettes : Choisir le type d'harmonie pour générer des schémas de couleurs
4. Analyse de Contraste : Vérifier l'accessibilité des combinaisons de couleurs
5. Copier pour Utiliser : Cliquer sur n'importe quel code pour le copier

Astuce : Cet outil traite localement côté client et n'envoie pas de données aux serveurs, garantissant la confidentialité et une réponse rapide.