20 paletas de colores para portfolios: combinaciones y códigos hexadecimales

Una paleta de colores sólida para tu portafolio hace mucho más que lucir “bonita”: establece silenciosamente expectativas sobre tu gusto, tu oficio y cuán pulido se percibe tu trabajo. La mezcla adecuada de tonos neutros y acentos puede facilitar la lectura de los estudios de caso y aumentar la confianza en tus llamados a la acción.

A continuación encontrarás más de 20 ideas de esquemas de color para portafolios (con códigos HEX) que puedes copiar, modificar y visualizar para sitios web, currículums, presentaciones y marca personal.

Por qué las paletas de portafolio funcionan tan bien

Los colores de diseño del portafolio realizan mucho trabajo: crean jerarquía, guían la atención y ayudan a los visitantes a entender qué es lo más importante (rol, resultados y visuales clave). Cuando tu paleta es coherente, tu trabajo se ve más cohesivo, incluso entre diferentes proyectos.

La mayoría de las combinaciones de colores efectivas para portafolio optan por un fondo neutro (para mantener el contenido legible) y eligen un acento intencionado para acciones y destacados. Este enfoque mantiene la interfaz tranquila sin perder la identidad de marca.

Por último, un esquema de color confiable reduce fricción: el contraste limpio mejora la accesibilidad, mientras que el uso repetido de acentos entrena la vista a reconocer enlaces, botones y estados interactivos al instante.

Más de 20 ideas de paletas de colores para portafolios (con códigos HEX)

1) Lino a Medianoche

HEX: #0b1320 #1f2a44 #f2efe8 #c7b8a6 #b46a55

Estado de ánimo: refinado, calmado, editorial

Ideal para: maqueta de página de inicio de portafolio UI 2D

Refinados y calmados como lino bajo la luz de un estudio nocturno, estos tonos equilibran azules profundos de tinta con cálidos neutros táctiles. Utiliza los tonos oscuros para encabezados y navegación, y deja que el lino y la arena lleven las secciones principales y los espacios en blanco. La terracota funciona mejor como acento reservado en botones, etiquetas o enlaces clave. Consejo: mantén el contraste alto usando texto #0b1320 sobre #f2efe8 para una sensación nítida y tipo imprenta.

Ejemplo de imagen de lino a medianoche generado con media.io

Media.io

Media.io es un estudio de IA en línea para crear y editar video, imagen y audio en tu navegador.

Pruébalo Gratis Ahora

2) Concreto de Estudio

HEX: #2b2d31 #5a6068 #d8dadd #f7f7f5 #ff6b4a

Estado de ánimo: industrial, moderno, enérgico

Ideal para: póster de diseño gráfico sobre fondo liso

Industrial y moderno, este conjunto evoca paredes de concreto, luz suave y un marcador neón llamativo. Construye tus layouts con los grises para jerarquía tipográfica y estructura, y deja que el blanco cálido abra los espacios negativos. El naranja-rojo destaca como elemento focal para llamadas a la acción o un titular. Consejo: limita el acento a una o dos formas para que la paleta se mantenga sofisticada, no deportiva.

Ejemplo de imagen de concreto de estudio generado con media.io

3) Salvia de Galería

HEX: #1f2f2b #3f5f55 #a6b89a #e7e4d9 #c07a4b

Estado de ánimo: terroso, curado, calmado

Ideal para: diseño de kit de identidad de marca sobre fondo liso

Terroso y curado, estos verdes y neutros cálidos evocan una galería tranquila con marcos de madera natural. Usa el verde-negro profundo para logotipos y títulos, y deja que la salvia y la avena llenen fondos y paneles. El tono cobre es perfecto para sellos, iconos o una línea de destacado en un kit de marca. Consejo: combina el cobre con mucho espacio #e7e4d9 para mantener el aspecto premium.

Ejemplo de imagen de salvia de galería generado con media.io

4) Tinta y Coral

