KITIVERSE.LAB
Menu des Outils
MOTEUR LOCAL // DANS LE NAVIGATEUR

Sélecteur de Couleurs & Générateur de Palettes

Conversion chromatique multiformat (HEX, RGB, HSL, OKLCH), calcul instantané du contraste d'accessibilité WCAG 2.1 et génération de palettes pastel harmonieuses. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

APPAREIL // COLOR-PICKER VÉRIFIÉ OK // 0.0ms

Tableau de Référence Rapide

Latence de Conversion < 0,1 ms (Temps réel)
Modèles Colorimétriques HEX, RGB, HSL, OKLCH
Norme d'Accessibilité ISO/IEC 40500 (WCAG 2.1)
Génération de Palettes Harmonie Pastel (Calcul local)
Spécification CSS W3C CSS Color Level 4

Formule Mathématique

Ratio=L1+0.05L2+0.05where  L=0.2126Rlin+0.7152Glin+0.0722Blin\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \quad \text{where} \; L = 0.2126 R_{\text{lin}} + 0.7152 G_{\text{lin}} + 0.0722 B_{\text{lin}}

Calcule la luminance relative dans l'espace sRGB linéarisé et détermine le ratio de contraste WCAG 2.1 pour la conformité AA et AAA.

Annonces

Présentation Générale et Contexte Technique

La représentation mathématique des couleurs dans la conception d'interfaces numériques a profondément évolué, passant des simples chaînes hexadécimales sRGB 24 bits à des espaces colorimétriques perceptuellement uniformes. Les modèles web historiques comme HSL (Teinte, Saturation, Luminosité) souffrent d'un défaut optique majeur : à une valeur de luminosité identique de 50 %, l'œil humain perçoit le jaune et le vert comme beaucoup plus lumineux que le bleu profond ou le violet. Cette distorsion complique la création de systèmes de design accessibles et provoque des échecs de lisibilité imprévisibles lors du changement de teinte.

