Generador de Paletas de Color

OKLCH es un espacio de color perceptualmente uniforme creado por Bjorn Ottosson en 2020 como evolución de OKLAB. A diferencia de HSL, donde dos colores con la misma luminosidad pueden verse muy distintos al ojo humano, OKLCH garantiza que cambios iguales en sus valores producen diferencias visuales iguales. Esto significa que una escala tonal de 50 a 950 generada en OKLCH mantiene pasos de brillo consistentes sin saltos bruscos ni zonas muertas. En HSL, un amarillo al 50% de luminosidad parece mucho más brillante que un azul al 50%. OKLCH corrige esta distorsión modelando la percepción humana del color con precisión científica. Para diseñadores que construyen design systems, esto resulta fundamental porque cada nivel de la escala cumple su función visual sin requerir ajustes manuales. La especificación CSS Color Level 4 del W3C ya incluye OKLCH como formato nativo.

La escala tonal sigue la convención popularizada por Tailwind CSS, donde 50 es el tono más claro y 950 el más oscuro, con pasos intermedios en 100, 200, 300, 400, 500, 600, 700, 800 y 900. Nuestra herramienta toma tu color base, lo convierte al espacio OKLCH y distribuye la luminosidad de forma lineal entre los extremos, manteniendo constante el tono (hue) y ajustando la saturación (chroma) proporcionalmente. El resultado son 12 tonos que van del casi blanco al casi negro, pasando por tu color base típicamente ubicado entre el paso 400 y 600. Esta distribución perceptualmente uniforme garantiza que cada par de pasos consecutivos tenga la misma diferencia visual, algo imposible de lograr con HSL donde la relación entre valor numérico y percepción no es lineal. Puedes exportar la escala completa directamente como variables CSS o configuración de Tailwind.

El generador ofrece cinco esquemas cromáticos basados en rotaciones de tono en el círculo cromático OKLCH. El complementario rota 180 grados para obtener el color opuesto, ideal para crear contraste máximo entre dos elementos. El análogo rota 30 grados a cada lado para colores vecinos que transmiten armonía y continuidad visual. El triádico distribuye tres colores a 120 grados entre sí, ofreciendo un equilibrio vibrante con alta variedad cromática. El split complementario combina tu color base con los dos adyacentes a su complementario, produciendo tensión visual más sutil que el complementario puro. El tetrádico genera cuatro colores equidistantes a 90 grados, proporcionando la máxima diversidad pero requiriendo cuidado al asignar jerarquías. Todos los esquemas se calculan en OKLCH, donde las rotaciones de tono producen resultados más naturales que en HSL gracias a la uniformidad perceptual.

El verificador calcula el ratio de contraste entre dos colores según la fórmula definida en las Web Content Accessibility Guidelines (WCAG) 2.1 del W3C. El ratio se expresa como un valor entre 1:1 (sin contraste) y 21:1 (máximo contraste, blanco sobre negro). Para texto normal, el nivel AA exige un ratio mínimo de 4.5:1 y el nivel AAA exige 7:1. Para texto grande (18px bold o 24px regular), AA requiere 3:1 y AAA requiere 4.5:1. La herramienta convierte ambos colores a luminancia relativa usando la fórmula sRGB con corrección gamma y luego aplica la fórmula de contraste (L1 + 0.05) / (L2 + 0.05). Además de verificar un par individual, la matriz de contraste evalúa todos los pares posibles de tu paleta en una cuadrícula visual, facilitando la identificación de combinaciones que cumplen o fallan los criterios de accesibilidad.

La herramienta admite cuatro formatos de exportación diseñados para los flujos de trabajo más comunes en desarrollo frontend. Variables CSS genera custom properties como --color-primary-500 que puedes pegar directamente en tu archivo de estilos raíz y referenciar en cualquier componente sin dependencias adicionales. Tailwind Config produce un objeto JavaScript compatible con el bloque colors de tailwind.config.js, permitiéndote usar clases utilitarias como bg-primary-500 y text-primary-900 sin configuración adicional ni plugins externos. Variables SCSS genera variables con prefijo dollar que se integran en proyectos basados en Sass para aprovechar funciones nativas como darken(), lighten() y mix(). JSON exporta un objeto estructurado útil para design tokens en herramientas como Figma Tokens, Style Dictionary o cualquier sistema de diseño programático que consuma tokens en formato estándar. Cada formato incluye los nombres semánticos asignados automáticamente y los valores en el espacio de color que seleccionaste para la visualización.

Sí, la herramienta genera una URL única que codifica toda la información de tu paleta directamente en los parámetros de la dirección web. Al copiar y compartir este enlace, cualquier persona puede abrir exactamente la misma paleta sin necesidad de crear una cuenta ni iniciar sesión en ningún servicio. La URL incluye el color base, el esquema cromático seleccionado, el formato de visualización activo y cualquier ajuste personalizado que hayas realizado sobre la escala tonal. Esto facilita enormemente la colaboración entre diseñadores y desarrolladores: un diseñador puede generar la paleta, verificar la accesibilidad WCAG y enviar el enlace al equipo de frontend, que puede exportar directamente las variables CSS o la configuración de Tailwind sin repetir el trabajo. No almacenamos datos en servidores porque toda la información viaja codificada en la URL, lo que garantiza privacidad total y acceso instantáneo sin dependencia de servicios externos.

