Paleta de colores de una imagen.

Elige una imagen y obtén sus colores principales como códigos HEX, de más a menos frecuente, listos para copiar. Funciona en tu navegador, así que la imagen nunca sale de tu dispositivo.

Elegir una imageno suéltala aquí

Número de colores

Elige una imagen para ver sus colores principales.

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

Cómo extraer los colores de una imagen

Elige una imagen o suéltala en el recuadro de arriba: una foto, una captura de un diseño que te guste, un logo o un mockup.
Ajusta el número de colores, de 5 a 8. Empieza en 6.
Lee la paleta. Los colores principales aparecen de más a menos frecuente, cada uno con la parte de la imagen que ocupa y su código HEX.
Copia un solo código HEX, o todos a la vez como una lista separada por comas. Haz clic en la imagen para probar con otra.

De la paleta a DESIGN.md y a Codex

Una lista de colores no le dice a Codex qué color va dónde. Asigna a cada uno una función y escríbelo una vez, y todas las pantallas que diseñe Codex usarán la misma paleta:

Extrae los colores de tu referencia: una foto de ambiente, una imagen de marca o una captura de una dirección de diseño que te guste.
Asigna una función a cada color. Los porcentajes ayudan: un color claro que ocupa mucho suele ser el fondo (neutral), uno oscuro el texto (on-surface), uno intenso las acciones principales (primary) y un pequeño acento el color secondary o tertiary.
Comprueba las parejas de texto en el comprobador de contraste. Los colores sacados directamente de una foto a menudo necesitan oscurecerse o aclararse un poco para que el texto sobre ellos se lea bien.
Pega los códigos HEX en el generador de DESIGN.md, añade tus fuentes y tu espaciado, y guarda el archivo en la raíz de tu proyecto.
Indícale a Codex dónde está desde AGENTS.md, como muestra la guía de DESIGN.md. A partir de ahí, Codex usará estos colores en lugar de elegir otros nuevos para cada pantalla.

Si prefieres que Codex asigne las funciones, pega los códigos en un prompt:

De la paleta a DESIGN.md

Estos son los colores principales de nuestra imagen de referencia: [pega los códigos HEX]. Asígnalos a las funciones de color de DESIGN.md primary, on-primary, secondary, tertiary, neutral, surface y on-surface. Asegúrate de que on-primary sobre primary, y on-surface sobre surface y sobre neutral, alcancen un contraste de al menos 4.5:1; donde no lo hagan, ajusta la luminosidad y mantén el tono. Después escribe los colores en DESIGN.md, en la raíz del repositorio.

Preguntas frecuentes

¿Es gratis?

Sí. Es gratis, sin registro y sin límite de imágenes.

¿Se sube mi imagen?

No. Tu navegador lee y analiza la imagen en tu dispositivo, y no se envía ni se guarda en ningún sitio. El sitio solo cuenta que se usó la herramienta, nunca la imagen.

¿Cómo elige los colores?

Reduce la imagen a 160 píxeles como máximo en su lado más largo, que es más que suficiente para el color; después agrupa los píxeles parecidos e indica el color medio de cada grupo con la parte de la imagen que ocupa. Un pequeño acento tiene su propia entrada cuando se distingue claramente del resto y ocupa al menos el 0.5% de la imagen, mientras que los píxeles mezclados de los bordes no la tienen. Las zonas transparentes se ignoran, y la misma imagen siempre da la misma paleta.

¿Por qué hay menos colores de los que pedí?

La imagen no tiene tantos colores distintos. Un logo plano con pocos colores puede dar menos de los que elegiste.