HEX: #0d1b2a #1b263b #415a77 #e0e1dd #ff5d5d

Estado de ánimo: seguro, limpio, alto contraste

Ideal para: maqueta de página de estudio de caso UI 2D

Seguro y limpio, los azules intensos evocan un blazer nítido, mientras que el coral aporta un toque creativo moderno. Usa el tono más oscuro para texto principal y navegación, y reserva el gris pálido para fondos de sección generosos. El coral funciona mejor como color de acción principal en toda la interfaz, por ejemplo en enlaces y estados de progreso. Consejo: suaviza bloques oscuros grandes con #415a77 para evitar una sensación pesada en la parte superior de la página.

Ejemplo de imagen de tinta y coral generado con media.io

5) Prueba Terracota

HEX: #2a1f1a #6b3f2a #c56b45 #f3e9df #2f4f4f

Estado de ánimo: artesanal, cálido, arraigado

Ideal para: maqueta realista de empaque en estudio

Cálida y arraigada como arcilla, café espresso y papel envejecido, esta combinación es ideal para marcas artesanales. Usa el crema como base del empaque, luego superpone tonos terracota para etiquetas y detalles ilustrativos. El verde-azul profundo es un contraste inteligente para listas de ingredientes o pequeños distintivos. Consejo: mantén la tipografía en #2a1f1a para legibilidad y un acabado hecho a mano y premium.

Ejemplo de imagen de prueba terracota generado con media.io

6) Cuadrícula Durazno Suave

HEX: #2b2f3a #5d6472 #f6d6c9 #f8f4f0 #d0a37f

Estado de ánimo: amigable, aireado, discreto

Ideal para: diseño de volante de evento sobre fondo liso

Amigable y aireada, estos tonos evocan papel rosado, lápiz de grafito y luz suave de estudio. Deja que el casi blanco cubra la mayor parte del lienzo, y estructura con grises pizarra para tipografía y líneas de cuadrícula. El durazno y el marrón cálido añaden cercanía a fechas, destacados o pequeños iconos. Consejo: usa durazno debajo de bloques de texto clave para guiar la mirada sin gritar.

Ejemplo de imagen de cuadrícula durazno suave generado con media.io

7) Currículum de Vidrio Marino

HEX: #0f1f2b #1f4d5a #5ea3a3 #d9f1ef #f4fbfa

Estado de ánimo: fresco, confiable, sereno

Ideal para: diseño editorial de página de currículum

Frescos y serenos, estos azules de vidrio marino evocan luz costera y agua clara. Usa el azul marino para encabezados y texto de cuerpo, y añade verde-azulado para separadores de sección e iconos pequeños. El aqua pálido y el casi blanco mantienen la página abierta y legible para contenido extenso. Consejo: reserva #5ea3a3 para barras de habilidades o líneas de tiempo, manteniendo el layout calmado y profesional.

Ejemplo de imagen de currículum de vidrio marino generado con media.io

8) Plano Bronce

HEX: #0a1a2a #17324a #2b556e #b08d57 #f2ede3

Estado de ánimo: premium, técnico, compuesto

Ideal para: maqueta de panel de control UI 2D

Premium y compuesto, este conjunto se lee como un plano trazado en tinta con una regla de bronce sobre papel marfil. Los azules estratificados crean jerarquía clara para paneles, gráficos y barras laterales sin ser demasiado llamativos. El bronce aporta un acento destacado para estados activos, métricas clave o distintivos pequeños en una paleta que transmite credibilidad. Consejo: usa el bronce sobre fondos oscuros para que resalte y luzca pulido.

Ejemplo de imagen de plano bronce generado con media.io

9) Cuaderno Ciruela

HEX: #1d1024 #40214e #7a3b74 #e4d3ea #f0b7a6

Estado de ánimo: creativo, melancólico, juguetón

Ideal para: carrusel gráfico para redes sociales sobre fondo liso

