Les pubs vous déplaisent ? Aller Sans pub Auj. 

Générateur de feuille de palette de couleurs

CouleurPromoteurImage

SAISIR

Processus automatique

Couleurs (une par ligne)

Hex (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), ou noms de couleurs CSS. Les lignes commençant par # suivie d'un espace (par exemple # commentaire) sont traitées comme des commentaires.

Layout

Colonnes : 4

Taille de l'écriture (px) : 160

Hauteur de l'écriture (px) : 120

Espacement (px) : 12

Marge du feuillet (px) : 24

Rayon des coins (px) : 8

Arrière-plan du feuillet

Étiquettes

Afficher l'étiquette en hexadécimal

Afficher le nom CSS (lorsqu'il est correspondant)

Couleur de l'étiquette

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Générateur de feuillet d'échantillons de couleur

Générateur de feuille de palette de couleurs

Collez une liste de couleurs et prévisualisez immédiatement ces couleurs sous forme de feuillet imprimable avec des étiquettes en hexadécimal. Mélangez n'importe quel format CSS de couleur — hexadécimal court et long, rgb(), rgba(), hsl(), hsla(), ou noms de couleurs CSS comme 'tomato' — puis téléchargez le feuillet sous forme de PNG à haute résolution ou de SVG scalable pour une livraison, une impression ou une documentation de système de conception.

Comment utiliser

Saisissez une couleur par ligne dans la Couleurs zone de texte, ou cliquez Essayez un exemple pour charger un palette de départ.
Modifier Colonnes, Taille de l'écriture, Espacementet Marge du feuillet pour correspondre à l'organisation que vous avez besoin.
Choisissez une couleur d'arrière-plan du feuillet et activez l'affichage des étiquettes en hexadécimal ou des noms CSS correspondants sur chaque échantillon.
Choisissez la couleur des étiquettes — Auto utilise le contraste par rapport à chaque échantillon, ou force Toujours sombre ou Toujours clair.
Cliquez Télécharger PNG pour une exportation en grille 2x, ou Télécharger SVG pour un fichier vectoriel que vous pouvez ouvrir dans Figma, Illustrator ou n'importe quel navigateur.

Caractéristiques

Entrée multi-format — accepte les hexadécimaux (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), et les noms de couleurs CSS dans la même liste.
Prévisualisation SVG en temps réel — le feuillet se reconstruit à chaque saisie, donc les modifications de disposition sont immédiates.
Grille configurable — contrôlez le nombre de colonnes, la largeur et la hauteur des échantillons, l'espacement, la marge et le rayon des coins.
Étiquettes intelligentes — affiche les codes hexadécimaux, détecte automatiquement les noms CSS correspondants et choisit la couleur des étiquettes en contraste ou fixe.
Couleurs transparentes — les échantillons avec alpha s'affichent sur un motif de carreaux afin que l'opacité soit visuellement évidente dans les exports.
Deux formats d'exportation — PNG à haute résolution via Canvas, plus un SVG copiable pour l'utilisation vectorielle.
Entièrement côté client — les couleurs ne quittent jamais le navigateur, donc c'est sécurisé pour les palettes de marque non encore publiées.

 FAQ

Qu'est-ce qu'un code hexadécimal de couleur et pourquoi y a-t-il parfois 8 caractères ?

Un code hexadécimal de couleur utilise trois paires de chiffres hexadécimaux pour encoder les canaux rouge, vert et bleu d'une couleur sRGB (par exemple #FF5733). Chaque paire va de 00 à FF, soit de 0 à 255 en décimal. Une paire optionnelle encode l'alpha (transparence) allant de 00 (entièrement transparent) à FF (entièrement opaque), donnant ainsi la forme à huit caractères #RRGGBBAA utilisée dans le CSS moderne.
Comment est déterminé le contraste entre un échantillon et son étiquette ?

La plupart des vérifications de contraste utilisent la formule de luminance WCAG, qui convertit chaque canal sRGB en une valeur linéaire, puis les pondère comme 0.2126R + 0.7152G + 0.0722B. Les fonds clairs (luminance environ supérieure à 0.5) sont mieux lus avec du texte sombre, et les fonds sombres avec du texte clair. Cette même formule est utilisée dans le rapport de contraste WCAG 2 pour les audits d'accessibilité.
Pourquoi les concepteurs préfèrent-ils SVG plutôt que PNG pour les échantillons de couleur ?

SVG stocke les échantillons sous forme de formes vectorielles et de texte plutôt qu'au format de grille de pixels fixe, donc le feuillet reste net à toute taille, s'imprime clairement à haute résolution, et reste éditable dans des outils de conception comme Figma ou Illustrator. Le PNG reste utile lorsque vous avez besoin d'une image raster unique pour des diapositives, des captures d'écran ou des partages rapides où le support vectoriel n'est pas garanti.
Quelle est la différence entre les valeurs hexadécimales sRGB et les valeurs RGB que vous voyez dans le code ?

Les valeurs hexadécimales comme #FF5733 et les valeurs équivalentes rgb(255, 87, 51) décrivent le même triplet sRGB — le hexadécimal est simplement une notation compacte en base 16. Elles font référence au gamut standard sRGB utilisé sur le web. Les formats à gamut plus large comme display-p3 ou oklch décrivent des couleurs en dehors de ce gamut et ne sont pas interchangeables avec les mêmes valeurs dans sRGB.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?