Langue:Français
Chromoforge

Générateur de variables de couleur CSS

Partez d’une couleur pour obtenir un bloc :root prêt à copier. Il contient la couleur de base, une couleur de texte lisible et onze nuances primaires.

Générer le CSS

La réduction de chroma conserve luminosité et teinte avant l’arrondi HEX. Original garde les palettes et liens précédents.

Utilisez HEX, RGB, HSL ou OKLCH. OKLCH accepte luminosité/chroma numériques ou en pourcentage et unités angulaires. Couleurs opaques uniquement ; les valeurs hors sRGB sont limitées avec un avertissement.

Couleur sélectionnée#E24B4ATexte sur cette couleur: #111111

Échelle de nuances 50–950

:root {
  --brand: #E24B4A;
  --on-brand: #111111;
  --primary-50: #FFEEEC;
  --primary-100: #FFDDD8;
  --primary-200: #FFBCB5;
  --primary-300: #F5918A;
  --primary-400: #E24B4A;
  --primary-500: #C1282F;
  --primary-600: #9A000A;
  --primary-700: #7B0000;
  --primary-800: #5C0000;
  --primary-900: #410000;
  --primary-950: #2E0000;
}
Convertir cette couleurVérifier le texte et le fond

D’une couleur aux tokens CSS

  1. Saisissez une couleur HEX, RGB, HSL ou OKLCH ou utilisez le sélecteur. Le résultat se met à jour ici.
  2. Copiez le bloc :root ou téléchargez un fichier CSS. Chaque nuance peut aussi être copiée séparément.
  3. Utilisez var(--brand), var(--on-brand) et de var(--primary-50) à var(--primary-950) dans votre feuille de style.

Vérifier les rôles avant d’utiliser l’échelle

La couleur d’origine est conservée à la position la plus proche dans l’échelle. Les numéros des nuances sont des étiquettes, pas des garanties de contraste. --on-brand est choisi uniquement pour du texte opaque sur --brand ; vérifiez les autres paires séparément. Pour plusieurs harmonies et d’autres exports, continuez dans l’outil principal.

Continuez avec votre couleur

Générateur de nuances couleurGénérez une échelle 50-950 depuis une couleur de base pour surfaces UI, bordures, hover et dark mode.Convertisseur de couleurs : HEX, RGB, HSL et OKLCHConvertissez HEX, RGB, HSL ou OKLCH en HEX, RGB, HSL et OKLCH. Copiez chaque format ou une variable CSS. Gratuit, local et sans compte.Vérificateur de contraste WCAGVérifiez le contraste entre texte et arrière-plan selon WCAG AA et AAA, testez des paires réelles et choisissez des couleurs lisibles.