De carácter cambiante y lúdico, estos tonos ciruela evocan el margen de un cuaderno lleno de tinta y resaltadores pastel. Usa el morado más oscuro para titulares atrevidos y deja que el lavanda suavice los paneles secundarios y las leyendas. El detalle melocotón es ideal para un elemento repetitivo, como los números de diapositiva o un conjunto sencillo de íconos. Consejo: evita colocar párrafos largos sobre el morado más oscuro; resérvalo para textos cortos y contundentes.

Ejemplo de imagen de cuaderno ciruela generado con media.io

10) Papel del Bosque

HEX: #101d18 #244b3a #5f8c6d #dfe8d9 #f7f4ea

Estado de ánimo: natural, estable, restaurador

Ideal para: ilustración botánica en acuarela

Natural y restaurador, estos verdes parecen hojas sombreadas sobre papel artesanal. Usa el verde bosque profundo para contornos y títulos, luego construye follaje en tonos medios con #244b3a y #5f8c6d. Los verdes pálidos y la crema cálida crean fondos suaves para tarjetas, diapositivas o márgenes de ilustración. Consejo: manten el verde más oscuro en áreas pequeñas para preservar la sensación aérea y botánica.

Ejemplo de imagen de papel del bosque generado con media.io

11) Cobalto de Accento

HEX: #0b1020 #142a6e #2e5fff #d9e2ff #f2f4f8

Estado de ánimo: afilado, digital, enérgico

Ideal para: maqueta de sección principal UI en 2D

Afilada y digital, esta paleta recuerda el modo nocturno con el resplandor de un cursor azul láser. Mantén la mayoría de las superficies en grises suaves y azul periwinkle pálido para una interfaz despejada. Usa cobalto para acciones primarias, pestañas seleccionadas y enlaces, mientras que el navy más oscuro ancla los encabezados. Consejo: intenta degradados de #142a6e a #2e5fff para un banner moderno sin añadir colores extra.

Ejemplo de imagen de acento cobalto generado con media.io

12) Monocromo Arenisca

HEX: #1b1b1b #4a4a4a #8a8a8a #d6d2c4 #faf7f0

Estado de ánimo: minimalista, atemporal, de galería

Ideal para: diseño de doble página de revista

Minimalista y como de galería, estos grises y tonos arena evocan piedra, mina de lápiz y papel de archivo. Usa negro y carbón para la tipografía, y confía en los neutros cálidos claros para márgenes y bloques de fondo. El gris medio funciona bien para leyendas, notas al pie y reglas sutiles que guían al lector. Consejo: añade textura con el grano del papel o ruido ligero en vez de más color.

Ejemplo de imagen de monocromo arenisca generado con media.io

13) Cereza sobre Pizarra

HEX: #1a2433 #334155 #64748b #f1f5f9 #e11d48

Estado de ánimo: moderno, seguro, nítido

Ideal para: maqueta de página de destino de producto UI en 2D

Moderna y nítida, los azules pizarra marcan un ritmo regular mientras que el rojo cereza aporta un golpe de confianza. Usa el fondo claro para espacio y reserva los tonos pizarra para navegación, tarjetas y bordes sutiles. Para ideas de combinación de colores de portafolio que sigan pareciendo profesionales, la cereza funciona mejor como único color de acción en botones y enlaces. Consejo: evita el rojo en bloques de texto largos y resérvalo para microinteracciones y detalles destacados.

Ejemplo de imagen de cereza sobre pizarra generado con media.io

14) Menta Aurora

HEX: #0e1b2a #224b46 #4fd1c5 #d9fff8 #fff7e6

Estado de ánimo: fresca, optimista, luminosa

Ideal para: pantallas de onboarding UI en 2D

