Le sélecteur de couleurs prend-il en charge les appareils tactiles ?

Oui. Les interactions Canvas fonctionnent avec le toucher sur les appareils mobiles et les tablettes.

Puis-je coller directement des valeurs RVB ou HSL ?

Oui. Les formats pris en charge sont analysés et l'état du sélecteur passe à cette couleur.

Combien de couleurs récentes sont enregistrées ?

Les 10 dernières couleurs sélectionnées sont stockées dans localStorage.

Le vérificateur de contraste respecte-t-il les normes WCAG ?

Oui. Il indique le rapport de contraste avec le statut réussite/échec AA et AAA.

Puis-je copier la couleur HEX en un seul clic ?

Oui. L’action de copie est disponible pour la sortie HEX.

Puis-je également copier les valeurs RVB et HSL ?

Oui. Les formats RVB, RGBA, HSL et HSLA prennent chacun en charge la copie.

Cela inclut-il le contrôle du canal alpha ?

Oui. Le curseur Alpha met à jour les sorties RGBA et HSLA.

Puis-je l'utiliser pour les couleurs de texte accessibles ?

Oui. Utilisez le vérificateur de contraste pour tester la lisibilité par rapport aux couleurs d’arrière-plan.

Puis-je utiliser le sélecteur pour les jetons de conception CSS ?

Oui. Il est utile pour créer et copier des valeurs de couleur prêtes pour CSS.

Cet outil nécessite-t-il une bibliothèque de couleurs externe ?

Non. La logique du sélecteur est implémentée directement avec Canvas et JS.

Puis-je réutiliser rapidement les anciennes couleurs de la palette ?

Oui. Les pastilles de couleurs récentes permettent un rappel rapide de la palette.

Est-ce adapté aux concepteurs d’interface utilisateur ?

Oui. Il facilite la sélection visuelle et la conversion de format en un seul endroit.

Les développeurs frontend peuvent-ils l'utiliser pour l'implémentation ?

Oui. Il fournit des chaînes HEX/RGB/HSL prêtes pour la production.

Est-ce que cela fonctionne hors ligne après le premier chargement ?

Oui. La conversion des couleurs et la logique de contraste s'exécutent côté client.

Puis-je vérifier la conformité du contraste AAA ?

Oui. Le badge réussite/échec AAA s’affiche lorsque le ratio est suffisamment élevé.

Puis-je partager la couleur sélectionnée via une URL ?

Oui. La couleur actuelle est exposée via des paramètres partageables.

Color Picker With HEX RGB HSL Converter and Contrast Checker

TeinteAlpha 1.00

Coller HEX/RGB/HSL pour naviguer

HEX#2EA8E6

RGBrgb(46, 168, 230)

RGBArgba(46, 168, 230, 1.00)

HSLhsl(200, 79%, 54%)

HSLAhsla(200, 79%, 54%, 1.00)

Couleurs récentes

Vérificateur de contraste

Premier planArrière-plan

Portez ce vieux whisky au juge blond qui fume.

Rapport de contraste : 21.00:1

AA RéussiAAA Réussi

Outils associés

CSS Gradient Generator

developer

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

Try it free

HTML CSS JS Minifier

developer

Minify HTML, CSS, and JavaScript instantly with size savings stats.

Try it free

Base64 Encoder Decoder

developer

Encode and decode text/files to Base64 with drag-and-drop support.

Try it free

Intégrer cet outil

Ajoutez cet outil à votre site avec un extrait iframe.

<iframe src="https://dukotools.com/tools/color-picker?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="color-picker tool"></iframe>

About Color Picker & Converter

Color Picker & Converter offre un flux de travail de sélection de couleurs basé sur une toile avec conversion en direct entre les formats HEX, RVB, RGBA, HSL et HSLA. Il prend en charge les interactions avec la souris et le toucher via un canevas de saturation-luminosité et un curseur de teinte, ce qui le rend pratique sur ordinateur et mobile. Les couleurs récentes sont stockées dans localStorage afin que les concepteurs et les développeurs puissent revoir les palettes au fil des sessions. Un vérificateur de contraste calcule le rapport WCAG et le statut réussite/échec pour les cibles AA et AAA. Cela rend l'outil précieux pour la conception de l'interface utilisateur, les audits d'accessibilité et le transfert de la mise en œuvre du frontend.

Principales fonctionnalités

Interaction du sélecteur de toile
Sélectionnez la saturation et la luminosité sur un canevas visuel pour une exploration intuitive des couleurs.
Contrôles de teinte et alpha
Ajustez la teinte et la transparence séparément pour un réglage précis du style.
Conversion multiformat
Lisez et copiez instantanément les représentations HEX, RVB, RGBA, HSL et HSLA.
Analyse des entrées
Collez les valeurs de texte HEX, RVB ou HSL et passez l'état du sélecteur à la couleur correspondante.
Mémoire de couleurs récente
Conserve les 10 dernières couleurs dans le stockage du navigateur pour une réutilisation rapide de la palette.
Vérificateur de contraste WCAG
Calculez le rapport et le statut AA/AAA pour les combinaisons de couleurs de premier plan et d’arrière-plan.

Comment utiliser

1
Choisissez la couleur de base sur la toile
Utilisez le toucher ou la souris pour définir visuellement la saturation et la luminosité.
2
Ajuster la teinte et l'alpha
Affinez la famille de couleurs et la transparence grâce aux contrôles de plage.
3
Copier le format souhaité
Choisissez la sortie HEX, RVB, RGBA, HSL ou HSLA et copiez en un clic.
4
Vérifier le contraste d'accessibilité
Entrez les valeurs de premier plan et d’arrière-plan pour évaluer la conformité WCAG.
5
Enregistrer les favoris
Utilisez la mémoire de couleurs récente pour réappliquer les couleurs de la palette au fil des sessions.

Cas d'utilisation réels

Transfert de conception

Un concepteur partage les jetons HSLA et HEX exacts avec l'ingénierie frontale pour la mise en œuvre.

Contrôle qualité de l'accessibilité

Un spécialiste de l'assurance qualité valide les combinaisons texte-arrière-plan par rapport aux critères AA et AAA.

Itération de la palette de marque

Un spécialiste du marketing explore les nuances et réutilise rapidement les couleurs récentes pour les éléments de campagne.

Foire aux questions

Related Free Tools

Explore these tools that work great alongside Color Picker & Converter:

CSS Gradient Generator

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

HTML CSS JS Minifier

Minify HTML, CSS, and JavaScript instantly with size savings stats.

Base64 Encoder Decoder

Encode and decode text/files to Base64 with drag-and-drop support.