Selection 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, degrades, conversion d images, aides CSS et SVG — avec des sorties pretes a coller, executes localement.
7 outils
5 formats de couleur
0 envois
// 7 outils
Pipette de couleur
Selectionnez des couleurs depuis une image ou un spectre et copiez HEX, RGB, HSL, OKLCH et plus encore, entierement 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
Verificateur de contraste
Saisissez des couleurs de premier plan et d'arriere-plan pour voir instantanement 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.
Generateur de Box Shadow
Creez des declarations CSS box-shadow multicouches avec un apercu en direct — ajustez le decalage, le flou, la diffusion et la couleur par couche
Comment choisir
Choisissez le bon outil pour votre tache
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). Preferez HSL dans Tailwind ou pour ajuster la luminosite de maniere 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.
- Fonctionne hors ligne Après le premier chargement, tous les outils fonctionnent sans connexion.
Questions frequentes
Les outils de design Tool Matic envoient-ils mes donnees ?
Non. Chaque outil de design Tool Matic s execute entierement dans votre navigateur via JavaScript cote client. Vos valeurs de couleur, donnees de palette et sorties CSS ne sont jamais transmises a un serveur — ouvrez un outil et commencez immediatement.
Mes donnees sont-elles envoyees ou stockees ?
Non. Les outils de design Tool Matic — dont le selecteur de couleurs, le generateur de palettes, le generateur de degrades et le verificateur de contraste — traitent tout cote client. Aucune donnee ne quitte votre onglet. Vous pouvez le verifier en ouvrant les DevTools et en regardant l onglet Reseau.
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/luminosite, ce qui se modifie facilement a la main. OKLCH est perceptuellement uniforme : des changements numeriques egaux donnent des changements visuels egaux, utile pour les palettes accessibles. Le selecteur de couleurs et le convertisseur HEX en RGB produisent tous ces formats.
Comment verifier que mes couleurs respectent les contrastes WCAG ?
Comparez vos couleurs de premier plan et d arriere-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 Verificateur de contraste — saisissez vos couleurs pour obtenir le ratio et un resultat AA/AAA instantane.
Quel format d image est le mieux pour le web - PNG, JPG, WebP ou AVIF ?
Pour les photos, AVIF offre la plus petite taille a qualite egale, avec WebP en repli solide. JPG reste valable quand la compatibilite large compte. PNG convient au sans-perte ou a la transparence. SVG est ideal pour logos, icones et formes geometriques qui doivent passer a l echelle. Choisissez selon le contenu, puis le codec qui garde le fichier le plus petit a qualite acceptable.
Puis-je utiliser ces outils de design hors ligne ?
Une connexion est necessaire pour le premier chargement. Ensuite, les outils continuent de fonctionner car le calcul reste dans votre navigateur, sans aller-retour serveur.
Puis-je copier les sorties directement dans mon code ?
Oui. Les sorties sont pretes a coller en HEX, RGB, HSL, OKLCH, CSS, SVG ou data-URI selon l outil. Chaque resultat dispose d un bouton de copie.