Choisissez visuellement ou collez n'importe quelle valeur — HEX, RGB, HSL, OKLCH et OKLAB restent synchronisés. Inclut un vérificateur de contraste WCAG 2.2 et un générateur de palettes basé sur OKLCH. S'exécute entièrement dans votre navigateur.
Choisissez visuellement ou collez n'importe quelle valeur — HEX, RGB, HSL, OKLCH et OKLAB restent synchronisés. Inclut un vérificateur de contraste WCAG 2.2 et un générateur de palettes basé sur OKLCH. S'exécute entièrement dans votre navigateur.
Collez votre valeur hexadécimale (par exemple #ff5722) dans le champ HEX — la ligne RGB se mettra à jour instantanément. De même, collez rgb(255 87 34) dans le champ RGB et HEX, HSL, OKLCH et OKLAB se synchroniseront tous. La conversion est bidirectionnelle entre tous les formats pris en charge.
OKLCH est un espace colorimétrique du CSS Color Module Level 4 qui utilise la luminosité perceptuelle (L), la chromaticité (C) et la teinte (h) — comme HSL, mais perceptuellement uniforme. Deux couleurs OKLCH avec la même valeur L paraissent aussi lumineuses, même à des teintes différentes. Cela rend les design tokens, les palettes générées et les rampes de couleurs accessibles bien plus prévisibles qu'avec HSL. Tous les navigateurs evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) le prennent en charge.
Les valeurs de couleur ne quittent jamais votre appareil. Ouvrez DevTools → Network et vous verrez zéro requête sortante pendant la conversion, la sélection, la génération de palette ou la vérification du contraste.
Des design systems aux audits d'accessibilité — tous les formats et vérifications dont vous avez besoin, au même endroit.
Conversion bidirectionnelle entre HEX (3 / 4 / 6 / 8 chiffres), RGB(A), HSL(A), OKLCH, OKLAB et les couleurs nommées CSS. Les chaînes de sortie respectent la syntaxe CSS Color Module Level 4 — collez-les directement dans vos feuilles de style.
Visualisez le rapport de contraste entre deux couleurs avec des badges réussite/échec en un clic pour AA (4.5 : 1) et AAA (7 : 1), pour les tailles de texte normales et grandes. Le calcul est conforme à la référence W3C : linéarisation sRGB, luminance relative, puis (L1+0.05)/(L2+0.05).
Cliquez sur la pipette pour échantillonner n'importe quelle couleur à l'écran — maquettes, captures d'écran, photos, et même d'autres onglets de navigateur. Utilise l'API native EyeDropper sur les navigateurs Chromium.
Générez 9 niveaux de teintes et nuances ainsi que des harmonies complémentaires, triadiques et analogues — calculées en OKLCH afin que chaque pas soit perceptuellement uniforme (contrairement à HSL, où la luminosité varie fortement).
Chaque conversion s'exécute en JavaScript sur votre appareil. Rien n'est téléversé, journalisé ni envoyé à un tiers — ouvrez DevTools → Network si vous souhaitez le vérifier vous-même.
JavaScript pur, sans runtime de framework. Le chargement initial pèse moins de 50 Ko gzippés; les conversions et la génération de palette se terminent en moins d'une milliseconde sur un ordinateur portable de cinq ans.
Quatre façons de commencer, tous les formats synchronisés.
Glissez à l'intérieur du carré saturation/valeur pour choisir la nuance, faites glisser la barre de teinte en dessous pour changer la couleur de base, et utilisez le curseur alpha pour la transparence. Tous les formats à droite se mettent à jour instantanément.
Collez un HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) ou même une couleur nommée CSS (tomato) dans le champ correspondant — le sélecteur et les autres formats se synchronisent.
Cliquez sur le bouton pipette pour capturer n'importe quel pixel à l'écran — un autre onglet, une capture d'écran, une photo, une icône. Utilise l'API native EyeDropper sur Chrome, Edge et Opera.
Cliquez sur l'icône de copie à côté de n'importe quel format pour le placer dans votre presse-papiers. Ou faites défiler jusqu'à la section de contraste WCAG 2.2 pour vérifier si votre combinaison premier-plan / arrière-plan satisfait AA ou AAA pour les tailles de texte normales et grandes.
Un outil de couleurs qui s'adapte à quatre flux de travail courants.
Convertissez les valeurs HEX de marque en OKLCH afin que chaque nuance de votre rampe de tokens ait le même pas de luminosité perceptuelle. Collez la sortie OKLCH directement dans votre CSS — aucun préprocesseur nécessaire.
Saisissez des paires premier-plan / arrière-plan et lisez le rapport de contraste ainsi que les badges AA / AAA. Détectez les combinaisons défaillantes avant la mise en production — respecte les seuils imposés par le W3C de 4.5 : 1 normal / 7 : 1 renforcé.
Vous avez un HEX issu d'une maquette de designer mais vous avez besoin d'un HSL pour une configuration Tailwind ou d'un OKLCH pour une feuille de style moderne ? Collez une fois, copiez dans n'importe quel format. Les chaînes de sortie sont une syntaxe CSS Color Module Level 4 valide.
Choisissez une couleur de base et voyez instantanément neuf teintes et nuances perceptuellement espacées plus des harmonies complémentaires, triadiques et analogues — générées en OKLCH afin que chaque pas paraisse uniformément lumineux.
Les valeurs de couleur ne quittent jamais votre appareil. Ouvrez DevTools → Network et vous verrez zéro requête sortante pendant la conversion, la sélection, la génération de palette ou la vérification du contraste.
Tutoriels triés sur le volet pour designers, développeurs et équipes d'accessibilité.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Collez votre valeur hexadécimale (par exemple #ff5722) dans le champ HEX — la ligne RGB se mettra à jour instantanément. De même, collez rgb(255 87 34) dans le champ RGB et HEX, HSL, OKLCH et OKLAB se synchroniseront tous. La conversion est bidirectionnelle entre tous les formats pris en charge.
OKLCH est un espace colorimétrique du CSS Color Module Level 4 qui utilise la luminosité perceptuelle (L), la chromaticité (C) et la teinte (h) — comme HSL, mais perceptuellement uniforme. Deux couleurs OKLCH avec la même valeur L paraissent aussi lumineuses, même à des teintes différentes. Cela rend les design tokens, les palettes générées et les rampes de couleurs accessibles bien plus prévisibles qu'avec HSL. Tous les navigateurs evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) le prennent en charge.
Oui. Nous utilisons l'algorithme de WCAG 2.2 §1.4.3 : linéariser chaque canal sRGB, calculer la luminance relative (0.2126·R + 0.7152·G + 0.0722·B), puis (L_clair + 0.05) / (L_foncé + 0.05). AA passe à 4.5 : 1 pour le texte normal et 3 : 1 pour le grand texte (18 pt+ ou 14 pt+ gras). AAA passe à 7 : 1 et 4.5 : 1 respectivement.
Oui — cliquez sur le bouton Pipette pour lancer l'API EyeDropper intégrée au navigateur. Vous pouvez échantillonner n'importe quel pixel à l'écran : un autre onglet, une maquette Figma, une image vidéo, voire une capture d'écran. Actuellement pris en charge sur Chrome, Edge et Opera; Firefox et Safari basculent gracieusement (le bouton est désactivé).
Non. Le sélecteur, chaque conversion, le générateur de palette et le vérificateur de contraste s'exécutent tous dans votre navigateur. Aucune valeur de couleur, aucun échantillon d'image et aucun texte ne sont jamais transmis. Vous pouvez ouvrir DevTools → Network et vérifier qu'il n'y a aucune requête sortante pendant l'utilisation.