Convertisseur de codes couleur

📋

Étapes

Comment utiliser cette calculatrice

3 étapes

1

Saisissez une couleur

Saisissez une couleur dans n’importe quel format (HEX, RGB, HSL, HSV, CMYK, HWB, Oklab, Oklch, Display P3, HexInt ou nom CSS) ou utilisez le sélecteur natif ou la pipette pour mettre à jour instantanément tous les formats.

2

Explorez la palette

Passez à l’onglet Palette et harmonies pour créer des couleurs complémentaires, triadiques ou analogues et les exporter en variables CSS, configuration Tailwind, SCSS, SwiftUI, Jetpack Compose ou tokens de design.

3

Vérifiez l’accessibilité

Dans l’onglet Contraste et accessibilité, vérifiez la conformité WCAG 2.1 et APCA, consultez les corrections rapides et prévisualisez les couleurs avec la protanopie, la deutéranopie, la tritanopie et l’achromatopsie.

⚡

Référence

Formule et méthodologie

5 formules

Conversion RGB → HSL

L = (max + min) / 2; S = L<0.5 ? (max−min)/(max+min) : (max−min)/(2−max−min); H = hue_angle(r, g, b)

Conversion HSL standard de CSS. Les valeurs RGB normalisées (0–1) deviennent une teinte (0–360°), une saturation (0–1) et une luminosité (0–1). La transformation inverse renvoie les valeurs RGB.

Transformation OKLab / OKLCH (Ottosson, 2020)

L, a, b = M_2 × cbrt(M_1 × RGB_linear); C = sqrt(a² + b²); H = atan2(b, a)

Les canaux sRGB linéaires sont transformés dans l’espace de réponse conique LMS; une compression par racine cubique produit la luminosité OKLab (L) et les canaux chromatiques opposés (a, b), puis la chroma polaire (C) et l’angle de teinte (H).

Espace colorimétrique Display P3 (D65)

P3_linear = M_srgb_to_p3 × RGB_linear; P3 = sRGB_transfer_inverse(P3_linear)

Transforme les coordonnées sRGB standard vers l’espace à large gamut Display P3 d’Apple au moyen de matrices de transformation utilisant le blanc de référence D65.

Luminance relative et rapport de contraste WCAG 2.1

L = 0.2126 × R + 0.7152 × G + 0.0722 × B; Ratio = (L_lighter + 0.05) / (L_darker + 0.05)

Les canaux RGB linéarisés sont combinés avec les pondérations de luminance standard. Le rapport va de 1:1 à 21:1. WCAG AA exige 4.5:1 pour le texte courant et 3:1 pour les grands caractères.

APCA (algorithme avancé de contraste perceptuel)

L_c = (S_bg − S_txt) × 1.14 / 0.027 where S = Y^0.56 (dark-on-light) or Y^0.65 (light-on-dark)

Candidat pour WCAG 3. Il modélise la vision spatiale humaine et l’adaptation à la lumière pour calculer le contraste de luminosité L_c entre le texte et l’arrière-plan.

📖

Glossaire

Termes clés expliqués

9 termes

HEX Représentation RGB hexadécimale, par exemple `#FF5733` ou `#F53` (format abrégé); chaque paire de chiffres hexadécimaux code un canal (00–FF = 0–255). Une quatrième paire facultative ajoute l’alpha pour la transparence.

RGB / RGBA Modèle additif rouge-vert-bleu, avec des canaux de 8 bits (0–255). Utilisé nativement par les écrans numériques, qui affichent les couleurs en mélangeant des sous-pixels RGB d’intensités variables.

HSL / HSLA Modèle cylindrique teinte-saturation-luminosité. La teinte est l’angle couleur (0–360°), la saturation mesure la pureté (0–100 %) et la luminosité va du noir au blanc (0–100 %).

HSV / HSB Autre modèle cylindrique teinte-saturation-valeur (ou luminosité). Il diffère de HSL par la définition de l’axe de luminosité : la valeur maximale HSV correspond à une couleur pure et saturée; la luminosité maximale HSL correspond au blanc.

CMYK Modèle soustractif cyan-magenta-jaune-noir utilisé en impression, avec des canaux de 0 à 100 %. La conversion depuis RGB entraîne une perte, car les gamuts CMYK et RGB diffèrent.

HWB Modèle CSS de niveau 4 teinte-blancheur-noirceur, conçu pour être intuitif pour les artistes et les designers.

OKLab / OKLCH Espaces colorimétriques perceptuellement uniformes créés par Björn Ottosson et normalisés dans CSS Color Level 4. Des incréments numériques égaux produisent des différences visuelles comparables selon la teinte et la chroma.