Fresca y luminosa, la menta y el teal profundo evocan luz pasando por vidrio. Usa el navy como color de texto base, luego permite que la menta y el aqua pálido llenen paneles, tarjetas y formas ilustrativas amigables. La crema cálida es un contrapeso sutil para que la interfaz no se vuelva fría. Consejo: reserva la menta más brillante para indicadores de progreso y estados de éxito para hacer que el onboarding se sienta gratificante.

Ejemplo de imagen de menta aurora generado con media.io

15) Lienzo Mocha

HEX: #231b16 #4b342a #8c6a4a #d8c3a5 #f2efe9

Estado de ánimo: acogedor, artesanal, premium

Ideal para: foto de estudio realista de diseño de etiqueta de producto

Acogedora y artesanal, estos marrones y cremas evocan café tostado, cuadernos de cuero y lienzo sin blanquear. Usa los tonos más oscuros para tipografía y logotipos, luego aporta calidez con los marrones medios en etiquetas y patrones. Los neutros pálidos mantienen la composición limpia y elegante tanto para packaging como para lookbooks. Consejo: añade gofrados sutiles o efectos de foil en la gama marrón media para profundidad sin introducir más tonos.

Ejemplo de imagen de lienzo mocha generado con media.io

16) Tipografía al Atardecer

HEX: #121826 #2a2f45 #ff8a5b #ffd2a6 #fff3e9

Estado de ánimo: cálido, moderno, acogedor

Ideal para: cartel tipográfico sobre fondo liso

Cálido y acogedor, estos tonos recuerdan la luz del atardecer sobre una pared de estudio oscura. Usa la pareja índigo intensa para tipo audaz y alineación fuerte, luego superpone melocotón y albaricoque para acentos y figuras complementarias. El rubor pálido mantiene el fondo suave y legible, especialmente para carteles grandes o diapositivas de portada. Consejo: prueba el albaricoque (#ffd2a6) tras los titulares para crear jerarquía instantánea sin gráficos extra.

Ejemplo de imagen de tipografía al atardecer generado con media.io

17) Lavanda Gélida

HEX: #131a2a #2f3a5f #a3a6ff #e8e9ff #f7f7ff

Estado de ánimo: fresca, pulida, futurista

Ideal para: maqueta de página de configuración UI en 2D

Fresco y pulido, esta mezcla lavanda se siente como cristal escarchado y aire de invierno nítido. Usa el navy más oscuro para títulos y conmutadores, luego deja que el lila suave llene fondos y tarjetas. El periwinkle más brillante es ideal para estados seleccionados y sliders sin resultar neón. Consejo: mantén los bordes sutiles usando #e8e9ff así la interfaz permanece aérea y moderna.

Ejemplo de imagen de lavanda gélida generado con media.io

18) Cianotipo Vintage

HEX: #071a2a #0b3a53 #2c7da0 #a9d6e5 #eaf4f4

Estado de ánimo: nostálgica, académica, oceánica

Ideal para: diseño de portada de revista editorial

Nostálgicos y oceánicos, estos azules evocan cianotipos y atlases antiguos. Usa navy profundo para cabeceras y bloques tipográficos fuertes, y reserva el azul medio para subtítulos y destacados. Los tonos aqua pálidos crean espacio limpio que sigue con color, sin ser blanco puro. Consejo: añade reglas finas e iconos pequeños en #2c7da0 para un acabado académico y artesanal.

Ejemplo de imagen de cianotipo vintage generado con media.io

19) Oliva Contable

HEX: #161c12 #3b4a2a #7c8a5b #e6e2d3 #c9a66b

Estado de ánimo: tradicional, terroso, confiable

Ideal para: maqueta de set de papelería en estudio

Tradición y confianza, tonos oliva y caqui recuerdan libros contables antiguos, sellos de cera y telas de libros gastadas. Usa el oliva profundo para logotipos y títulos, luego apóyate en el pergamino pálido para fondos y papel. Para combinaciones de color de portafolio clásicas, el oro apagado añade un acento elegante en reglas, íconos o sellos. Consejo: mantén el oro pequeño y consistente, como un destaque por sección, para conservar la sensación de archivo.

