Pack de jetons couleur de marque — échelle HEX HSL OKLCH

Créez un pack de jetons couleur de marque à partir d'une seule base dans le navigateur. Étapes : choisissez la base (HEX ou pipette), consultez HEX/RGB/HSL/OKLCH, générez l'échelle 50–950 avec paires noir/blanc à chaque palier, puis copiez variables CSS ou JSON. L'exemple bleu #2563eb se charge à l'ouverture — aucun envoi.

Couleur de base

Espaces colorimétriques (base)

Aperçu UI

Échelle de couleur (50–950)

Fonctionnement

Saisissez ou choisissez une couleur de base de marque. La page affiche HEX, RGB, HSL et OKLCH, puis construit une échelle de 11 paliers (50–950) avec aperçu UI. Chaque nuancier recommande texte noir ou blanc et un ratio. Copiez variables CSS ou JSON quand la rampe convient — tout reste local.

Règles à connaître

Ce qu'il faut attendre de l'échelle, des espaces colorimétriques, des indices de contraste et de la confidentialité.

Le palier 500 est votre base. En dessous, éclaircissement par mélange vers le blanc ; au-dessus, assombrissement vers le noir (mélange linéaire sRGB).
Le bloc base liste HEX, RGB, HSL et OKLCH pour la même couleur. OKLCH passe par sRGB → linéaire → OKLab pour s'aligner sur la syntaxe CSS moderne.
Chaque nuancier recommande texte noir ou blanc — celui qui offre le plus de contraste sur ce fond. Les ratios suivent la luminance relative WCAG ; les libellés AA sont indicatifs.
Confidentialité : génération, aperçu et copie se font localement dans cet onglet — pas d'envoi de vos couleurs de marque.

Exemple

Chargez l'exemple (#2563EB). Le bloc espaces affiche HEX, RGB, HSL et OKLCH de la base ; la grille liste 50–950 avec texte noir ou blanc recommandé et ratio de contraste. Copier CSS produit :root { --color-50: …; … --color-950: …; } prêt pour votre feuille de style.

Bon usage

Design systems : partez d'un HEX de marque et livrez une rampe 50–950 cohérente plus variables CSS pour les composants.
Mode sombre : parcourez les teintes claires (50–300) pour les surfaces et les tons profonds (700–950) pour le texte sur la marque.
Passage aux devs : copiez des jetons JSON ou propriétés CSS au lieu de retaper des HEX depuis une capture.

Frequently asked questions

Ma couleur quitte-t-elle le navigateur ?

Non. Calcul et export s'exécutent dans cet onglet — vos couleurs ne partent pas vers un serveur.

Comment l'échelle 50–950 est-elle construite ?

Le palier 500 correspond à votre couleur de base. Les paliers plus clairs (50–400) se mélangent vers le blanc ; les plus foncés (600–950) vers le noir. Mélange linéaire en sRGB pour garder la teinte stable.

Que signifient les colonnes de contraste ?

Chaque nuancier compare texte noir et blanc sur ce fond et choisit le meilleur contraste WCAG. Les libellés indiquent le ratio et si le texte normal atteint probablement AA (4,5:1) ou AA grand texte (3:1).

Que contiennent Copier CSS et Copier JSON ?

Copier CSS sort des propriétés personnalisées :root (--color-50 à --color-950). Copier JSON fournit la même échelle plus les espaces de la base en données structurées pour vos design tokens.

Quand utiliser le vérificateur de contraste ?

Ce sont des suggestions rapides noir/blanc par palier. Pour des paires personnalisées ou des niveaux WCAG précis, ouvrez le vérificateur de contraste WCAG et collez le HEX d'un nuancier.

Questions ou retours

Quelque chose n’est pas clair, cassé ou manquant ? Rédigez un message ci-dessous — nous lisons chaque note.