Générateur de palettes de couleurs

Prend en charge la génération de palettes de couleurs, l’extraction de couleurs depuis des images, la création de dégradés CSS et d’effets d’ombre, avec traitement individuel ou par lot.

Signaler un bug

Mode d’exécution du navigateur: Vos données sont traitées dans votre navigateur et ne sont pas envoyées au serveur.

Vitesse et stabilité: La vitesse de traitement dépend de votre appareil et de votre navigateur. Pour les gros lots, la version de bureau peut être plus stable.

Chargement de l’outil, veuillez patienter...

Si l’outil en ligne ne se charge pas ou ne fonctionne pas, essayez l’outil de bureau. https://tools.yikeaigc.com/

Utilisation de l’outil

Retour à l’ancienne version

Mode monochrome

Prélèvement par lot

1Choisir la couleur de base

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Choisir la palette

Nombre de couleurs :

Ajustement de saturation : 0%

Ajustement de luminosité : 0%

3Palette de couleurs

4Dégradé CSS

Type de dégradé :

Angle : 90°

5Effet d’ombre

Rayon de flou : 20px

Rayon d’étendue : 0px

Opacité : 40%

Aperçu

6Extraire les couleurs d’une image

Cliquez pour téléverser ou glissez l’image ici

Formats JPG, PNG, GIF, WebP pris en charge

1Téléverser plusieurs images

Cliquez pour importer ou déposez des images ici

Sélection par lot prise en charge, couleur principale extraite pour chaque image

Couleurs à extraire par image :

Palette :

Copié dans le presse-papiers

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Instructions

Instructions d’utilisation du logiciel

Choisir une couleur de base : utilisez le sélecteur de couleur pour choisir une couleur de base, ou saisissez directement une valeur HEX (par ex. #4f46e5). Vous pouvez aussi cliquer sur le bouton « Couleur aléatoire » pour trouver de l’inspiration. L’outil affiche en temps réel les valeurs RGB et HSL.
Choisir une palette de couleurs :
- Palette monochrome : même teinte, avec des variations créées en modifiant la saturation et la luminosité
- Palette de couleurs analogues : couleurs voisines sur le cercle chromatique, naturelles et douces
- Palette de couleurs complémentaires : deux couleurs opposées sur le cercle chromatique, avec un fort contraste
- Complémentaires divisées : couleur de base et couleurs situées de part et d’autre de sa couleur complémentaire
- Palette triadique : trois couleurs réparties à égale distance sur le cercle chromatique
- Palette carrée : quatre couleurs réparties à égale distance
- Palette tétradique : deux paires de couleurs complémentaires, avec une hiérarchie claire
Ajuster les paramètres :
- Nombre de couleurs : choisissez de générer 3, 5, 7 ou 9 couleurs
- Ajustement de la saturation : faites glisser le curseur pour augmenter ou diminuer la saturation globale
- Ajustement de la luminosité : faites glisser le curseur pour augmenter ou diminuer la luminosité globale
Générer un dégradé CSS : choisissez un type de dégradé linéaire ou radial, ajustez le paramètre d’angle, puis générez un code de dégradé CSS directement utilisable.
Générer un effet d’ombre : ajustez le rayon de flou, le rayon d’expansion et l’opacité afin de générer un code CSS d’ombre basé sur la couleur de base actuelle.
Extraire les couleurs d’une image : après avoir importé une image, l’outil extrait automatiquement les couleurs principales. Vous pouvez cliquer à n’importe quel endroit de l’image pour prélever précisément une couleur et l’appliquer comme couleur de base.
Mode de prélèvement par lot : passez à l’onglet « Prélèvement par lot », importez plusieurs images, définissez le nombre de couleurs à extraire pour chaque image et le mode d’extension de la palette, puis cliquez pour lancer l’extraction par lot. Une fois terminée, vous pouvez télécharger un ZIP contenant tous les résultats.
Copier et exporter : cliquez sur n’importe quelle carte de couleur pour copier sa valeur, ou cliquez sur le bouton « Exporter la palette » pour télécharger un fichier JSON contenant toutes les informations de la palette.

Questions fréquentes

R : La palette monochrome convient aux designs simples et élégants ; les couleurs analogues conviennent aux thèmes naturels et aux arrière-plans en dégradé ; les couleurs complémentaires conviennent aux designs nécessitant un contraste marqué ; la palette triadique convient aux produits pour enfants dynamiques et aux créations artistiques ; les palettes carrée et tétradique conviennent aux interfaces complexes et à la visualisation de données. Choisissez la palette adaptée en fonction de votre objectif de design.

R : Importez une image dans la zone « Extraire les couleurs d’une image » ; l’outil l’analysera automatiquement et extraira 8 teintes principales. Vous pouvez cliquer sur une couleur extraite pour la sélectionner, puis cliquer sur le bouton « Utiliser la couleur sélectionnée comme couleur de base » afin de générer une palette complète à partir de cette couleur.

R : Cliquez sur le bouton « Copier » dans la zone du code de dégradé, puis collez le code dans votre fichier CSS et appliquez-le à l’élément qui nécessite un arrière-plan en dégradé. Deux types sont pris en charge : les dégradés linéaires et les dégradés radiaux ; l’angle et la direction des dégradés linéaires peuvent être personnalisés.

R : Le fichier ZIP téléchargé une fois le traitement par lot terminé contient trois fichiers : palette-summary.json (récapitulatif JSON de toutes les données de palettes), palettes.css (définitions de variables CSS directement utilisables), preview.html (page d’aperçu visuel). Cela facilite l’utilisation des palettes extraites dans différents contextes.

R : La saturation contrôle l’intensité de la couleur : l’augmenter rend les couleurs plus vives, tandis que la diminuer les rend plus douces et plus grisées ; la luminosité contrôle le degré de clarté ou d’obscurité de la couleur : l’augmenter rend les couleurs plus claires, tandis que la diminuer les rend plus foncées. En ajustant ces deux paramètres, vous pouvez affiner l’effet global de la palette.

Réponse : Les formats d’image courants tels que JPG, JPEG, PNG, GIF et WebP sont pris en charge. Il est recommandé d’utiliser des images riches en couleurs et avec un contraste élevé afin d’obtenir une extraction plus précise de la couleur dominante. Le traitement des images s’effectue entièrement en local et elles ne sont pas envoyées au serveur.

Réponse : Cliquez directement sur n’importe quelle carte de couleur ou pastille de couleur ; la valeur HEX correspondante sera automatiquement copiée dans le presse-papiers, et un message « Copié dans le presse-papiers » s’affichera en bas de la page. Dans les résultats par lots, vous pouvez également cliquer sur une barre de couleur pour copier la valeur correspondante.