Ejemplo de imagen de oliva contable generado con media.io

20) Cuarzo Rosa Código

HEX: #1a1f2b #3b4252 #b48ead #e5d7e9 #f6f1f5

Estado de ánimo: suave, inteligente, contemporáneo

Ideal para: maqueta de sección de portafolio de desarrollador UI en 2D

Suave e inteligente, estos tonos evocan editores de código gris crepuscular iluminados con luz de cuarzo rosa. Usa el par carbón para bloques de código, navegación y títulos, y deja que los neutros rubor lleven el fondo de la página. El tono malva es perfecto para etiquetas, estados de enlace y destacados de datos sutiles sin parecer infantil. Consejo: para una paleta de color de portafolio legible, pon el texto principal en #1a1f2b sobre #f6f1f5 y limita los acentos a un solo malva.

Ejemplo de imagen de cuarzo rosa código generado con media.io

21) Arcilla y Nube

HEX: #1c2230 #3d4a5c #b7c3d0 #eef2f6 #c46a5a

Estado de ánimo: equilibrada, profesional, accesible

Ideal para: maqueta de página "acerca de" UI en 2D

Equilibrada y accesible, esta mezcla parece un denim tormentoso con arcilla calentada al sol. Usa los azules-grises profundos para estructura y tipografía, luego deja que los tonos nube aclaren secciones grandes y tarjetas. La arcilla ofrece un acento amigable para CTAs, marcadores de línea de tiempo o ilustraciones pequeñas. Consejo: mantén las sombras sutiles y confía en #b7c3d0 para los bordes para conservar el diseño aéreo.

Ejemplo de imagen de arcilla y nube generado con media.io

¿Qué colores combinan bien con el portafolio?

Los neutros son la base de la mayoría de las paletas de portafolio porque permiten que tus muestras de trabajo sigan siendo el foco. Piensa en tinta/navy, carbón, blanco cálido y gris suave para diseños donde legibilidad y jerarquía son clave.

Luego agrega un color de acento que indique interactividad y énfasis — botones, enlaces, chips y métricas clave. Coral, cobalto, menta, bronce o dorado apagado funcionan bien si se usan de manera consistente.

Si tus proyectos son visualmente diversos, mantén tu esquema de colores de portafolio restringido y deja que las imágenes aporten variedad. Un fondo estable + un solo acento suele sentirse más premium que varios tonos competidores.

Cómo usar una paleta de colores de portafolio en diseños reales

Comienza asignando roles, no solo eligiendo colores: uno para texto principal, otro para secundario, uno para superficies (tarjetas/secciones), uno para bordes/divisores, y uno para acciones de acento. Esto hace tus combinaciones de color de portafolio repetibles en todas las páginas.

Usa el contraste intencionalmente para accesibilidad: texto oscuro sobre superficies claras sigue siendo la opción más sencilla para estudios de caso y currículums. Guarda los colores saturados para pequeños momentos UI como pestañas activas, estados hover y destacados.

Finalmente, mantén la coherencia en los componentes — botones, etiquetas, íconos, gráficos y destacados deben compartir la misma lógica de acento para que el sitio completo luzca diseñado, no decorado.

Crea visuales de paletas para portafolios con inteligencia artificial

Si presentas un nuevo estilo para tu sitio personal (o creas un kit de marca), generar maquetas rápidas te ayuda a validar una paleta antes de comprometerte con un rediseño completo. Un héroe sencillo, página de caso o currículo suelen bastar para probar el ambiente.

Con Media.io, puedes transformar ideas de paletas en imágenes rápidamente, luego iterar prompts, composición y luz hasta que los colores encajen para tu nicho y audiencia.

Prueba crear un concepto de “modo claro” y otro de “modo oscuro” usando el mismo color de acento para mantener tu branding consistente en todos los dispositivos.

Siguiente: Paleta de color Oxford Blue