Sí, una vez que la página se ha cargado completamente en tu navegador, todas las funcionalidades operan sin conexión a internet de forma permanente. Los cálculos de conversión entre espacios de color, la generación de escalas tonales, los esquemas cromáticos y la verificación de contraste WCAG se ejecutan localmente usando JavaScript puro sin dependencias externas. No hay llamadas a APIs remotas ni procesamiento en servidores de terceros en ningún momento del flujo de trabajo. Esto significa que puedes usar la herramienta en aviones, zonas rurales sin cobertura celular o entornos de desarrollo corporativos con restricciones de red sin ninguna limitación funcional. Además, al ser una Progressive Web App (PWA), puedes instalarla directamente en tu dispositivo desde el navegador para acceso rápido como si fuera una aplicación nativa de escritorio o móvil. El Service Worker almacena en caché todos los recursos necesarios para garantizar la disponibilidad completa sin conexión en cualquier momento.

Absolutamente. La herramienta procesa todo localmente en tu navegador sin enviar ningún dato a servidores externos en ningún momento. Los colores que ingresas, las paletas que generas y las verificaciones de contraste que realizas nunca salen de tu dispositivo ni se transmiten por la red. No utilizamos cookies de rastreo, no recopilamos analíticas sobre los colores específicos que explores y no almacenamos historial de uso en bases de datos propias ni de terceros. Cuando compartes una paleta mediante URL, los datos viajan codificados en la propia dirección del navegador como parámetros, no se almacenan en ningún servidor intermedio ni generan registros de actividad. Esta arquitectura completamente client-side garantiza que la información de tus proyectos de diseño permanezca privada bajo tu control exclusivo. No vendemos datos, no mostramos publicidad personalizada y no rastreamos tu actividad de ninguna forma. La herramienta es gratuita y respeta tu privacidad como principio fundamental de diseño.

La diferencia principal radica en el motor de generación cromática. Coolors y Paletton operan en el espacio HSL, donde los gradientes pueden producir pasos desiguales y tonos intermedios apagados porque HSL no modela la percepción humana con precisión. Nuestra herramienta utiliza OKLCH, un espacio perceptualmente uniforme que garantiza transiciones suaves y pasos de brillo consistentes entre cada nivel de la escala. Además, integramos verificación de contraste WCAG directamente en el flujo de generación, algo que en otras herramientas requiere cambiar de aplicación. La exportación a Tailwind Config es nativa y lista para producción, no solo una lista de códigos hex. También generamos matrices de contraste NxN para evaluar todas las combinaciones de accesibilidad de una sola vez. Todo funciona offline, sin registro y sin límites de uso, mientras que algunas funcionalidades de Coolors requieren suscripción premium.

Un espacio de color perceptualmente uniforme garantiza que una diferencia numérica constante entre dos valores produce una diferencia visual constante para el ojo humano. En HSL, incrementar la luminosidad de 40% a 50% en un amarillo produce un cambio visual mucho mayor que el mismo incremento en un azul. Esto ocurre porque HSL fue diseñado como modelo matemático conveniente, no como representación de la percepción humana. OKLCH corrige esta deficiencia utilizando datos de experimentos psicofísicos sobre cómo percibimos brillo, saturación y tono. El resultado práctico es que al generar una escala de 50 a 950, cada paso se ve equidistante del anterior independientemente del color base elegido. Para diseñadores de interfaces, esto elimina el tedioso trabajo de ajustar manualmente cada tono de la escala hasta que se vea bien. Bjorn Ottosson publicó la especificación completa de OKLAB/OKLCH en 2020 como mejora sobre CIE Lab.

Sí, el código exportado está listo para copiar y pegar en tu proyecto sin modificaciones adicionales. Las variables CSS se generan con la sintaxis estándar de custom properties y puedes pegarlas en tu archivo :root o en cualquier selector. La configuración de Tailwind se exporta como un objeto JavaScript que encaja directamente en el bloque extend.colors de tu tailwind.config.js. Las variables SCSS usan la convención de nombres con prefijo dollar y son compatibles con cualquier versión de Sass. El JSON sigue una estructura plana de clave-valor que puedes importar como módulo ES o procesar con Style Dictionary para generar tokens multiplataforma. Todos los formatos incluyen nombres semánticos como primary-50 hasta primary-950 que siguen la convención de Tailwind, facilitando la adopción sin renombrar variables. No se aplican licencias restrictivas sobre el código exportado: los valores de color generados son datos y puedes usarlos libremente en cualquier proyecto comercial o personal.

Los nombres semánticos siguen la convención de escalas numéricas popularizada por Tailwind CSS, donde el prefijo identifica el rol del color y el sufijo numérico indica la luminosidad. El prefijo predeterminado es primary, pero puedes personalizarlo según tu sistema de diseño: brand, accent, neutral, surface o cualquier nombre que refleje la función del color en tu interfaz. Los sufijos van de 50 (más claro) a 950 (más oscuro) en incrementos de 50 y 100. Esta nomenclatura facilita la comunicación entre diseñadores y desarrolladores porque todos entienden que primary-100 es un fondo sutil y primary-900 es texto sobre fondo claro. Al exportar esquemas cromáticos, cada color del esquema recibe un prefijo diferente: primary para el base, secondary para el complementario o análogo, y tertiary para colores adicionales. Esta asignación automática acelera la integración en design systems donde cada rol semántico ya tiene su uso definido.