La biblia del marketing para hacerte notar.

ES EspañolEN EnglishPT Português

Diseño, imágenes y QRGratis y sin registro

Paleta de colores: crea la tuya desde un color y copia sus códigos

Elige un color y esta paleta de colores te da al momento sus combinaciones, con los códigos HEX, RGB y HSL listos para copiar y el contraste con blanco y negro. Para tu marca, tu web o tu próxima presentación.

Armonía

Tu color y su opuesto en la rueda (180°), con una versión clara y otra oscura: máximo contraste para botones y llamadas a la acción.

  • Base

    Blanco7,29:1AAA

    Negro2,88:1No pasa

  • 2

    Blanco2,73:1No pasa

    Negro7,66:1AAA

  • 3

    Blanco13,45:1AAA

    Negro1,56:1No pasa

  • 4

    Blanco1,41:1No pasa

    Negro14,79:1AAA

  • 5

    Blanco1,21:1No pasa

    Negro17,21:1AAA

Bloquea con el candado los colores que te gusten y pulsa otra vez: solo cambian los demás.

Tintes y sombras de tu color

Tu color mezclado con negro (izquierda) y con blanco (derecha) en pasos del 20 %. Haz clic en uno para copiar su HEX.

Tu paleta en variables CSS

:root {
  --color-1: #3D3AE0;
  --color-2: #9493EE;
  --color-3: #22207B;
  --color-4: #DDE03A;
  --color-5: #ECEE93;
}

Contraste según la fórmula de la WCAG 2.2: AA pide 4,5:1 en texto normal y 3:1 en texto grande; AAA, 7:1 y 4,5:1. Todo se calcula en tu navegador: no se guarda ni se envía nada.

Una paleta de colores es el grupo de 3 a 6 tonos que tu marca usa en todo: web, redes, carteles y facturas. Este generador de paletas de colores la saca de un solo color con las reglas de la rueda de colores. Y te dice qué combinación de colores aguanta texto encima.

Cómo usar el generador de paletas de colores

  1. Elige tu color de partida

    Usa el selector, pega un código HEX, RGB o HSL, o coge un color de la pantalla con el cuentagotas (Chrome y Edge en ordenador).

  2. Elige la armonía

    Seis reglas, de la complementaria a la monocromática. La rueda te enseña dónde cae cada color.

  3. Bloquea lo que te guste y prueba más

    El candado fija un color. «Paleta aleatoria» cambia solo los demás, así que afinas sin perder lo bueno.

  4. Copia los códigos o el CSS

    Haz clic en cualquier código para copiarlo. Debajo tienes las variables CSS y los tintes y sombras de tu color.

Colores complementarios, análogos, tríada y tétrada: cómo se calculan

Cada armonía gira el tono (H) de tu color en la rueda HSL, la de las pantallas. La saturación y la luz no cambian, así que los colores nuevos pesan lo mismo que el tuyo.

ArmoníaGiro en la ruedaCuándo usarla
Colores complementarios180°Un botón que tiene que destacar sí o sí
Complementario dividido150° y 210°Contraste fuerte, pero más amable
Colores análogos±30° y ±60°Marcas tranquilas: bienestar, naturaleza, hogar
Tríada120° y 240°Marcas alegres, infantiles o de ocio
Tétrada90°, 180° y 270°Mucha variedad: uno manda y el resto acompaña
Monocromática0° (la luz cambia de 15 en 15 puntos)Webs elegantes y presentaciones sobrias

Los tintes y las sombras mezclan tu color con blanco o con negro: tinte = color + (255 − color) × t, y sombra = color × (1 − t), con t en pasos del 20 %. Sirven para fondos, bordes y el hover de los botones.

Paleta cromática: qué significa y paleta de colores cálidos y fríos

«Paleta cromática» se busca unas 720 veces al mes en España, según DataForSEO (octubre de 2026). Significa lo mismo que paleta de colores: «cromática» viene del griego khrôma, color. Se clasifica por temperatura:

  • Cálida: rojos, naranjas y amarillos, de 0° a 60° aproximadamente en la rueda.
  • Fría: cianes, azules e índigos, de 180° a 260° aproximadamente.
  • Neutra: blanco, negro, grises, beige y marrones. Tienen poca saturación y no compiten con nada.

Los verdes y los violetas son intermedios: parecen cálidos o fríos según lo que tengan al lado. Una paleta de colores cálidos y fríos funciona cuando uno manda y el otro solo acompaña, por ejemplo una base cálida con un botón azul de acento. Sácala con la armonía complementaria y comprueba el contraste antes de usarla.

Contraste de colores: la fórmula de la WCAG

