Generador de Paleta de Colores
Genera escalas de colores profesionales para sistemas de diseño, Tailwind CSS y tokens de diseño
Algoritmo
Nivel de Contraste
Cantidad de Tonos
Acerca del Generador de Paleta de Colores
¿Qué es un Generador de Paleta de Colores?
Un generador de paleta de colores crea escalas de colores profesionales a partir de un solo color base. Genera múltiples tonos (típicamente 50-950) que funcionan armoniosamente juntos en sistemas de diseño, asegurando consistencia en toda tu aplicación.
¿Cómo usar la escala 50-950?
La escala 50-950 proporciona 11 tonos donde 50 es el más claro y 950 es el más oscuro. Típicamente, el tono 500 o 600 representa tu color base. Usa tonos más claros (50-400) para fondos y elementos sutiles, y tonos más oscuros (600-950) para texto, bordes y énfasis.
¿Qué es OKLCH?
OKLCH es un espacio de color moderno que proporciona colores perceptualmente uniformes. A diferencia de HSL, OKLCH asegura que los colores con el mismo valor de luminosidad aparezcan igualmente brillantes al ojo humano, haciéndolo ideal para generar paletas de colores accesibles y visualmente balanceadas.
¿Cómo exportar para Tailwind CSS?
Usa la opción de exportación "Tailwind CSS" para obtener una configuración lista para usar. Copia el código generado en tu archivo tailwind.config.js bajo theme.extend.colors. Para Tailwind CSS v4, usa el formato de exportación "@theme" con variables CSS.
¿Cómo usar Variables CSS?
Las Variables CSS (Custom Properties) te permiten definir colores una vez y reutilizarlos en toda tu hoja de estilos. Exporta como "Variables CSS" y agrega el código generado a tu archivo CSS global. Luego referencia los colores usando var(--primary-500) en tus estilos.
¿Cómo generar paleta para modo oscuro?
Para modo oscuro, elige un color base más oscuro o usa el algoritmo "Dark Mode Ready". Este algoritmo genera tonos optimizados para fondos oscuros, asegurando que los tonos más claros tengan suficiente contraste. También puedes usar el Preview UI para probar tu paleta en modo oscuro.
¿Cuál es la diferencia entre OKLCH y HSL?
HSL (Hue, Saturation, Lightness) es un espacio de color más antiguo donde colores con el mismo valor de luminosidad pueden parecer diferentes en brillo. OKLCH es perceptualmente uniforme, asegurando que colores con el mismo valor de luminosidad aparezcan igualmente brillantes, resultando en paletas más armoniosas y accesibles.
¿Cómo garantizar accesibilidad en los colores?
Usa la pestaña "Contraste" para verificar si tus combinaciones de colores cumplen con los estándares WCAG AA (4.5:1) o AAA (7:1). La herramienta muestra automáticamente qué tonos son seguros para texto blanco o negro, y proporciona recomendaciones para garantizar que tu diseño sea accesible para todos los usuarios.
¿Cuántos tonos debo usar en mi sistema de diseño?
La escala predeterminada de 11 tonos (50-950) es ideal para la mayoría de los sistemas de diseño, ofreciendo suficiente flexibilidad sin abrumar. Para proyectos más pequeños, 9 tonos pueden ser suficientes. Para sistemas complejos con muchas variaciones, 11 tonos proporcionan granularidad adecuada para todos los casos de uso.
¿Puedo usar estas paletas comercialmente?
¡Sí! Las paletas generadas son 100% libres para uso comercial y personal. Tienes propiedad total de los colores generados y puedes usarlos en cualquier proyecto, incluyendo productos comerciales, sitios web, aplicaciones y materiales de marketing sin restricciones.