Generador de sistema de diseño

Un color de marca de entrada y un sistema de diseño completo de salida: una escala perceptual 50–950 más roles semánticos (primario, secundario, acento, superficies, texto, éxito/aviso/error), exportado como variables CSS, SCSS, una configuración de Tailwind y tokens de diseño W3C. Todo determinista.

Entrada

HEX de marca

#2563EBColor de marca

HEX#2563EB

RGBrgb(37, 99, 235)

WCAG18.4 : 1Texto sobre el fondoAAA

Escala (50–950, perceptual en CIE-LAB)

Haz clic en cualquier paso para copiar su valor.

50#FFFFFF

100#E5E4FF

200#C0C2FF

300#939CFF

400#5876F3

500#2563EB

600#0249B8

700#00338E

800#001F66

900#000B43

950#00002D

Roles semánticos

#2563EBprimary

#E0C68Bsecondary

#BA2EFAaccent

#F9F8FEbackground

#F1F0FDsurface

#CBCBD5border

#0D0C17text

#7E7D85muted

#33EB70success

#EABF53warning

#EB3F33error

Variables CSS

:root {
  --brand-50: #ffffff;
  --brand-100: #e5e4ff;
  --brand-200: #c0c2ff;
  --brand-300: #939cff;
  --brand-400: #5876f3;
  --brand-500: #2563eb;
  --brand-600: #0249b8;
  --brand-700: #00338e;
  --brand-800: #001f66;
  --brand-900: #000b43;
  --brand-950: #00002d;

  /* semantic roles */
  --primary: #2563eb;
  --secondary: #e0c68b;
  --accent: #ba2efa;
  --background: #f9f8fe;
  --surface: #f1f0fd;
  --border: #cbcbd5;
  --text: #0d0c17;
  --muted: #7e7d85;
  --success: #33eb70;
  --warning: #eabf53;
  --error: #eb3f33;
}

Tailwind

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#ffffff',
          100: '#e5e4ff',
          200: '#c0c2ff',
          300: '#939cff',
          400: '#5876f3',
          500: '#2563eb',
          600: '#0249b8',
          700: '#00338e',
          800: '#001f66',
          900: '#000b43',
          950: '#00002d',
        },
        primary: '#2563eb',
        secondary: '#e0c68b',
        accent: '#ba2efa',
        background: '#f9f8fe',
        surface: '#f1f0fd',
        border: '#cbcbd5',
        text: '#0d0c17',
        muted: '#7e7d85',
        success: '#33eb70',
        warning: '#eabf53',
        error: '#eb3f33',
      },
    },
  },
};

SCSS

$brand-50: #ffffff;
$brand-100: #e5e4ff;
$brand-200: #c0c2ff;
$brand-300: #939cff;
$brand-400: #5876f3;
$brand-500: #2563eb;
$brand-600: #0249b8;
$brand-700: #00338e;
$brand-800: #001f66;
$brand-900: #000b43;
$brand-950: #00002d;
$primary: #2563eb;
$secondary: #e0c68b;
$accent: #ba2efa;
$background: #f9f8fe;
$surface: #f1f0fd;
$border: #cbcbd5;
$text: #0d0c17;
$muted: #7e7d85;
$success: #33eb70;
$warning: #eabf53;
$error: #eb3f33;

Tokens W3C (JSON)

{
  "brand.50": {
    "$value": "#ffffff",
    "$type": "color"
  },
  "brand.100": {
    "$value": "#e5e4ff",
    "$type": "color"
  },
  "brand.200": {
    "$value": "#c0c2ff",
    "$type": "color"
  },
  "brand.300": {
    "$value": "#939cff",
    "$type": "color"
  },
  "brand.400": {
    "$value": "#5876f3",
    "$type": "color"
  },
  "brand.500": {
    "$value": "#2563eb",
    "$type": "color"
  },
  "brand.600": {
    "$value": "#0249b8",
    "$type": "color"
  },
  "brand.700": {
    "$value": "#00338e",
    "$type": "color"
  },
  "brand.800": {
    "$value": "#001f66",
    "$type": "color"
  },
  "brand.900": {
    "$value": "#000b43",
    "$type": "color"
  },
  "brand.950": {
    "$value": "#00002d",
    "$type": "color"
  },
  "primary": {
    "$value": "#2563eb",
    "$type": "color"
  },
  "secondary": {
    "$value": "#e0c68b",
    "$type": "color"
  },
  "accent": {
    "$value": "#ba2efa",
    "$type": "color"
  },
  "background": {
    "$value": "#f9f8fe",
    "$type": "color"
  },
  "surface": {
    "$value": "#f1f0fd",
    "$type": "color"
  },
  "border": {
    "$value": "#cbcbd5",
    "$type": "color"
  },
  "text": {
    "$value": "#0d0c17",
    "$type": "color"
  },
  "muted": {
    "$value": "#7e7d85",
    "$type": "color"
  },
  "success": {
    "$value": "#33eb70",
    "$type": "color"
  },
  "warning": {
    "$value": "#eabf53",
    "$type": "color"
  },
  "error": {
    "$value": "#eb3f33",
    "$type": "color"
  }
}

…