Generador de paletas de colores: esquemas armoniosos a partir de un color base
Con el generador de paletas de colores puedes crear online una paleta a partir de un único color base: elige un color o introduce un código HEX y aparecerán al instante seis esquemas armoniosos, cada uno con sus valores HEX, RGB y HSL. Es gratis, no requiere registro y realiza todos los cálculos en tu navegador.
Creado por Justin Schuessler
¿Ya tienes lista la paleta? Publica tu sitio con un alojamiento web rápido y fiable.
Elegir color base
Todas las combinaciones de colores siguientes se calculan al instante a partir de este color.
Complementario
El color base y su opuesto en el círculo cromático (180°): contraste fuerte, ideal para acentos.
Analógico
Tres tonos adyacentes (±30°): armoniosos y serenos, habituales en la naturaleza.
Triádico
Tres tonos distribuidos uniformemente (a 120°): vivos y equilibrados.
Complementarios divididos
El color base y los dos colores adyacentes a su complementario: contraste con menos tensión.
Tetrádico
Cuatro tonos en dos pares complementarios (separados 90°): una combinación rica que funciona mejor con un color dominante.
Monocromático
Cinco variaciones del mismo color (tonos claros, intermedios y oscuros): discretas y siempre armoniosas.
Continuar con el color base: Comprobar contraste · Ver en el simulador de daltonismo · Abrir en el selector de colores
Nada de esto se guarda ni se transmite: cada color se calcula exclusivamente en tu navegador.
Funciones
Qué puedes hacer con el generador de esquemas de color
Basta con un color base: el generador calcula a partir de él combinaciones armoniosas según las reglas de la teoría del color.
Seis esquemas de color de un vistazo
Los esquemas complementario, análogo, triádico, complementario dividido, tetrádico y monocromático aparecen uno junto a otro y se actualizan en tiempo real cada vez que cambias el color base, sin necesidad de pulsar un botón de generación.
Elige libremente el color base
Área de color para la saturación y la luminosidad, control deslizante para el tono, campo HEX (de seis dígitos o en formato abreviado de tres) o valores RGB de 0 a 255. También puedes empezar con «Color aleatorio».
HEX, RGB y HSL de cada color
Cada muestra de color muestra su código HEX y sus valores RGB y HSL. Haz clic en una muestra o en la vista previa grande del color base para copiar el código HEX al portapapeles.
Compartir la paleta de colores mediante un enlace
El color base se incluye automáticamente en la URL, por ejemplo, ?color=3b82f6. Quien abra el enlace verá el mismo color base y los mismos seis esquemas de color.
Calculado en tu navegador
Todos los colores se calculan en tu navegador. No necesitas una cuenta y tu selección de colores no se guarda ni se envía a ningún servidor.
Continuar con contraste y accesibilidad
Debajo de los esquemas de color, puedes enviar el color base con un clic al comprobador de contraste, al simulador de daltonismo o al selector de color.
Cómo funciona
Cómo crear una paleta de colores a partir de un color base
Seis pasos desde el primer color hasta la paleta terminada.
Paso 1
Elegir color base
Haz clic o arrastra en el área de color para definir la saturación y la luminosidad, y ajusta el tono con el control deslizante de debajo.
Paso 2
Introducir código HEX o valores RGB
También puedes introducir un código HEX como #3B82F6 o tres valores RGB. Con «Color aleatorio», empiezas con un color base elegido al azar.
Paso 3
Comparar esquemas de color
Los seis esquemas de color (complementario, análogo, triádico, complementario dividido, tetrádico y monocromático) se actualizan al instante.
Paso 4
Copiar código de color
Haz clic en una muestra de color para copiar su código HEX. Los valores RGB y HSL aparecen justo debajo.
Paso 5
Compartir paleta de colores
Copia la dirección de la barra de direcciones. El color base figura en el enlace como ?color=…; así podrás volver a abrir la paleta más adelante o enviársela a alguien.
Paso 6
Comprobar contraste
Abre el color base en el comprobador de contraste mediante «Comprobar contraste» o míralo en el simulador de daltonismo.
Armonía de colores
Los seis esquemas de color de un vistazo
Cada tono corresponde a un ángulo de entre 0° y 360° en la rueda de colores. Cinco de los seis esquemas se crean rotando el tono del color base en ángulos fijos, sin cambiar la saturación ni la luminosidad. El esquema monocromático, en cambio, solo modifica la luminosidad.
Complementario
2 colores · color base + 180°
El color base y el color situado justo enfrente en la rueda de colores. Ofrece el máximo contraste y es ideal para elementos destacados, como los botones.
Analógico
3 colores · −30°, color base, +30°
El color base y sus dos vecinos inmediatos en la rueda de colores. Crea un efecto tranquilo y armonioso.
Triádico
3 colores · 0°, 120°, 240°
Tres tonos distribuidos uniformemente por la rueda de colores. Más vivo que un esquema análogo, pero igualmente equilibrado.
Complementarios divididos
3 colores · color base + color complementario ±30°
En lugar del propio color complementario, el esquema usa sus dos vecinos. Ofrece casi tanto contraste como el esquema complementario, pero con menos tensión visual.
Tetrádico
4 colores · 0°, 90°, 180°, 270°
Dos pares complementarios separados por 90°. Un esquema rico que funciona mejor con un color dominante.
Monocromático
5 colores · mismo tono, cinco niveles de luminosidad
El tono y la saturación se mantienen; solo cambia la luminosidad, de oscuro a claro. Los cinco niveles siguen siendo distinguibles incluso con colores base muy claros o muy oscuros.
Fondo
Encontrar el color complementario y combinar colores
Rueda de color digital en lugar de caja de pinturas
El generador rota el tono en la rueda de colores HSL, el modelo de color de las pantallas. En ella, el verde puro #00FF00 da como resultado magenta #FF00FF y el azul puro #0000FF da amarillo #FFFF00. En la rueda de colores clásica de la pintura (rojo, amarillo y azul), los pares serían verde y rojo, y azul y naranja, respectivamente. Ambas respuestas son correctas dentro de su modelo de color.
Distribuir los colores en el diseño
Una regla práctica habitual es la regla 60-30-10: aproximadamente un 60 % de color principal, un 30 % de color secundario y un 10 % de color de acento. El generador no la aplica automáticamente. Tú decides qué función cumple cada color del esquema; por ejemplo, el color base como principal y el complementario como acento.
Armonioso no significa legible
Un esquema de color armonioso no garantiza suficiente contraste entre el texto y el fondo. Por eso, comprueba tu combinación final en el comprobador de contraste antes de usarla en una web o aplicación. El enlace «Comprobar contraste» situado debajo de los esquemas de color envía allí directamente tu color base.
Descubrir más
Más herramientas de color y accesibilidad
Selector de color
Convierte colores al instante entre HEX, RGB, HSL, HSV y CMYK, encuentra el color CSS con nombre más cercano y comprueba el contraste WCAG frente al blanco y el negro, todo en tu navegador.
Creado por Justin Schuessler
Comprobador de contraste
Calcula en tiempo real la relación de contraste WCAG entre dos colores y comprueba los niveles AA/AAA y los componentes de la interfaz, directamente en el navegador.
Creado por Justin Schuessler
Simulador de daltonismo
Simula en directo cómo se perciben las paletas de colores y tus propias imágenes con protanopía, deuteranopía, tritanopía y acromatopsia. Todo se calcula en el navegador.
Creado por Justin Schuessler
Selector de color de una imagen
Obtén el código de color de una imagen: cuentagotas con lupa, HEX, RGB y HSL, paleta de la imagen e indicación de contraste. La imagen permanece en el navegador.
Creado por Dimitri Heissler
FAQ
Preguntas frecuentes sobre Generador de paletas de colores
Respuestas breves sobre paletas de colores, armonía de colores y esta herramienta.
Define la saturación y la luminosidad en el área de color, ajusta el tono con el control deslizante o introduce un código HEX o valores RGB. También puedes hacer clic en «Color aleatorio». Los seis esquemas de color se actualizan al instante, sin necesidad de pulsar un botón de generación. Cada muestra muestra los valores HEX, RGB y HSL; haz clic para copiar el código HEX.
Introduce tu color como código HEX o valores RGB y consulta el esquema «Complementario»: muestra tu color base y el color situado enfrente en la rueda de colores (con el tono rotado 180°). El generador utiliza la rueda de colores HSL de las pantallas: el verde puro #00FF00 da magenta #FF00FF y el azul puro #0000FF da amarillo #FFFF00. En la rueda de colores clásica de la pintura, serían rojo y naranja, respectivamente.
Tres colores forman tres de los seis esquemas: triádico (tres tonos separados por 120°, vivo y equilibrado), análogo (el color base y sus vecinos a −30° y +30°, tranquilo y armonioso) y complementario dividido (el color base y los dos vecinos de su complementario, con mucho contraste y menos tensión visual). Introduce tu color base y compara los tres esquemas uno junto a otro.
Un esquema monocromático mantiene el mismo tono y la misma saturación y solo cambia la luminosidad. El generador crea cinco niveles de luminosidad, de oscuro a claro, que siguen siendo distinguibles incluso con colores base muy claros o muy oscuros. El resultado es discreto y coherente, ideal para fondos y superficies.
Que una combinación sea armoniosa no significa que sea fácil de leer: el problema suele ser que el texto y el fondo tienen muy poca diferencia de luminosidad. Por eso, comprueba tu combinación en el comprobador de contraste antes de usarla. El enlace «Comprobar contraste» situado debajo de los esquemas de color envía allí directamente tu color base.
La regla 60-30-10 es una regla práctica de diseño: aproximadamente un 60 % de color principal, un 30 % de color secundario y un 10 % de color de acento. El generador no la aplica automáticamente. Tú distribuyes los colores del esquema; por ejemplo, puedes usar el color base como principal y el complementario como acento.
Sí. El color base aparece automáticamente como parámetro en la URL, por ejemplo, ?color=3b82f6. Copia la dirección de la barra de direcciones: quien abra el enlace verá el mismo color base y los mismos seis esquemas de color. No necesitas una cuenta.
Puedes usar el generador de paletas de colores gratis y sin registrarte. Todos los colores se calculan en tu navegador; tu selección no se guarda ni se envía a ningún servidor. Si cierras la pestaña, solo podrás recuperar la paleta mediante un enlace que hayas copiado antes.
¿Tienes más preguntas?
Contactar con soporte¿Buscas un servidor para tu próximo proyecto?
Un VPS de ZAP-Hosting te da control total sobre tu propia infraestructura, con acceso SSH propio, firewall y acceso root completo.
Sin configuración. Sin riesgos. En línea en segundos.
¿Buscas más herramientas? Ver todas las herramientas de imagen y diseño
Fuente preferida en Google
