Generador de paletas de colores: paletas armónicas desde cero o a partir de una foto
Pulsa la barra espaciadora para obtener una paleta nueva, bloquea los colores que te gusten, elige una armonía o saca la paleta de una foto. Exporta a CSS, Tailwind, SCSS, JSON o PNG.
Haz clic en una muestra para seleccionarla, en el candado para mantenerla al generar, en el lápiz para elegir un color nuevo y en el código para copiarlo.
| HEX | RGB | HSL | |
|---|---|---|---|
| #264653 | rgb(38, 70, 83) | hsl(197, 37%, 24%) | |
| #2a9d8f | rgb(42, 157, 143) | hsl(173, 58%, 39%) | |
| #e9c46a | rgb(233, 196, 106) | hsl(43, 74%, 66%) | |
| #f4a261 | rgb(244, 162, 97) | hsl(27, 87%, 67%) | |
| #e76f51 | rgb(231, 111, 81) | hsl(12, 76%, 61%) |
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}
Paleta a partir de una imagen
Sube una foto para llevar sus colores dominantes a las muestras desbloqueadas y luego haz clic en cualquier punto de la imagen para capturar un píxel exacto en la muestra seleccionada (color 1). La imagen se queda en tu dispositivo.
Las paletas se generan en tu navegador y las imágenes subidas nunca salen de tu dispositivo. Ver todas las herramientas gratis.
¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.
Este generador de paletas de colores gratuito crea un conjunto de 2 a 10 colores que combinan entre sí. Pulsa la barra espaciadora (o Generar) para obtener una paleta nueva, bloquea las muestras que quieras conservar y vuelve a generar hasta que el resto encaje. Elige una armonía, como análoga, complementaria o triádica, o sube una foto y lleva sus colores dominantes directamente a la paleta. Cada muestra indica sus valores HEX, RGB y HSL y el color de texto, negro o blanco, que se lee bien sobre ella.
La mayoría de los generadores rotan el tono en HSL, lo que produce paletas en las que el amarillo deslumbra y el azul se hunde, porque la luminosidad de HSL no tiene nada que ver con lo claro que parece un color. Este calcula las armonías en OKLCH, un espacio de color perceptual en el que una misma luminosidad se ve igual de clara, y después reparte la luminosidad para que cada paleta tenga tonos oscuros, medios y claros que de verdad puedas usar para texto, fondos y acentos. No puede decirte si una paleta encaja con tu marca. Eso sigue siendo decisión tuya, y el comprobador de contraste enlazado más abajo te dice qué parejas son legibles.
Cómo usarla
- Pulsa la barra espaciadora o el botón Generar para crear una paleta. Usa − y + para elegir entre 2 y 10 colores.
- Elige una armonía en el menú. Aleatoria da conjuntos variados pero equilibrados; las demás siguen las reglas clásicas del círculo cromático.
- Haz clic en el candado de cualquier muestra que te guste y sigue generando: los colores bloqueados se quedan, y la armonía se reconstruye en torno al primero bloqueado.
- Haz clic en el lápiz para elegir un color a mano o escribe un valor HEX en el editor que hay bajo la tira. Para empezar desde una foto, súbela en Paleta a partir de una imagen y haz clic en la imagen para tomar el color exacto de un píxel.
- Exporta la paleta como variables CSS, configuración de Tailwind, SCSS o JSON, descarga un PNG o copia el enlace para compartir.
Preguntas frecuentes
¿Cómo genero una paleta de colores?
Pulsa la barra espaciadora en esta página. Cada pulsación crea una paleta nueva a partir de la armonía seleccionada. Cuando un color te convenza, bloquéalo con el candado y sigue pulsando: solo cambian las muestras desbloqueadas, y los colores nuevos se eligen para armonizar con el bloqueado. Cinco colores es una buena cifra por defecto para un sitio web: uno oscuro para el texto, uno claro para los fondos, un principal, un secundario y un acento.
¿Qué son los colores complementarios, análogos y triádicos?
Son posiciones en el círculo cromático. Los colores complementarios están enfrentados (a 180 grados), lo que da el contraste más fuerte. Los análogos son vecinos, separados unos 30 grados, y transmiten calma y cohesión. Los triádicos son tres tonos separados 120 grados; la armonía complementaria dividida usa un tono base más los dos tonos a cada lado de su complementario (150 y 210 grados); la tetrádica, o cuadrada, usa cuatro tonos separados 90 grados. La monocromática mantiene un único tono y varía la luminosidad y la saturación.
¿Puedo obtener una paleta de colores a partir de una imagen?
Sí. Sube una foto en Paleta a partir de una imagen. La herramienta la reduce a 200 píxeles como máximo, lo que promedia el ruido, y agrupa los píxeles con clustering k-means en el espacio de color OKLab, de modo que el resultado refleja los colores que ves y no el simple recuento de píxeles. Los grupos más grandes rellenan las muestras desbloqueadas, y se indica qué proporción de la imagen cubre cada color. Haz clic en cualquier punto de la imagen para llevar el color exacto de un píxel a la muestra seleccionada. La imagen nunca sale de tu navegador.
¿Cómo uso una paleta en CSS o Tailwind?
Elige la exportación como variables CSS y pega el bloque :root en tu hoja de estilos; luego usa los colores como var(--color-1), etc. La exportación de Tailwind es un bloque theme.extend.colors que añade de palette-1 a palette-N, así que puedes escribir bg-palette-1 o text-palette-3. Cambia el nombre de las variables según su función (primary, surface, text) cuando hayas decidido para qué sirve cada color; nombres como color-3 no sobreviven a un rediseño.
¿Por qué este generador usa OKLCH en lugar de HSL?
Porque la luminosidad de HSL no es la luminosidad percibida. En HSL, el amarillo puro y el azul puro tienen ambos un 50 % de luminosidad, pero el amarillo parece tan claro como un gris claro y el azul parece casi negro. Por eso, rotar el tono en HSL produce conjuntos desequilibrados en brillo. OKLCH, definido en CSS Color Level 4 y compatible con todos los navegadores actuales, separa luminosidad, croma y tono, de modo que al rotar el tono el brillo aparente se mantiene. Los colores que quedan fuera del rango sRGB se recuperan bajando el croma y manteniendo el tono y la luminosidad.
¿Puedo compartir o guardar una paleta?
Copia el enlace para compartir: contiene los colores en la dirección (por ejemplo ?colors=264653-2a9d8f-e9c46a), así que cualquiera que lo abra verá la misma paleta, y puedes guardarlo en marcadores. No se almacena nada en ningún servidor. También puedes descargar un PNG de las muestras con sus valores HEX y RGB para un moodboard o un correo a un cliente.
Convertir una paleta en un sistema de colores útil para una interfaz
Una paleta de cinco colores bonitos todavía no es un sistema de diseño. Lo que necesita un sitio son funciones: un color de texto con un contraste de al menos 4.5:1 sobre el fondo, un fondo y una superficie ligeramente distinta para las tarjetas, un color principal para botones y enlaces, y un acento usado con moderación. La regla 60-30-10 del interiorismo es un punto de partida razonable: un 60 % aproximado de fondo neutro, un 30 % de color secundario y un 10 % de acento.
• Texto: el color más oscuro, o un casi negro teñido con tu tono principal. El #000 puro sobre #fff puro es más duro de lo necesario.
• Fondo y superficie: el color o los dos colores más claros. Muchas paletas generadas incluyen uno; si no, bloquea tu color principal y cambia a Monocromática para obtener tintes claros de él.
• Principal: el color que dice “haz clic aquí”. Comprueba que el texto blanco o negro sobre él alcanza 4.5:1 (el color de texto legible de cada muestra es una primera comprobación rápida; el comprobador de contraste, la definitiva).
• Acento: el color más saturado, para destacados e insignias, no para áreas grandes.
Después genera tintes y sombras del color principal (más claros para fondos al pasar el cursor, más oscuros para estados pulsados) en lugar de introducir tonos nuevos. Bloquear el color principal y cambiar a Monocromática con 7 a 10 colores te da esa escala.
Modos de armonía y cuándo funciona cada uno
• Análoga: tonos vecinos. Tranquila, natural, difícil de estropear. Buena para sitios de contenido y marcas de bienestar y alimentación. Necesita un neutro que contraste para el texto.
• Monocromática: un tono, muchos niveles de luminosidad. La opción más segura para paneles y aplicaciones, donde el color debe apoyar los datos en lugar de competir con ellos.
• Complementaria: dos tonos opuestos. Máximo contraste y energía; usa uno como color principal y el otro solo para las llamadas a la acción, o parecerá una equipación deportiva.
• Complementaria dividida: un tono más los dos que rodean a su opuesto. Casi tan viva como la complementaria, con menos tensión; una buena opción por defecto para sitios de marketing.
• Triádica y tetrádica: tres o cuatro tonos repartidos de forma uniforme. Alegres y vivas, adecuadas para productos infantiles, juegos e ilustración. Deja que domine un tono y mantén los demás en pequeñas dosis.
• Aleatoria (agradable): los tonos varían entre 20 y 70 grados de una muestra a la siguiente, con la luminosidad repartida en el conjunto. Buena para explorar antes de comprometerte con una regla.
Cómo funciona la extracción de colores de una imagen
La imagen subida se dibuja en un canvas de no más de 200 píxeles en su lado largo. Al reducirla se promedian los píxeles vecinos, lo que elimina el ruido de JPEG y las texturas finas que, de otro modo, producirían decenas de colores casi idénticos. Los píxeles totalmente transparentes se ignoran.
Los píxeles restantes se convierten a OKLab y se agrupan con clustering k-means, donde k es el número de muestras. Los centros iniciales se eligen con una regla fija (el píxel más cercano al color medio de la imagen y, después, sucesivamente, el píxel más alejado de todos los centros elegidos hasta el momento), así que una misma imagen da siempre la misma paleta, y no se pierden zonas pequeñas pero distintas, como una chaqueta roja en un paisaje verde. La media de cada grupo se convierte en una muestra, ordenada según la proporción de la imagen que cubre.
La extracción encuentra los colores que hay, no necesariamente los que usarías para diseñar. En las fotos predominan los tonos medios apagados, así que bloquea el color o los dos colores que capturan la imagen y genera el resto, o haz clic en la imagen para tomar un destacado concreto.
Herramientas gratis relacionadas
- Comprobador de contraste — Comprueba los colores de texto y fondo con WCAG 2.x AA y AAA, consulta el valor Lc de APCA y obtén el color más cercano que cumple.
- Selector y conversor de colores — Captura cualquier color de cualquier parte de tu pantalla o convierte al instante entre HEX, RGB y HSL.
- Generador de degradados CSS — Crea degradados lineales, radiales y cónicos con paradas de color arrastrables, un selector de ángulo y plantillas. Copia el CSS o una clase de Tailwind.
- Generador de box-shadow — Diseña efectos box-shadow y text-shadow en capas con vista previa en vivo y ajustes predefinidos de elevación, neumorfismo y resplandor, y copia el CSS.