Generador de Paletas de Colores Pro

Guía de Uso: Creando tu Paleta Ideal

1. Selecciona tu Color Base:
   • En "Controles de Generación", haz clic en el recuadro de color bajo "Color Base". Se abrirá un selector de color (Pickr).
   • Elige tu color inicial usando el selector visual, los deslizadores, o ingresando un valor HEX, RGB o HSL. Haz clic en "Aplicar" en el selector de color cuando estés listo.
2. Elige una Regla de Armonía:
   • En el desplegable "Regla de Armonía", selecciona el tipo de esquema de color que deseas generar (ej. Análoga, Complementaria, Monocromática).
3. Define el Número de Colores:
   • En "Número de Colores en Paleta", especifica cuántos colores deseas en tu paleta final (entre 2 y 10). Si intentas reducir este número por debajo de la cantidad de colores que tienes bloqueados, la herramienta te lo impedirá para proteger tus selecciones.
4. Genera la Paleta:
   • Haz clic en el botón " Generar/Actualizar Paleta". Los colores se mostrarán en la sección "Paleta Generada".
5. Ajusta y Refina tu Paleta (Opcional):
   • Cada color en la "Paleta Generada" tiene su propia muestra de color. Haz clic en ella para abrir un selector Pickr y ajustar ese color individualmente.
   • También puedes modificar los valores HEX, RGB o HSL directamente en los campos de texto debajo de cada muestra.
   • Si te gusta un color específico y quieres mantenerlo al regenerar la paleta (por ejemplo, si cambias la regla de armonía o el color base), haz clic en el botón " Bloquear" junto a ese color. Se convertirá en " Bloqueado". Los colores bloqueados se mantendrán en su posición (si es posible, según el número total de colores) y servirán de base para generar los colores no bloqueados.
6. Verifica el Contraste (Accesibilidad):
   • En "Herramientas de Análisis y Exportación" > "Verificador de Contraste", selecciona dos colores de tu paleta (uno para Texto/Primer Plano, otro para Fondo).
   • Haz clic en " Verificar Contraste". Se mostrará el ratio y si cumple con los niveles AA y AAA de WCAG para texto normal y grande.
7. Exporta tu Paleta:
   • Copia las "Variables CSS" o los "Códigos HEX" generados para usarlos en tus proyectos de diseño o desarrollo.
8. Guarda y Carga (Opcional):
   • Usa " Guardar Paleta Actual" para almacenarla en tu navegador.
   • Usa " Cargar Paleta Guardada" para recuperar la última paleta que guardaste.

Comprendiendo las Reglas de Armonía de Color

Las reglas de armonía son combinaciones de colores probadas que resultan agradables a la vista. Se basan en la posición de los colores en el círculo cromático.

• Análoga: Utiliza colores que están adyacentes en el círculo cromático. Suelen ser muy armoniosos y crean diseños serenos y cómodos. Ej: Azul, azul-verdoso, verde.
• Monocromática: Se basa en diferentes tonos, matices y tintes de un solo color (un solo matiz). Produce un efecto elegante y cohesivo. Ej: Diferentes tonalidades de azul.
• Complementaria: Combina colores que están opuestos en el círculo cromático. Esta combinación crea un alto contraste y un impacto visual vibrante. Ej: Rojo y Verde, Azul y Naranja.
• Complementaria Dividida: Utiliza un color base y los dos colores adyacentes a su complementario. Ofrece un fuerte contraste visual como el complementario, pero con menos tensión. Ej: Azul, y los colores adyacentes al naranja (amarillo-naranja y rojo-naranja).
• Triádica: Emplea tres colores equidistantes en el círculo cromático, formando un triángulo equilátero. Las paletas triádicas tienden a ser vibrantes, incluso si se usan tonos pálidos o insaturados. Es importante lograr un equilibrio. Ej: Rojo, Amarillo, Azul.
• Tetrádica (Rectangular): Utiliza cuatro colores dispuestos en dos pares complementarios, formando un rectángulo en el círculo cromático. Ofrece muchas posibilidades de variación y es la más rica de todas las armonías, pero también la más difícil de equilibrar. Ej: Azul, Naranja, Verde, Rojo.
• Cuadrada: Similar a la tetrádica, pero los cuatro colores están espaciados uniformemente (90 grados) alrededor del círculo cromático, formando un cuadrado. También ofrece buen contraste y variedad.
• Aleatoria (experimental): Genera colores de forma aleatoria. Útil para inspiración o si buscas combinaciones inesperadas (no garantiza armonía).

Experimentar con estas reglas te ayudará a descubrir paletas efectivas para tus diseños.

Preguntas Frecuentes (FAQ)

¿Qué es Chroma.js y Pickr.js y por qué los usan?

