Idioma:Español
Chromoforge

Generador de variables de color CSS

Parte de un color y obtén un bloque :root listo para copiar. Incluye el color base, un color legible para el texto y once tonos primarios.

Generar CSS

La reducción de croma conserva luminosidad y tono antes del redondeo a HEX. Original mantiene las paletas y enlaces anteriores.

Usa HEX, RGB, HSL u OKLCH. OKLCH acepta luminosidad/croma numéricas o porcentuales y unidades angulares. Solo colores opacos; los valores fuera de sRGB se recortan con un aviso.

Color seleccionado#E24B4ATexto sobre este color: #111111

Escala de tonos 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 este colorComprobar texto y fondo

De un color a tokens CSS

  1. Introduce un color HEX, RGB, HSL u OKLCH o usa el selector. El resultado se actualiza aquí.
  2. Copia el bloque :root completo o descarga un archivo CSS. También puedes copiar cada tono.
  3. Usa var(--brand), var(--on-brand) y de var(--primary-50) a var(--primary-950) en tu hoja de estilos.

Comprueba los roles antes de usar la escala

El color original se conserva en la posición más cercana de la escala. Los números de los tonos son etiquetas, no garantías de contraste. --on-brand se elige solo para texto opaco sobre --brand; comprueba los otros pares por separado. Para paletas con más armonías y otros formatos, continúa a la herramienta principal.

Continúa con tu color

Generador de tonos de colorGenera una escala 50-950 desde un color base para superficies UI, bordes, hover y modo oscuro.Conversor de colores: HEX, RGB, HSL y OKLCHConvierte HEX, RGB, HSL u OKLCH a HEX, RGB, HSL y OKLCH al instante. Copia cada formato o una variable CSS. Gratis, local y sin cuenta.Comprobador de contraste WCAGComprueba el contraste entre texto y fondo según WCAG AA y AAA, prueba pares reales y elige combinaciones legibles.