Cada color lleva su contraste con blanco y con negro, con la fórmula de la guía de contraste de la WCAG 2.2, el estándar de accesibilidad del W3C. Primero sale la luminancia relativa (L = 0,2126 R + 0,7152 G + 0,0722 B, con cada canal linealizado). Después, la relación: (L1 + 0,05) / (L2 + 0,05).

NivelTexto normalTexto grande (24 px, o 18,5 px en negrita)
AA4,5:13:1
AAA7:14,5:1

El gris #767676 sobre blanco da 4,54:1: aprueba el AA por los pelos. Si un color marca «No pasa» con blanco y con negro, no lo uses para texto.

Paleta de colores pastel: cómo sacarla de tu color

«Paleta de colores pastel» suma unas 210 búsquedas al mes en España, según DataForSEO (octubre de 2026). Un pastel es tu color mezclado con mucho blanco, y la herramienta ya lo calcula en los tintes. Con el coral #E4572E como ejemplo:

TinteCódigoContraste con blancoContraste con azul marino #1F3A5F
60 %#F4BCAB1,66:16,90:1
80 %#FADDD51,28:18,97:1

Cálculo nuestro, con la fórmula de la WCAG. La lección: un pastel es un fondo, no una letra. Sobre blanco no llega ni a 2:1, y con texto azul marino el del 60 % pasa el AA (4,5:1) y el del 80 % llega al AAA (7:1). Usa tintes del 60 % al 80 % en tarjetas, banners y fondos de sección, y guarda el color pleno para el botón.

Ejemplos de paleta de colores web para negocios

  • Clínica o fisioterapia: verde azulado con sus análogos. Transmite calma, y su tinte del 80 % queda perfecto de fondo.
  • Tienda online de moda: monocromática en negro o arena, y un complementario solo para el botón de comprar. Si todo grita, nada vende.
  • Cafetería o restaurante: tríada cálida (terracota, mostaza y verde oliva) con mucho blanco roto.

En una paleta de colores web, la regla que mejor funciona es la del 60-30-10: 60 % de neutro, 30 % de color principal y 10 % de acento para lo que quieres que se pulse. Ponla al lado de tu logo y de tu eslogan (aquí tienes ejemplos de eslogan) y mira si cuentan lo mismo. Si estás montando la web, la guía para crear una página web con IA te dice dónde pegar las variables. Para los carteles, saca un código QR con los colores de tu marca.

Preguntas frecuentes sobre la paleta de colores

¿Cómo elegir mi paleta de colores?

Empieza por un solo color que cuente quién eres: los azules y verdes se suelen asociar a confianza y salud, y los rojos y naranjas, a energía. Mira qué colores usan tus tres competidores directos y busca uno que te diferencie. Después saca la armonía aquí, añade un neutro claro y otro oscuro, y pruébala en tu web, un post y una tarjeta. Si no convence, cambia el color de partida, no la regla.

¿Cuáles son 4 colores que combinan bien?

Cuatro colores combinan bien cuando uno manda y los otros tres acompañan. Una fórmula que casi nunca falla: azul marino (#1F3A5F) de principal, blanco roto (#F4F1EA) de fondo, arena (#D9C3A5) de apoyo y coral (#E4572E) solo para los botones. Si prefieres sacarlos de tu color, elige «Tétrada»: son cuatro tonos separados 90°. Usa dos en su tinte del 60 % para que no compitan.

¿Cómo sacar la paleta de colores de una imagen?

Pon la imagen a la vista, pulsa el cuentagotas de la herramienta y haz clic en el color que más te guste: pasa a ser tu color de partida y la paleta se monta sola. Funciona en Chrome y Edge de ordenador. En el móvil o en otros navegadores, saca el código HEX con el cuentagotas de cualquier editor de fotos y pégalo en el campo «HEX, RGB o HSL». La imagen no se sube a ningún sitio.

¿Qué colores combinan?

Combinan los que guardan una relación clara en la rueda: opuestos, como el azul y el naranja de los pintores; vecinos, como el verde, el verde azulado y el azul; o separados por igual, como el rojo, el amarillo y el azul. Los neutros (blanco roto, gris, beige o azul marino) van con casi todo. Lo que no suele funcionar es juntar varios colores muy saturados sin que ninguno mande. Una paleta de colores que combinan siempre tiene un protagonista.

¿Qué son los colores complementarios?

Son los que están en lados opuestos de la rueda, a 180°, y por eso dan el máximo contraste de tono. Ojo, que hay dos ruedas. En la del pintor (rojo, amarillo y azul), el complementario del azul es el naranja; en la de las pantallas (RGB, la de esta herramienta y la de cualquier diseño digital), es el amarillo. Para una web o tus redes manda la RGB. Úsalos en dosis pequeñas: un botón o una etiqueta de oferta.