Display P3 Espace colorimétrique RGB à large gamut créé par Apple et normalisé par SMPTE. Il offre un volume de couleurs environ 25 % plus grand que le sRGB standard, surtout dans les verts et les rouges.

APCA Algorithme avancé de contraste perceptuel, candidat pour WCAG 3, qui évalue le contraste et la lisibilité selon la fréquence spatiale, le poids de la police et les sciences optiques modernes.

👥

Situations types

Exemples concrets

2 exemples

🎨

Designer — palette de marque

Conversion d’une couleur principale de marque depuis son code HEX vers les formats CSS modernes, avec une échelle perceptuelle de nuances pour les composants de l’interface.

Couleur principale #0E7490 Formats souhaités Tous les formats et une échelle de nuances OKLab en 11 étapes Export Propriétés personnalisées CSS et configuration Tailwind

Le HEX `#0E7490` devient RGB `rgb(14, 116, 144)`, HSL `hsl(192, 82%, 31%)`, OKLab `oklab(52.4% -0.065 -0.052)` et Display P3 `color(display-p3 0.183 0.442 0.548)`. L’échelle perceptuelle à 11 niveaux préserve la fidélité de la couleur de base au niveau 500.

♿

Développeur — contrôle d’accessibilité et APCA

Un développeur vérifie si une couleur de texte gris clair respecte WCAG AA et APCA sur fond blanc, avant de valider une modification CSS.

Premier plan #9CA3AF (Tailwind gray-400) Arrière-plan #FFFFFF (white) Taille du texte Texte courant (14–18 px)

Rapport de contraste : 2.85:1 (APCA Lc -41.2) — NON CONFORME à WCAG AA (minimum 4.5:1) et à la note APCA pour le texte courant. L’outil propose `#6B7280` (gray-500) à 4.66:1 ou `#4B5563` (gray-600) à 7.56:1 comme options conformes.

🔗

Référence

Citer cette calculatrice

APA et MLA

Utilisez un de ces formats pour citer cette calculatrice dans un devoir ou un rapport.

APA

MLA

📄

Analyse approfondie

Codes couleur : formats, conversion et accessibilité

3 chapitres · 5 min de lecture

Les couleurs numériques existent dans de nombreux formats, adaptés à des usages différents : HEX pour le Web, RGB pour les écrans, CMYK pour l’impression, HSL pour les réglages intuitifs, OKLab et OKLCH pour des échelles perceptuellement uniformes et Display P3 pour les écrans à large gamut. Un bon outil convertit précisément entre ces formats, crée des palettes harmonieuses fondées sur la théorie des couleurs et vérifie l’accessibilité avant la publication. Les sections suivantes expliquent la diversité des formats, le calcul des harmonies et l’importance de la conformité WCAG et APCA dans le design numérique professionnel.

Pourquoi existe-t-il plusieurs formats couleur ?

Chaque format répond à un besoin que les autres gèrent moins bien. RGB est le format natif des écrans : chaque écran mélange des sous-pixels rouges, verts et bleus. Mais ses valeurs ne correspondent pas intuitivement à la perception humaine; il est difficile d’assombrir une couleur sans calculer les canaux. HEX représente simplement RGB en notation hexadécimale compacte, omniprésente en CSS et en conception Web. HSL répond mieux à l’intuition : la teinte correspond à l’angle sur le cercle chromatique, la saturation règle l’intensité et la luminosité règle l’éclat. Les sélecteurs de couleur des outils de design utilisent souvent HSL pour cette raison. HSV/HSB est proche de HSL, mais définit différemment la luminosité. CMYK sert à l’impression : les imprimantes utilisent des encres cyan, magenta, jaune et noire, avec un mélange soustractif différent. OKLab et OKLCH sont des espaces perceptuels modernes où des incréments numériques égaux produisent des différences visuelles égales. Ils conviennent à des échelles accessibles mieux espacées que celles générées en HSL. Les espaces à large gamut, comme Display P3, offrent environ 25 % de verts et rouges plus riches sur les écrans modernes. Un bon outil convertit tous ces formats en tenant compte des différences de gamut.

Comment fonctionnent les harmonies de couleurs

