Sélection des couleurs
Trouver et convertir des couleurs
Color Picker vous donne les valeurs HEX, RGB, HSL et HSB pour n'importe quelle couleur que vous choisissez — copiez n'importe quel format en un clic.
Design · 7 outils
Couleur, magnifiquement maîtrisée.
Utilitaires de design dans le navigateur — couleurs, palettes, dégradés, conversion d’images, aides CSS et SVG — avec des sorties prêtes à coller, exécutés localement.
7 outils
5 formats de couleur
0 envois
// 7 outils
Pipette de couleur
Sélectionnez des couleurs depuis une image ou un spectre et copiez HEX, RGB, HSL, OKLCH et plus encore, entièrement dans votre navigateur
#F5C842
Convertisseur HEX vers RGB
Convertisseur bidirectionnel HEX ↔ RGB avec alpha, syntaxe CSS4 et copie en un clic, dans votre navigateur
#2563EB
Vérificateur de contraste
Saisissez des couleurs de premier plan et d'arrière-plan pour voir instantanément le ratio de contraste WCAG 2.2 AA/AAA, avec des suggestions et un lien partageable.
Générateur de palette de couleurs
Saisissez une couleur HEX, RGB ou HSL et générez des palettes harmonieuses selon les règles de la théorie des couleurs — avec export en variables CSS et config Tailwind
Générateur de dégradés
Créez des dégradés CSS linéaires, radiaux et coniques visuellement avec aperçu en direct, préréglages et export SVG.
Border Radius Generator
Ajustez visuellement les rayons de coins. Copiez le CSS shorthand, longhand, Tailwind ou propriété custom — directement dans votre navigateur.
Générateur de Box Shadow
Créez des déclarations CSS box-shadow multicouches avec un aperçu en direct — ajustez le décalage, le flou, la diffusion et la couleur par couche
Comment choisir
Choisissez le bon outil pour votre tâche
Travail en code
Convertir entre HEX et RGB
Le convertisseur HEX ↔ RGB traduit entre toutes les notations de couleur web. Utile quand vous avez un HEX d'une spec de design et avez besoin du RGB pour une variable CSS.
Quel format ?
HEX vs HSL vs RGB — quand les utiliser ?
HEX est le plus compact et le plus pris en charge dans CSS. Utilisez RGB quand vous avez besoin de transparence (rgba). Préférez HSL dans Tailwind ou pour ajuster la luminosité de manière programmatique.
Quel format ?
Le bon format de couleur pour le bon usage
HEX
Compact et universel
Le choix par défaut pour le CSS et les design tokens. Compact, familier et supporté partout. Utilisez-le en premier choix.
#F5C842 · #F5C842CC (with alpha)
RGB / RGBA
Quand vous avez besoin d'un alpha explicite
Utilisez quand vous avez besoin d'un canal alpha lisible ou en travaillant avec canvas, Three.js ou d'autres APIs de couleur JS.
rgb(245, 200, 66) · rgba(245, 200, 66, 0.8)
HSL
Plus facile à ajuster à la main
HSL mappe vers teinte, saturation et luminosité — ce qui facilite l'assombrissement, l'éclaircissement ou le décalage manuel.
hsl(44, 90%, 61%)
OKLCH
Palettes perceptuellement uniformes
Des changements numériques égaux donnent des changements visuels égaux — idéal pour des systèmes de design accessibles et harmonieux.
oklch(83% 0.16 89)
Des outils design qui respectent votre flux
Les outils de design Tool Matic sont construits autour d'un principe : s'effacer. Choisissez une couleur, obtenez la valeur, copiez, c'est fait.
Toutes les sorties sont prêtes à coller dans le format attendu par votre code — HEX, RGB, HSL, OKLCH, chaînes CSS, SVG ou data-URIs. Les fichiers traités le sont entièrement dans votre navigateur.
Ce que vous obtenez
- Sorties prêtes à coller HEX, RGB, HSL, OKLCH, chaînes CSS — tout avec un bouton de copie.
- Exécuté dans le navigateur Tout le traitement reste dans votre navigateur. Rien n'atteint nos serveurs.
- Contraste WCAG Le Vérificateur de contraste indique les ratios de contraste WCAG 2.2.
- Sur votre appareil Couleurs, dégradés et ombres sont calculés dans votre navigateur, jamais sur un serveur.
Questions fréquentes
Les outils de design Tool Matic envoient-ils mes données ?
Non. Chaque outil de design Tool Matic s’exécute entièrement dans votre navigateur via JavaScript côté client. Vos valeurs de couleur, données de palette et sorties CSS ne sont jamais transmises à un serveur — ouvrez un outil et commencez immédiatement.
Mes données sont-elles envoyées ou stockées ?
Non. Les outils de design Tool Matic — dont le sélecteur de couleurs, le générateur de palettes, le générateur de dégradés et le vérificateur de contraste — traitent tout côté client. Aucune donnée ne quitte votre onglet. Vous pouvez le vérifier en ouvrant les DevTools et en regardant l’onglet Réseau.
Quel format de couleur utiliser en CSS - HEX, RGB, HSL ou OKLCH ?
Choisissez selon le besoin. HEX est compact et universel. RGB et RGBA ajoutent un canal alpha explicite. HSL utilise teinte/saturation/luminosité, ce qui se modifié facilement à la main. OKLCH est perceptuellement uniforme : des changements numériques égaux donnent des changements visuels égaux, utile pour les palettes accessibles. Le sélecteur de couleurs et le convertisseur HEX en RGB produisent tous ces formats.
Comment vérifier que mes couleurs respectent les contrastes WCAG ?
Comparez vos couleurs de premier plan et d’arrière-plan aux seuils de contraste WCAG 2.2 : 4,5:1 pour le texte courant, 3:1 pour le texte large et les composants d’interface, 7:1 pour AAA. Utilisez le Vérificateur de contraste — saisissez vos couleurs pour obtenir le ratio et un résultat AA/AAA instantané.
Quel format d’image est le mieux pour le web - PNG, JPG, WebP ou AVIF ?
Pour les photos, AVIF offre la plus petite taille à qualité égale, avec WebP en repli solide. JPG reste valable quand la compatibilité large compte. PNG convient au sans-perte ou à la transparence. SVG est idéal pour logos, icônes et formes géométriques qui doivent passer à l’échelle. Choisissez selon le contenu, puis le codec qui garde le fichier le plus petit à qualité acceptable.
Faut-il une connexion internet ?
Seulement pour ouvrir la page. Une fois chargée, tout le traitement se fait dans votre navigateur et rien de ce que vous saisissez n’est envoyé à un serveur. Recharger la page nécessite une connexion.
Puis-je copier les sorties directement dans mon code ?
Oui. Les sorties sont prêtes à coller en HEX, RGB, HSL, OKLCH, CSS, SVG ou data-URI selon l’outil. Chaque résultat dispose d’un bouton de copie.