Pulsa la barra espaciadora para generar paletas de colores armónicas, bloquea los colores que te gusten y copia los códigos HEX o exporta variables CSS, Tailwind y JSON. Todo se genera en tu navegador y no se sube nada.
Generador de paletas de colores
Pulsa la barra espaciadora para generar paletas de colores armónicas, bloquea los colores que te gusten y copia los códigos HEX o exporta variables CSS, Tailwind y JSON. Todo se genera en tu navegador y no se sube nada.
Las paletas se generan y comprueban en tu navegador y no se sube nada. Un enlace para compartir lleva solo los códigos de color en la parte posterior al #, y tus elecciones de modo, estilo y tamaño se recuerdan solo en este dispositivo.
El Generador de paletas de colores crea un conjunto de colores que combinan entre sí. Pulsa la barra espaciadora o el botón Generate y aparece una paleta nueva de dos a diez colores, desde elecciones totalmente aleatorias lo más separadas posible hasta armonías clásicas en torno a un color base: análogos, complementarios, complementarios divididos, triádicos, tetrádicos, monocromáticos, sombras y tintes. Bloquea cualquier color que te guste y los demás siguen cambiando a su alrededor, retrocede por tus últimas treinta paletas con deshacer y arrastra las muestras para darles un nuevo orden. Cada color muestra sus valores HEX, RGB y HSL, el color con nombre más cercano y su contraste WCAG exacto frente a texto blanco y negro. Cuando la paleta está lista, cópiala como códigos HEX, variables CSS, SCSS, un fragmento de Tailwind o JSON, o comparte un enlace que lleva solo los códigos de color.
Características
Nueve modos de generación: aleatorio, análogo, complementario, complementario dividido, triádico, tetrádico, monocromático, sombras y tintes
Paletas aleatorias con un estilo elegido (cualquiera, vibrante, pastel, apagado, oscuro o claro) y con los colores siempre bien separados
Un campo de color base que construye cada armonía en torno al color de tu marca o a un tono favorito
Botones de bloqueo que mantienen en su sitio los colores elegidos mientras el resto se regenera, para que afines una paleta paso a paso
De dos a diez colores, reordenación arrastrando o con botones de flecha, y deshacer y rehacer por las últimas 30 paletas
Valores HEX, RGB y HSL, el color con nombre más cercano y el contraste WCAG exacto del texto blanco y negro en cada muestra
Un comprobador de contraste que valora cualquier pareja de texto y fondo de tu paleta según AA y AAA
Exportación como lista HEX, variables CSS, SCSS, un fragmento de Tailwind o JSON, más un enlace para compartir que lleva solo los códigos de color
Cómo usar Generador de paletas de colores
Elige un modo y, para Random, un estilo; añade un color base si quieres que la paleta se construya en torno a él
Pulsa la barra espaciadora o Generate hasta que aparezca un color que te guste, y bloquéalo para que se quede mientras los demás cambian
Haz clic en una muestra para copiar su código HEX, abre sus detalles para ver RGB, HSL y contraste, y arrastra las muestras al orden que quieras
Comprueba el contraste del texto en cualquier pareja, abre Export y copia la paleta como variables CSS, SCSS, Tailwind o JSON
Ejemplo
Entrada
Mode: Analogous · base color #2a9d8f · 5 colors
Salida
#3d4dc3 #2b668a #2a9d8f #69d391 #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three
Los colores análogos están uno junto a otro en la rueda de color, a un máximo de 30 grados de distancia. Los ratios de contraste usan la fórmula WCAG, así que cada muestra te dice qué color de texto ponerle.
Errores comunes y solución de problemas
Al pulsar la barra espaciadora no se genera una paleta nueva. — La barra espaciadora solo genera cuando ningún botón, enlace ni campo de texto tiene el foco del teclado, porque esos se quedan con la barra espaciadora para sí. Pulsa Tab hasta que no haya nada resaltado, o haz clic en el botón Generate.
El botón Generate aparece en gris. — Todos los colores están bloqueados, así que no queda nada que cambiar. Desbloquea al menos un color con su botón de bloqueo o con la tecla L.
Un enlace de paleta compartida abre una paleta vacía o distinta. — Los colores viven en la parte de la dirección que sigue al signo #. Si una aplicación de mensajería cortó el enlace, copia de nuevo la dirección completa; un hash que no sean de dos a diez códigos HEX válidos de seis dígitos se ignora.
El fragmento de Tailwind no cambia mis colores existentes. — Añade un grupo de paleta bajo theme.extend.colors. Pégalo en el objeto colors de tu configuración y usa clases como bg-palette-1 o text-palette-3.
Preguntas frecuentes
¿Cómo funcionan los modos de armonía del Generador de paletas de colores?
Cada modo elige tonos a distancias fijas en la rueda de color a partir de un tono base: los colores análogos están a un máximo de 30 grados, el complementario usa el tono opuesto, el complementario dividido los dos tonos contiguos a ese, el triádico separa tres tonos 120 grados y el tetrádico cuatro tonos 90 grados. Monocromático, sombras y tintes mantienen un solo tono y cambian su luminosidad y saturación, y Random separa los colores todo lo que puede.
¿Cómo genero una paleta de colores en torno al color de mi marca?
Escribe o elige el color de tu marca como color base y luego elige un modo de armonía. El color base se coloca en la paleta y se mantiene fijo, y los demás colores se construyen a su alrededor cada vez que pulsas la barra espaciadora. Cambia entre análogo, complementario y triádico para ver hasta dónde quieres que se aleje la paleta del color de tu marca.
¿Cómo conservo algunos colores y cambio el resto en el Generador de paletas de colores?
Bloquea los colores que te gusten con el botón de bloqueo de una muestra o con la tecla L. Un color bloqueado se queda en su posición mientras se genera una paleta nueva a su alrededor, y deshacer vuelve a la paleta anterior si la nueva es peor. Bloquear todos los colores desactiva Generate.
¿Cómo comprueba el contraste del texto el Generador de paletas de colores?
Usa la fórmula WCAG, que compara la luminancia relativa de dos colores. El texto normal necesita una relación de al menos 4,5 a 1 para AA y de 7 a 1 para AAA; el texto grande necesita 3 a 1 y 4,5 a 1. Cada muestra indica la relación para texto blanco y negro, y el comprobador de contraste valora cualquier pareja de texto y fondo de la paleta.
¿Cómo exporto una paleta a variables CSS o Tailwind?
Abre el panel Export y elige un formato. CSS variables da un bloque :root con --color-1 a --color-5, SCSS da variables $color, Tailwind da un grupo de paleta para pegar en theme.extend.colors, y JSON y la lista HEX dan arrays simples. Cada uno tiene su botón de copiar.
¿Puedo compartir una paleta que he hecho con el Generador de paletas de colores?
Sí. La dirección de tu navegador siempre contiene los colores actuales tras un signo #, por ejemplo #264653-2a9d8f-e9c46a, y Copy link la copia. Cualquiera que la abra ve la misma paleta. La parte posterior al # nunca se envía a un servidor, y solo tus elecciones de modo, estilo y tamaño se recuerdan en este dispositivo.