Les harmonies regroupent des couleurs qui se marient bien, selon une théorie mathématique : on fait tourner l’angle de teinte dans l’espace colorimétrique en maintenant constantes la saturation et la luminosité. Les sept harmonies standard sont : complémentaire (+180°, couleurs opposées), pour un contraste marqué et des accents; analogue (±30°, voisines), pour un rendu unifié; triadique (+120°, +240°), trois couleurs également espacées; complémentaire divisée (+150°, +210°), plus douce que la complémentaire pure; tétradique (+60°, +180°, +240°), quatre couleurs en rectangle; carrée (+90°, +180°, +270°), quatre couleurs également espacées, variées mais difficiles à équilibrer; et monochromatique, où la teinte reste constante tandis que la luminosité ou la saturation varie. La rotation est simple, mais le résultat dépend de la saturation et de la luminosité de départ. Cet outil génère les sept harmonies pour toute couleur et les exporte en CSS, Tailwind, SCSS, SwiftUI, Jetpack Compose ou tokens de design.

Conformité du contraste WCAG et APCA

Les exigences de contraste des Web Content Accessibility Guidelines (WCAG) sont devenues obligatoires dans de nombreuses juridictions et influencent directement les choix de design. WCAG 2.1 définit des rapports minimaux entre le texte et son arrière-plan à partir de leur luminance relative. Le niveau AA, cible habituelle, exige 4.5:1 pour le texte courant et 3:1 pour le grand texte (18 pt gras ou 24 pt). Le niveau AAA exige 7:1 pour le texte courant et 4.5:1 pour le grand texte. La norme WCAG 3 en développement introduit APCA, qui prend en compte la fréquence spatiale, le poids de la police, la polarité de l’arrière-plan et l’adaptation à la lumière pour calculer un contraste (Lc) plus proche de la perception physiologique. Ces ratios sont obligatoires pour les applications gouvernementales et commerciales couvertes par Section 508 et l’ADA. L’onglet Contraste et accessibilité affiche les scores WCAG 2.1 et APCA, propose des corrections accessibles en un clic et simule les principales déficiences de la vision des couleurs.

❓

Questions

Questions fréquentes

7 questions

Quels formats couleur cet outil prend-il en charge ?+

Le convertisseur prend en charge HEX (3, 4, 6 ou 8 chiffres avec alpha), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, HWB (CSS Level 4), OKLab, OKLCH (CSS Level 4), Display P3 (CSS Color 4), les entiers HexInt/décimaux et plus de 140 noms CSS, comme `coral`, `steelblue` ou `rebeccapurple`. Saisissez un format et les autres se mettent à jour instantanément.

Que sont OKLab et OKLCH, et pourquoi les utiliser ?+

OKLab et OKLCH sont des espaces colorimétriques perceptuellement uniformes conçus par Björn Ottosson et normalisés dans CSS Color Level 4. Contrairement à HSL, des changements égaux de luminosité ou de chroma y paraissent égaux à l’œil, sans dérive de teinte ni anomalie de luminosité lors de la création d’échelles ou de dégradés.

Qu’est-ce que le gamut large Display P3 ?+

Display P3 est un espace RGB à large gamut couvrant environ 25 % de couleurs visibles de plus que le sRGB standard. Il équipe les iPhone, iPad et Mac récents ainsi que des écrans Android haut de gamme. CSS Color 4 permet de l’utiliser avec `color(display-p3 r g b)`.

Quelle différence entre le contraste WCAG 2.1 et APCA ?+

WCAG 2.1 utilise un rapport mathématique de luminances relatives, avec des seuils AA (4.5:1) et AAA (7:1). APCA, candidat pour WCAG 3, modélise la taille du texte, le poids de la police et la polarité de l’arrière-plan à partir de données modernes sur la vision, afin de mieux prédire la lisibilité.

Comment fonctionne la simulation du daltonisme ?+

La simulation utilise le modèle physiologique de Machado (2009) pour représenter la protanopie (déficience rouge), la deutéranopie (verte), la tritanopie (bleue) et l’achromatopsie (vision monochrome ou absence totale de perception des couleurs).

Comment sont calculées les harmonies et les nuances ?+

Les harmonies résultent de la rotation de la teinte dans un espace cylindrique (complémentaire +180°, triadique +120°/+240°, analogue ±30°, etc.). L’échelle de nuances à 11 niveaux utilise une interpolation perceptuelle OKLab pour créer des teintes et des ombres régulières, sans aspect terne, en conservant exactement la couleur saisie au niveau 500.

Mes données sont-elles protégées ?+

Oui. L’outil fonctionne entièrement dans votre navigateur. Aucune couleur, capture de la pipette ni saisie n’est envoyée à un serveur. L’historique récent est stocké localement dans le localStorage de votre navigateur.

Téléchargez instantanément un PDF d’une page contenant vos résultats. Indiquez votre adresse e-mail pour recevoir également, de temps à autre, des conseils sur nos calculatrices — sans spam et avec désinscription possible à tout moment. Confidentialité.