Herramienta de color práctica
Generador de tonos de color
Genera una escala 50-950 desde un color base para superficies UI, bordes, hover y modo oscuro.
Qué ofrece esta página
- Genera tintes claros y tonos oscuros desde un color.
- Usa 50-200 para fondos, 500-600 para acciones, 800-950 para dark UI.
- Exporta la escala como CSS, Tailwind, SCSS o JSON.
Bueno para
- Escalas Tailwind
- Design tokens
- Hover
Cómo usarlo
Generador de paletasCrea paletas accesibles, comprueba contraste WCAG, extrae colores de imágenes y exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.Checker WCAGComprueba el contraste entre texto y fondo según WCAG AA y AAA, prueba pares reales y elige combinaciones legibles.Extractor de imágenesExtrae colores dominantes de imágenes PNG, JPG o WebP en el navegador y conviértelos en paletas y tokens exportables.
¿Puedo usarlo con el generador principal?
Sí. Empieza aquí, abre la herramienta principal de Chromoforge con el mismo color base y exporta la paleta.
¿Para qué sirve cada paso de una escala 50-950?
De 50 a 200 son fondos de página y de tarjeta, 300 y 400 son bordes y separadores, 500 y 600 sostienen botones y enlaces, de 700 a 950 son texto sobre superficies claras y capas de fondo en modo oscuro. Mantener fijos los roles es lo que hace reutilizable una escala.
¿Conviene interpolar los tonos en HSL o en OKLCH?
OKLCH. En HSL los pasos de luminosidad salen irregulares, porque el mismo valor numérico se ve muy distinto en amarillo y en azul. En OKLCH los pasos son perceptualmente uniformes, así que de 100 a 200 se percibe la misma distancia que de 700 a 800.