Le modèle colorimétrique cylindrique OKLCH — normalisé dans la spécification W3C CSS Color Module Level 4 — corrige ce biais en alignant directement les coordonnées mathématiques sur la perception visuelle humaine (basée sur l'espace Oklab de Björn Ottosson). Dans l'espace OKLCH, une clarté (Lightness) de 70 % produit exactement la même luminance perçue, que la teinte soit vert émeraude, bleu ciel ou corail. Kitiverse met à la disposition des développeurs front-end et des designers UI/UX un établi complet permettant de convertir en temps réel entre HEX, RGB, HSL et OKLCH, de vérifier les ratios de contraste réglementaires WCAG 2.1 (niveaux AA et AAA) face à des fonds clairs et sombres, et de générer automatiquement des palettes harmonieuses.

Comment convertir des couleurs et vérifier le contraste d'accessibilité

Ajustez la vignette visuelle ou saisissez une valeur dans n'importe quel format : toutes les représentations CSS se synchronisent instantanément.

1

Sélectionnez une couleur de base à l'aide du sélecteur visuel natif ou collez directement un code HEX, RGB, HSL ou OKLCH dans le champ correspondant.

2

Examinez les conversions mathématiques simultanées dans les quatre espaces colorimétriques, mises à jour en temps réel à chaque modification de teinte ou de saturation.

3

Consultez l'évaluation de contraste WCAG 2.1 calculée simultanément sur fond blanc pur (#FFFFFF) et sur fond ardoise foncé (#0F172A) pour valider les seuils AA (4,5:1) et AAA (7,0:1).

4

Explorez la palette d'harmonies pastel générée automatiquement et cliquez sur n'importe quelle nuance ou bouton de copie pour récupérer sa déclaration CSS dans votre presse-papiers.

Questions Fréquentes

Qu'est-ce que l'espace colorimétrique OKLCH et pourquoi l'utiliser en design web ?
OKLCH (Oklab Lightness, Chroma, Hue) est un espace colorimétrique cylindrique conçu pour refléter fidèlement la perception de l'œil humain. Contrairement aux modèles sRGB ou HSL classiques, OKLCH est perceptuellement uniforme : deux couleurs partageant la même valeur de clarté (L) présentent exactement la même luminosité perçue et le même ratio de contraste, ce qui permet de créer des palettes de design prévisibles et accessibles.
Quelles sont les exigences légales de contraste WCAG 2.1 pour l'accessibilité numérique ?
Selon les directives internationales WCAG 2.1 du W3C (norme ISO/IEC 40500, référencée par le RGAA en France, la norme européenne EN 301 549 et l'ADA), le texte courant doit présenter un ratio de contraste minimal de 4,5:1 par rapport à son arrière-plan pour atteindre le niveau AA, et de 3,0:1 pour les grands titres (18pt ou 14pt gras). Le niveau renforcé AAA exige un ratio d'au moins 7,0:1 pour le texte normal.
Puis-je utiliser la syntaxe oklch() directement dans mes feuilles de style CSS ?
Oui. Tous les navigateurs web modernes (Chrome, Edge, Safari et Firefox) prennent en charge nativement la fonction `oklch()` issue de la spécification CSS Color Module Level 4 (par exemple `color: oklch(0.75 0.14 150)`), sans nécessiter de préprocesseur ni de bibliothèque JavaScript externe.
Que se passe-t-il lorsqu'une couleur OKLCH dépasse le gamut d'affichage sRGB ?
Alors que les écrans standards couvrent le gamut sRGB, les écrans modernes (Display P3) affichent des couleurs plus saturées qu'OKLCH peut exprimer. Lors de la conversion d'une coordonnée OKLCH vers un code HEX ou RGB 8 bits standard, l'algorithme de Kitiverse projette et écrête automatiquement les canaux aux limites valides du gamut sRGB [0, 255].
Mes palettes de couleurs de marque sont-elles enregistrées sur un serveur ?
Non. Toutes les transformations matricielles, les conversions d'espaces colorimétriques, les calculs de luminance WCAG et les algorithmes de génération de palettes s'exécutent localement dans votre navigateur : 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.
Quelle est la formule mathématique de luminance relative utilisée par WCAG 2.1 ?
La luminance relative (L) normalise la brillance entre 0 (noir pur) et 1 (blanc pur). La formule applique une expansion gamma linéaire aux canaux sRGB, les pondère selon la sensibilité spectrale des cônes rétiniens humains (0,2126 Rouge + 0,7152 Vert + 0,0722 Bleu), puis calcule le rapport `(L1 + 0,05) / (L2 + 0,05)`.

Instruments Associés dans Cet Établi

Tous les outils de Couleur & Design →
Couleur & Design →

Vérificateur de Contraste WCAG 2.1

Vérifiez vos paires de couleurs de texte et d'arrière-plan selon les seuils d'accessibilité W3C WCAG 2.1 AA et AAA avec aperçu typographique et composants UI en direct. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Couleur & Design →

Convertisseur de Couleurs HEX, RGB, HSL & CMJN

Convertisseur de codes couleurs 24 bits bidirectionnel traduisant en temps réel entre l'hexadécimal (#RRGGBB), CSS RGB/RGBA, HSL cylindrique et CMJN d'impression. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Studio Audio →

Convertisseur Audio

Convertissez vos fichiers sonores MP3, WAV, M4A, AAC et OGG en ligne avec rééchantillonnage de qualité studio (44,1 kHz à 48 kHz) et mixage stéréo vers mono. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Studio Vidéo →

Convertisseur Vidéo en Ligne

Convertissez vos fichiers vidéo MP4, WebM et QuickTime MOV directement dans votre navigateur grâce à l'accélération matérielle WebCodecs sans limite de taille. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Documents & PDF →

Convertisseur d'Images en PDF

Convertissez vos images JPG, PNG, WebP, GIF et BMP en documents PDF haute résolution avec réorganisation visuelle, rotation à 90°, contrôle des marges et formats A4 ou US Letter. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Studio Vidéo →

Convertisseur Vidéo en GIF Animé

Convertissez vos vidéos MP4, WebM, QuickTime MOV et OGV en GIF animés haute qualité avec découpage temporel, réglage de cadence (10 à 24 FPS) et palette optimisée. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Note d'Exécution et de Vérification Côté Client :

Cet utilitaire fonctionne à 100 % localement dans votre navigateur avec stockage sur votre appareil et aucun envoi vers un serveur. Tous les résultats sont fournis « tels quels » — veuillez valider les données, codes et fichiers critiques avant toute mise en production.

KITIVERSE // COMMAND SEARCH
SPEC-2026
ESC

Tapez pour rechercher des utilitaires, convertisseurs et calculateurs...

Start typing tool name, category, or file format.

    ↑ ↓ navigate ↵ operate
    100% In-Browser
    DISPATCH // TELEMETRY

    Feedback & Issue Report

    0 / 1000
    Telemetry stamp (URL, viewport, form-factor) attached automatically.

    Suggest a Scale Comparison

    Propose an intuitive real-world comparison

    All suggestions are reviewed for factual accuracy prior to publication.