Sélecteur de couleur professionnel - Conversion HEX, RGB, HSL et plus

Choisissez des couleurs, convertissez des formats et créez des palettes harmonieuses

Comprendre les formats de couleur HEX, RGB, HSL et RGBA

Notre sélecteur de couleur prend en charge tous les formats de couleur courants et les convertit en temps réel :

HEX : Représentation hexadécimale (p. ex. #3B82F6) – standard en design web Hexadecimal representation (e.g. #3B82F6) – standard in web designHEX:HEX: Hexadecimal representation (e.g. #3B82F6) – standard in web design Hexadecimal representation (e.g. #3B82F6) – standard in web design Hexadezimale Darstellung (z.B. #3B82F6) – Standard im Webdesign
RGB : Valeurs rouge, vert, bleu de 0-255 (p. ex. rgb(59, 130, 246)) Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246))RGB:RGB: Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246)) Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246)) Rot, Grün, Blau Werte von 0-255 (z.B. rgb(59, 130, 246))
RGBA : RGB avec canal alpha pour la transparence (p. ex. rgba(59, 130, 246, 0.8)) RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8))RGBA:RGBA: RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8)) RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8)) RGB mit Alpha-Kanal für Transparenz (z.B. rgba(59, 130, 246, 0.8))
HSL : Teinte, saturation, luminosité – intuitif pour les designers Hue, saturation, lightness – intuitive for designersHSL : Hue, saturation, lightness – intuitive for designers Farbton, Sättigung, Helligkeit – intuitiv für Designer
HSLA : HSL avec canal alpha pour la transparence HSL with alpha channel for transparencyHSLA : HSL with alpha channel for transparency HSL mit Alpha-Kanal für Transparenz

Contrastes de couleurs accessibles avec le contrôle WCAG

Notre sélecteur de couleur prend en charge tous les formats de couleur courants et les convertit en temps réel :

Standard AA : Rapport de contraste d'au moins 4.5:1 pour le texte normal Contrast ratio of at least 4.5:1 for normal textStandard AA : Contrast ratio of at least 4.5:1 for normal text Kontrastverhältnis von mindestens 4.5:1 für normalen Text
Standard AA (grand) : Rapport de contraste d'au moins 3:1 pour le texte grand (à partir de 18px) Contrast ratio of at least 3:1 for large text (from 18px)Standard AA (grand) : Contrast ratio of at least 3:1 for large text (from 18px) Kontrastverhältnis von mindestens 3:1 für großen Text (ab 18px)
Standard AAA : Rapport de contraste d'au moins 7:1 pour des exigences accrues Contrast ratio of at least 7:1 for enhanced requirementsStandard AAA : Contrast ratio of at least 7:1 for enhanced requirements Kontrastverhältnis von mindestens 7:1 für erhöhte Anforderungen

Notre outil vous montre immédiatement si votre combinaison de couleurs respecte les standards AA ou AAA et vous aide à créer des designs inclusifs et accessibles.

Harmonies de couleurs pour des designs parfaits

Notre outil vous montre immédiatement si votre combinaison de couleurs respecte les standards AA ou AAA et vous aide à créer des designs inclusifs et accessibles.

Complémentaire : Couleurs opposées dans le cercle chromatique – contraste élevé Colors opposite each other on the color wheel – high contrastComplémentaire : Colors opposite each other on the color wheel – high contrast Farben gegenüberliegen im Farbkreis – hoher Kontrast
Analogique : Couleurs adjacentes – palettes harmonieuses et apaisantes Adjacent colors – harmonious and calming palettesAnalogique : Adjacent colors – harmonious and calming palettes Benachbarte Farben – harmonische und beruhigende Paletten
Triadique : Trois couleurs à égale distance – vif et équilibré Three colors equally spaced – vibrant and balancedTriadique : Three colors equally spaced – vibrant and balanced Drei Farben mit gleichem Abstand – lebendig und ausgewogen
Monochromatique : Différents niveaux de luminosité d'une couleur – élégant et minimaliste Different lightness levels of one color – elegant and minimalistMonochromatique : Different lightness levels of one color – elegant and minimalist Verschiedene Helligkeitsstufen einer Farbe – elegant und minimalistisch

Shades & Tints - Dégradés de couleurs

La fonction -génère automatiquement 10 déclinaisons de votre couleur choisie. Les shades (tons plus sombres) et les tints (tons plus clairs) vous aident à créer des systèmes de couleurs cohérents pour vos projets.

Pipette et historique des couleurs

Avec la, vous pouvez prélever des couleurs directement à l'écran. L'enregistre vos 10 dernières couleurs sélectionnées localement dans le navigateur, afin que vous puissiez accéder rapidement aux couleurs précédemment utilisées.

Options d'export pour développeurs

Variables CSS : :root { --primary-color: #3b82f6; } :root { --primary-color: #3b82f6; }CSS variables:CSS variables: :root { --primary-color: #3b82f6; } :root { --primary-color: #3b82f6; } :root { --primary-color: #3b82f6; }
Config Tailwind : Configuration directement copiable pour Tailwind CSS Directly copyable configuration for Tailwind CSSConfig Tailwind : Directly copyable configuration for Tailwind CSS Direkt kopierbare Konfiguration für Tailwind CSS

Questions fréquentes (FAQ)

Le sélecteur de couleur est-il vraiment gratuit ?

Notre sélecteur de couleur est 100% gratuit. Il n'y a aucun coût caché, aucune inscription et aucune restriction d'utilisation. Vous pouvez utiliser toutes les fonctions sans limite.

Mes couleurs sont-elles enregistrées ?

L'historique des couleurs est enregistré localement dans votre navigateur. Vous pouvez le supprimer à tout moment via les paramètres du navigateur. Aucune donnée n'est transmise à des serveurs.

La pipette fonctionne-t-elle sur tous les navigateurs ?

Dans Chrome, Edge et Opera, l'API EyeDropper native est utilisée, avec laquelle vous pouvez prélever des couleurs directement à l'écran. Dans Firefox et les autres navigateurs sans cette API, vous pouvez téléverser une image (ou la faire glisser-déposer) et prélever les couleurs à partir de celle-ci. C'est une restriction de sécurité du navigateur – JavaScript ne peut pas accéder à l'écran en dehors de la fenêtre du navigateur. (oder per Drag & Drop hineinziehen) und daraus Farben aufnehmen. Dies ist eine Browser-Sicherheitsbeschränkung – JavaScript kann nicht auf den Bildschirm außerhalb des Browser-Fensters zugreifen.

Quelle est la précision du contrôleur de contraste WCAG ?

Le contrôleur de contraste calcule le rapport de contraste selon les directives officielles WCAG 2.1 et prend en compte la luminosité relative des couleurs selon le standard W3C. guidelines and takes into account the relative brightness of colors according to the W3C standard.The contrast checker calculates the contrast ratio according to the official WCAG 2.1 guidelines and takes into account the relative brightness of colors according to the W3C standard. Richtlinien und berücksichtigt die relative Helligkeit von Farben nach dem W3C-Standard.