Sélecteur de couleur gratuit

Sélecteur de couleur en ligne : le guide complet

Le sélecteur de couleur Volade est un outil web tout-en-un qui combine une pipette écran, un éditeur de couleur avancé, un générateur de palettes, un créateur de gradients, un vérificateur d'accessibilité WCAG, un simulateur daltonien, un mélangeur et un export développeur — le tout dans une interface unique, 100 % locale, sans inscription.

Contrairement aux éditeurs classiques qui se limitent à HEX/RGB/HSL, Volade prend en charge 16 espaces colorimétriques dont LAB, LCH, OKLCH, OKLAB, CMYK, Display P3, XYZ et HWB. Chaque format est affiché en temps réel avec un bouton de copie instantanée, ce qui en fait l'outil le plus complet pour les designers, développeurs et impressionneurs.

La pipette écran : précision pixel-perfect

La pipette écran utilise l'API EyeDropper des navigateurs modernes pour capturer n'importe quelle couleur visible sur votre écran. Cliquez n'importe où — sur une image, un site web, un document — et la couleur est instantanément capturée. La loupe haute résolution vous permet de viser le bon pixel, et le déplacement clavier (flèches) offre une précision absolue. L'échantillonnage de zone (1×1, 3×3, 5×5, 11×11) permet de lisser les artefacts de compression JPEG et d'obtenir la couleur moyenne d'une zone.

La couleur sélectionnée apparaît dans l'historique des couleurs récentes, et le passage à la couleur précédente est instantané. Pour les utilisateurs avancés, le mode précision affiche les coordonnées exactes du pixel et les valeurs de chaque canal en temps réel.

Un éditeur de couleur sans compromis

L'éditeur affiche simultanément 16 formats de couleur : HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3, XYZ et Linear RGB. Chaque valeur est éditable directement : changez le HSL, et tous les autres formats se mettent à jour en temps réel. La roue chromatique offre un contrôle visuel intuitif, tandis que les sliders numériques permettent une adjustment précise.

L'alpha/transparence est géré nativement : ajustez l'opacité de 0 à 100 % avec le slider dédié, et voyez immédiatement l'impact sur tous les formats. L'historique des modifications enregistre chaque changement, avec undo/redo pour revenir en arrière à tout moment.

Smart Color Intelligence : au-delà du simple choix

À partir d'une seule couleur, l'outil génère automatiquement toutes les harmonies classiques : complémentaires, analogues, triadiques, tétradiques, split complementary et monochromatiques. Mais il va plus loin : les variantes shades (plus foncées), tints (plus claires), tones (désaturées), warm (chaudes) et cool (froides) sont produites automatiquement.

Le mode « Generate Palette » transforme n'importe quelle couleur en design system complet : primary, secondary, accent, background, surface, text, muted, border, success, warning, error, info — chacun avec ses valeurs RGB, OKLCH et HEX.

Image → Palette : extraire les couleurs d'une photo

Déposez n'importe quelle image (photo, illustration, capture d'écran) et l'outil analyse les pixels pour en extraire la palette. Cinq modes d'extraction sont disponibles : Dominant (couleurs les plus fréquentes), Vibrant (les plus saturées), Muted (désaturées), Balanced (visuellement harmonieuses) et Brand (couleurs adaptées à une charte graphique).

L'extraction retourne entre 5 et 15 couleurs, chacune étiquetée avec son rôle potentiel (dominante, accent, sombre, claire). C'est un accélérateur majeur pour les designers qui doivent extraire une charte graphique d'une photo existante.

Vérification d'accessibilité WCAG

La section accessibilité compare deux couleurs (premier plan vs fond) et affiche le ratio de contraste exact avec les badges WCAG AA et AAA pour texte normal, texte large et composants UI. Si le ratio est insuffisant, le bouton Auto Fix propose automatiquement la couleur la plus proche qui respecte les normes.

C'est un outil indispensable pour les développeurs qui doivent se conformer aux normes d'accessibilité obligatoires (RGAA, EN 301 549, ADA, Section 508).

Simulateur daltonien : concevoir pour tous

Environ 350 millions de personnes dans le monde sont daltoniennes. Le simulateur montre vos couleurs telles qu'elles sont perçues par les huit types de daltonisme : protanopie, déutéranopie, tritanopie, achromatopsie, et leurs variantes modérées. C'est la seule façon de vérifier que votre interface est réellement accessible.

Gradient generator avec interpolation avancée

Créez des gradients linéaires, radiaux et coniques avec jusqu'à 10 points de couleur. L'interpolation RGB produit des dégradés classiques ; HSL offre des transitions plus douces ; LAB et OKLCH créent des dégradés perceptuellement uniformes sans bandes ni cassures visibles. Le code CSS est généré automatiquement et copiable en un clic.

Color Mixer : le mélange de couleurs

Mélangez deux couleurs avec un ratio configurable (de 0/100 à 100/0) dans quatre modes : RGB (melange additif), HSL (hue rotation), LAB (espace perceptuel) et OKLCH (le plus naturel). C'est l'outil idéal pour créer des couleurs intermédiaires, des ombres et des teintes personnalisées.

ΔE Color Difference : la précision des professionnels

Pour les designers et les professionnels de l'impression, le calcul de différence colorimétrique (Delta E) est essentiel. L'outil affiche ΔE76, ΔE94 et ΔE2000 avec une interprétation textuelle : imperceptible (ΔE < 1), perceptible avec effort (1-2), différent (2-10), très différent (10-50) et contraste (50+).

Color Playground : testez en conditions réelles

Le playground affiche votre couleur sur de vrais composants d'interface : boutons, cartes, badges, inputs, alerts, liens et texte. Vous voyez immédiatement si votre couleur fonctionne comme couleur de fond, couleur de bouton ou couleur de texte — avec les scores d'accessibilité en temps réel.

Export développeur : 10 formats de code

Générez le code dans votre langage : CSS Variables, SCSS, Tailwind config, JSON design tokens, TypeScript, Swift (UIColor), Kotlin (Color), Flutter/Dart, React Native (StyleSheet) et Vue. Chaque export inclut les variantes (50-950) et les rôles (primary, secondary, accent, etc.).

Qui peut en profiter ?

Les designers UI/UX qui créent des palettes et des systèmes de design ; les développeurs front-end qui intègrent des couleurs dans CSS, Tailwind ou SCSS ; les designers graphiques qui extraient des chartes depuis des photos ; les équipes accessibilité qui vérifient le contraste WCAG ; les professionnels de l'impression qui calculent les ΔE ; et tout créateur qui veut explorer les couleurs de manière professionnelle.