Chroma.js es una librería de JavaScript para todo tipo de manipulación de colores. Permite convertir colores entre formatos (HEX, RGB, HSL, etc.), realizar cálculos de color (como obtener colores análogos, complementarios, etc.) y analizar propiedades del color como el contraste. La usamos para la lógica de generación de armonías y el cálculo de contraste. Pickr.js es un selector de color (color picker) plano, personalizable, responsivo y sin dependencias. Lo usamos para proporcionar una interfaz amigable para que elijas y edites los colores.

¿Cómo funciona la opción "Bloquear" color?

Cuando bloqueas un color en la paleta (haciendo clic en el botón " Bloquear"), ese color específico se marcará como "fijo". Al generar/actualizar la paleta, los colores bloqueados mantendrán su valor y, si es posible, su posición. Si cambias el número total de colores, la herramienta intentará preservar los colores bloqueados. El primer color bloqueado (o el color base si no hay bloqueados) suele influir en la generación de los colores no bloqueados.

¿Qué son los niveles WCAG AA y AAA para contraste?

Las Pautas de Accesibilidad al Contenido Web (WCAG) definen niveles de conformidad para asegurar que el contenido web sea accesible para personas con discapacidades. Para el contraste de color:

• Nivel AA: Requiere un ratio de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt bold). Es el estándar más comúnmente adoptado.
• Nivel AAA: Es un estándar más estricto, que requiere un ratio de contraste de al menos 7:1 para texto normal y 4.5:1 para texto grande. Cumplir con AAA hace tu contenido accesible a un rango aún mayor de usuarios.

La herramienta te indica si tu combinación de colores pasa estos niveles.

¿Puedo generar más de 10 colores en una paleta?

Actualmente, la herramienta está limitada a generar entre 2 y 10 colores. Esto ayuda a mantener la usabilidad y a fomentar paletas de colores concisas, que suelen ser más efectivas en diseño. Para la mayoría de los proyectos, 5-7 colores suelen ser suficientes.

¿Qué pasa si ingreso un código de color inválido en los campos de texto?

Si ingresas un código de color inválido (ej. un HEX incorrecto como "#GGHHII" o un valor RGB fuera de rango), la herramienta intentará procesarlo. Si el color resultante no es válido, la entrada se revertirá al último valor válido para ese color, evitando que la paleta se corrompa.

La opción "Extraer de Imagen" está deshabilitada. ¿Se implementará?

La indicación "(N/I)" significa "No Implementada" en este ejemplo básico/versión actual. Extraer colores dominantes de una imagen es una funcionalidad popular y podría considerarse para futuras versiones de la herramienta. Requiere procesamiento de imágenes en el lado del cliente, lo cual es más complejo.

¿Los colores de la paleta son siempre seguros para la web (web-safe)?

Los "colores seguros para la web" (web-safe colors) son un concepto algo anticuado que se refería a una paleta de 216 colores que se mostraban consistentemente en monitores de 8 bits. Hoy en día, la mayoría de los dispositivos pueden mostrar millones de colores (color de 24 bits o 32 bits). Esta herramienta te permite generar cualquier color en el espectro RGB, por lo que no se limita a la paleta web-safe tradicional. La prioridad moderna es la armonía y la accesibilidad (contraste).

¿Cómo puedo obtener tonos más claros o más oscuros de un color de mi paleta?

Puedes editar un color individual haciendo clic en su muestra. Dentro del selector Pickr, puedes ajustar la luminosidad (L en HSL) o el brillo para obtener tintes (más claro, añadiendo blanco) o sombras (más oscuro, añadiendo negro). La regla "Monocromática" también te generará variaciones de luminosidad de tu color base.

¿Para qué sirven las Variables CSS que se exportan?

Las variables CSS (también conocidas como propiedades personalizadas CSS) te permiten definir valores reutilizables en tus hojas de estilo. Exportar tu paleta como variables CSS (ej. --color-palette-1: #RRGGBB;) facilita aplicar y mantener un esquema de color consistente en todo tu sitio web. Simplemente defines estas variables en tu :root y luego las usas donde necesites (ej. background-color: var(--color-palette-1);).

¿Hay alguna forma de obtener los colores en formato HSL o RGB directamente en la exportación?

Actualmente, la exportación rápida se centra en Variables CSS (que usan HEX internamente) y una lista de códigos HEX. Puedes ver los valores RGB y HSL de cada color individualmente debajo de su muestra. Si necesitas una lista completa en formato RGB o HSL, puedes copiar los valores manualmente de cada slot de color o usar una herramienta adicional para convertir la lista de HEX.

¿El "Número de Colores" afecta a todas las reglas de armonía por igual?

Algunas reglas de armonía tienen un número "natural" de colores (ej. Complementaria produce 2, Triádica 3, Tetrádica 4). Si pides más colores que el natural de la regla, la herramienta intenta completar la paleta interpolando entre los colores generados por la regla o añadiendo tintes/sombras. Si pides menos, se seleccionarán los colores principales de esa armonía. El resultado siempre intentará cumplir con el número que especifiques.