Outils de design en ligne gratuits
Des utilitaires de couleur et de design pour designers et développeurs. Choisissez des couleurs avec les conversions HEX/RGB/HSL/CMJN, générez des dégradés CSS, vérifiez les ratios de contraste d'accessibilité WCAG, créez des palettes et mesurez à l'écran.
Pourquoi utiliser des outils de design en ligne ?
Les choix rapides de couleur, les vérifications d'accessibilité et la génération de dégradés sont des tâches constantes en design et en développement front-end. Disposer d'outils dans le navigateur permet de vérifier un ratio de contraste ou de générer un dégradé sans ouvrir Figma, Photoshop ou une application de bureau distincte. Nos outils de design sont instantanés, précis et toujours gratuits.
Accessibilité et conformité WCAG
Les directives WCAG (Web Content Accessibility Guidelines) exigent un ratio de contraste minimal entre le texte et l'arrière-plan : 4,5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA. Notre Vérificateur de contraste donne un résultat réussi/échoué instantané pour tous les critères WCAG AA et AAA. Concevoir des produits accessibles n'est pas optionnel — le Vérificateur de contraste facilite la vérification de la conformité pendant le design, et non après.
Référence des formats de couleur
HEX (#RRGGBB)
Le format le plus courant en design web. Utilisé en CSS, HTML et outils de design. Facile à copier-coller directement dans le code. Exemple : #0070f3
RGB (R, G, B)
Spécifie les canaux rouge, vert et bleu de 0 à 255. Utilisé en CSS comme rgb(0, 112, 243). Pratique pour créer des variations de couleur par programmation.
HSL (T, S%, L%)
Teinte (0–360°), Saturation (0–100%), Luminosité (0–100%). Le plus intuitif pour les humains. Créer des variantes plus claires ou plus foncées d'une couleur est simple en HSL. Utilisé en CSS comme hsl(211, 100%, 48%).
CMJN (C%, M%, J%, N%)
Utilisé en design pour l'impression. Canaux Cyan, Magenta, Jaune et Noir (Key). Convertissez votre couleur d'écran vers l'équivalent CMJN le plus proche pour préparer l'impression.
Comparaisons connexes
Foire aux questions
Quel ratio de contraste me faut-il pour l'accessibilité ?
WCAG AA — le niveau exigé par la plupart des lois sur l'accessibilité — requiert 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt/24 px normal ou 14 pt gras). AAA porte cela à 7:1 et 4,5:1. Le Vérificateur de contraste affiche les quatre seuils à la fois.
Quel format de couleur utiliser en CSS ?
Utilisez HEX pour les couleurs de marque statiques, RGBA quand il faut de l'opacité, et HSL pour générer des nuances ou des thèmes. Les trois décrivent les mêmes couleurs — le Sélecteur de couleur affiche HEX, RGB, HSL et CMJN simultanément pour toute couleur.
Les outils de design sont-ils gratuits ?
Oui. Chaque outil de couleur et de design est entièrement gratuit, sans compte ni inscription. Ils s'exécutent dans votre navigateur comme alternative rapide à l'ouverture de Figma, Photoshop ou d'une application de bureau.
Puis-je convertir entre HEX, RGB, HSL et CMJN ?
Oui. Le Sélecteur de couleur convertit toute couleur sélectionnée dans les quatre formats à la fois, génère une gamme de nuances et affiche le ratio de contraste WCAG sur fond blanc et noir.