Una paleta funciona cuando sabes cómo usarla
Una combinación bonita es un punto de partida. Cuando agregas un titular, una foto y una llamada a la acción, necesitas decidir qué se ve primero y qué debe leerse sin esfuerzo.
Estas son las cinco paletas elegidas por Tantito Diseño. Cada una incluye una base, un apoyo, un acento, un detalle y un tono para texto. Son papeles orientativos: puedes ajustar sus proporciones según tu pieza, sin tener que utilizar los cinco colores a la vez.
Las aplicaciones son puntos de partida: adapta la combinación a tu identidad de marca y pruébala con tu contenido real.
Selecciona un código para copiarlo y pegarlo en tu editor de diseño.
Los códigos también están escritos para que puedas seleccionarlos.
01 · Cercana · Artesanal
Tierra cálida
Café, cerámica y proyectos artesanales.
Los tonos crema y arena dan espacio a la pieza; el terracota concentra la atención y el tono más oscuro sostiene la lectura. Puede ser un punto de partida para un menú de cafetería, una etiqueta de cerámica o un carrusel sobre un proceso artesanal.
Cómo usarla
Usa la base crema en la mayor superficie, el arena como apoyo y el terracota en un detalle que quieras destacar: un número, una forma o una fotografía enmarcada. Reserva el verde grisáceo para elementos secundarios.
Cuida este detalle. No conviertas todos los tonos en protagonistas. Si el terracota ocupa toda la pieza y el texto también es cálido, puedes perder la jerarquía que hace útil a esta combinación.
Texto #292E26 sobre base #F5EFE6Contraste calculado: 12.14:1. Supera 4.5:1 para texto normal en esta pareja concreta.
02 · Clara · Dinámica
Azul con chispa
Tecnología, cursos y servicios digitales.
La base casi blanca y el azul claro permiten separar información sin cargar el fondo. El azul intenso y el marino aportan niveles de jerarquía; el amarillo introduce un punto de atención. Puede servir para una ficha de herramienta, una invitación a un taller o una presentación de servicios.
Cómo usarla
Mantén el marino para texto y usa el azul como color principal de elementos gráficos. Coloca el amarillo en un solo punto relevante, como la fecha de un evento o un indicador de novedad.
Cuida este detalle. El amarillo claro no es una buena elección para texto pequeño sobre la base. Que sea el acento de una paleta no significa que cualquier combinación de sus colores sea legible.
Texto #18255A sobre base #F2F4FFContraste calculado: 13.20:1. Supera 4.5:1 para texto normal en esta pareja concreta.
03 · Suave · Expresiva
Rosa editorial
Belleza, moda y proyectos editoriales.
El rosa suave deja sitio para imágenes y titulares, mientras los tonos ciruela evitan que todo se quede en una misma intensidad. Puedes explorarla en una portada editorial, una selección de productos o un carrusel de inspiración visual.
Cómo usarla
Usa la base clara como lienzo y el rosa pálido para agrupar contenido. El rosa más intenso puede destacar una forma o una palabra grande; los tonos oscuros funcionan como punto de partida para los textos.
Cuida este detalle. No pongas texto rosa claro sobre otro rosa claro. Conserva una diferencia suficiente entre el fondo y la información. La paleta también puede adaptarse a otros temas; estas aplicaciones son propuestas, no reglas por sector.
Texto #302337 sobre base #FFF4EEContraste calculado: 13.67:1. Supera 4.5:1 para texto normal en esta pareja concreta.
04 · Natural · Equilibrada
Verde sereno
Plantas, bienestar y productos naturales.
Esta combinación reúne una base muy clara, verdes de apoyo y un tono profundo para la lectura. Puede acompañar una guía sobre plantas, una agenda de actividades o una pieza de producto donde quieras que la fotografía tenga espacio.
Cómo usarla
Deja que la base clara domine y utiliza el verde medio en ilustraciones o bloques pequeños. El verde profundo ayuda a sostener titulares y párrafos; el tono intermedio oscuro puede separar información secundaria.
Cuida este detalle. Los verdes de la paleta no sustituyen etiquetas como “disponible”, “agotado” o “seleccionado”. Añade palabras o símbolos si el color comunica un estado. Y usar verde no demuestra por sí mismo que un producto sea sostenible.
Texto #202D26 sobre base #F3F5EAContraste calculado: 13.01:1. Supera 4.5:1 para texto normal en esta pareja concreta.
05 · Cálida · Alegre
Coral con energía
Comida, eventos y proyectos creativos.
La base crema y el durazno sostienen una combinación donde el coral puede tomar protagonismo. El rojo más oscuro y la tinta profunda permiten recuperar contraste. Puede ser una ruta para una invitación, un menú o una pieza de lanzamiento.
Cómo usarla
Coloca el coral sobre la base clara como forma o acento, y conserva el tono más oscuro para la información. Si necesitas destacar varias cosas, cambia primero el tamaño o el peso del texto en vez de sumar más colores.
Cuida este detalle. Evita que el coral compita con fotografías muy saturadas. Comprueba la pieza con sus imágenes reales: una paleta que se ve equilibrada en cinco muestras puede necesitar ajustes cuando añades una foto.
Texto #402B36 sobre base #FFF4E9Contraste calculado: 11.98:1. Supera 4.5:1 para texto normal en esta pareja concreta.
Cómo llevar una paleta a tu diseño
- Empieza con base y texto. Diseña primero la lectura. Después incorpora un acento para el elemento que quieras destacar.
- Asigna una tarea a cada color. Por ejemplo: fondo claro, titulares oscuros, un color de apoyo para agrupar y un acento para un dato importante.
- Prueba una pieza completa. Añade tu foto, tu logo y la cantidad real de texto. Mira el diseño al tamaño en que lo verá tu audiencia, también en el teléfono.
- Repite las decisiones que ayudan. Si un color señala un enlace o una categoría, úsalo de forma consistente y acompáñalo de texto, subrayado u otra señal reconocible.
No hace falta distribuir los colores por igual. Un tono puede ocupar casi toda la pieza y otro aparecer solo en un detalle; las proporciones de las muestras no son una receta obligatoria.
Que combine no basta: también tiene que leerse
Para texto normal, WCAG 2.2 establece un contraste mínimo de 4.5:1; para texto grande, 3:1. Un titular llamativo y un párrafo pequeño no se evalúan igual. Consulta la explicación de contraste de W3C (abre en otra pestaña).
Las parejas de texto y base que mostramos se calcularon a partir de sus códigos HEX, sin transparencia. Ese resultado no certifica toda la paleta ni un diseño completo: cambiar el fondo, añadir una fotografía o bajar la opacidad cambia el caso.
Evita colocar los tonos claros sobre otros tonos claros para información importante. Y si usas color para indicar un estado, acompáñalo con una palabra, forma o símbolo: el color no debe ser la única pista. Criterio de uso del color de W3C (abre en otra pestaña).
Preguntas frecuentes
¿Qué es un código HEX?
Es una forma de escribir un color digital con el símbolo # y seis caracteres, como #4465E9. Puedes pegarlo en un selector de color compatible para trabajar con ese valor.
¿Tengo que usar los cinco colores?
No. Empieza con una base, un texto que contraste y un acento. Añade los demás solo si te ayudan a organizar o distinguir información.
¿Se verán iguales al imprimir?
No des por hecho que pantalla y papel se verán idénticos. Los códigos aquí proponen colores digitales; para una entrega impresa, pide una prueba y revisa las condiciones con tu proveedor antes de producir.
Fuentes y criterio editorial
Selección y material visual: carruseles de Tantito Diseño proporcionados para este artículo. Se conservan los cinco nombres y los códigos HEX escritos en las imágenes.
Las aplicaciones y los consejos son orientación editorial, no estudios sobre emociones ni pruebas de resultados comerciales. Los contrastes se calcularon mediante luminancia relativa de los valores sRGB y la fórmula de WCAG, antes de redondear el resultado mostrado.
- W3C · contraste mínimo en WCAG 2.2 (abre en otra pestaña)
- W3C · información que no depende solo del color (abre en otra pestaña)
Fuentes consultadas el 26 de octubre de 2026. Sin enlaces de afiliación activos.