Generador de paletas de colores.

Parte de un color que ya tengas, o de uno aleatorio, y obtén cinco colores que combinan: primary, secondary, tertiary, neutral y surface. Bloquea los que te gusten y genera de nuevo para el resto. Funciona en tu navegador, así que nada de lo que eliges se sube.

Parte de un colorArmonía

Pulsa la barra espaciadora para generar una paleta nueva.

primary#A8401Foklch(0.51 0.145 37.449)
secondary#008FAAoklch(0.6 0.145 217.449)
tertiary#E5A155oklch(0.76 0.123 67.449)
neutral#62514Boklch(0.45 0.025 37.449)
surface#FFF4F1oklch(0.975 0.012 37.449)

#A8401F
#008FAA
#E5A155
#62514B
#FFF4F1

Funciona en tu navegador. Nada de lo que añadas aquí se sube ni se guarda.

Cómo generar una paleta de colores

Parte de un color. Elígelo en la muestra o escríbelo como HEX, rgb(), hsl() u oklch(). Se convierte en el color primary. O pulsa Generar para partir de un color aleatorio que no sea ni apagado ni chillón.
Elige una armonía: análoga, complementaria, triádica, complementaria dividida o monocromática. Decide qué tonos toman los colores secondary y tertiary.
Genera de nuevo con el botón, o con la barra espaciadora cuando no haya ningún campo seleccionado, para obtener una variación nueva. Los colores que no hayas bloqueado cambian. Si primary no está bloqueado, Generar también elige un nuevo color de partida aleatorio, así que bloquéalo para conservar el tuyo.
Bloquea lo que te guste. El candado de cada muestra conserva ese color en todas las generaciones posteriores, así que puedes construir la paleta color a color.
Copia el resultado. Cada muestra indica su rol, su código HEX y su valor OKLCH, con un botón para copiar el HEX. Debajo de las muestras, las tres pestañas de exportación contienen la paleta completa en el formato que necesites.

Los cinco colores

primary es tu color de partida.
secondary y tertiary son acentos, con tonos que fija la armonía. Secondary tiene una luminosidad media y tertiary es más claro. En monocromática son una versión más oscura y otra más clara de tu color.
neutral es un gris oscuro con un toque del tono de tu color, para el texto secundario y los pies de foto.
surface es un casi blanco con el mismo toque de tono, para los fondos.

Qué puedes copiar

HEX: los cinco códigos, uno por línea, en el orden de arriba.
Tailwind v4 @theme: un bloque @theme que define --color-primary, --color-secondary, --color-tertiary, --color-neutral y --color-surface como valores oklch(). Pégalo en tu archivo CSS y usa clases como bg-primary y text-neutral. Si tu proyecto usa shadcn/ui, que ya define algunos de esos nombres, usa en su lugar el generador de temas de shadcn.
Colores de DESIGN.md: un bloque colors: con los cinco roles como códigos HEX, para el front matter de un DESIGN.md.

Úsala con Codex

Una paleta solo le sirve a Codex si está escrita donde Codex mira. DESIGN.md tiene siete roles de color, dos más de los que crea esta herramienta: on-primary, el color del texto sobre primary, y on-surface, el color del texto principal. Para completar el conjunto:

Copia los colores de DESIGN.md en tu DESIGN.md, o pega los cinco códigos HEX en el generador de DESIGN.md. El generador también te pide on-primary y on-surface, y nombra cualquier pareja de colores con un contraste por debajo de 4.5:1.
Comprueba las parejas que vayas a usar para texto en el comprobador de contraste.
Indícale a Codex dónde está el archivo desde AGENTS.md, como muestra la guía de DESIGN.md.

Si prefieres que Codex complete el conjunto, pega los códigos en un prompt:

De la paleta a DESIGN.md

Estos son los colores que elegí: primary [HEX], secondary [HEX], tertiary [HEX], neutral [HEX] y surface [HEX]. Escríbelos en la sección de colores de DESIGN.md, en la raíz del repositorio. Añade on-primary y on-surface, eligiendo blanco o casi negro para cada uno, de modo que on-primary sobre primary y on-surface sobre surface alcancen al menos 4.5:1 de contraste. Si una pareja no llega, no cambies mis colores; dime qué pareja falla y el cambio más pequeño que lo arregla. Después diseña la pantalla de [inicio] usando solo estos colores y enumera cualquier otra cosa que hayas necesitado.

Preguntas frecuentes

¿Es gratis?

Sí. Es gratis, no requiere registro y no hay límite de paletas que puedas generar.

¿Se suben mis colores?

No. La paleta se crea en tu navegador y no se envía ni se guarda en ningún sitio, así que copia lo que quieras conservar antes de salir de la página. El sitio solo cuenta que se usó la herramienta, nunca los colores.

¿Cómo crea la paleta?

Trabaja en OKLCH, un espacio de color en el que pasos iguales de luminosidad se ven igual de distintos. Tu color de partida pasa a ser primary, y la armonía decide a qué distancia quedan de él los tonos de secondary y tertiary: 30° a cada lado en análoga, 180° y 30° en complementaria, 120° y 240° en triádica, 150° y 210° en complementaria dividida, y ningún desplazamiento en monocromática. Los acentos toman más o menos el croma de tu color, dentro de unos límites, así que un color de partida apagado da acentos apagados. Los otros cuatro colores también varían un poco en luminosidad y croma cada vez, así que el mismo color de partida y la misma armonía dan una variación nueva en cada Generar.

¿Comprueba el contraste?

No. No comprueba lo legible que es un color de la paleta sobre otro, así que prueba las parejas que uses para texto en el comprobador de contraste antes de comprometerte con ellas.