El amarillo y el gris son una de las combinaciones modernas más fáciles de diseñar: el amarillo aporta energía y simpatía, mientras que el gris añade estructura, equilibrio y una sensación “tecno-neutral” de alta calidad.
A continuación encontrarás 20 paletas de colores amarillo y gris con códigos HEX, además de consejos prácticos para interfaz de usuario, branding, impresión e interiores—para que elijas el ambiente adecuado y lo apliques al instante.
En este artículo
- Por qué funcionan tan bien las paletas amarillo y gris
-
- hormigón soleado
- pizarra mostaza
- niebla de limón
- taxi sobre asfalto
- duna dorada
- mica suave
- miel industrial
- autobús escolar retro
- neblina primaveral
- citrino grafito
- acero de cosecha
- caléndula urbana
- piedra mantequilla
- guijarro latón
- seguridad neón
- lana acogedora
- bauhaus moderno
- carretera del desierto
- humo azafrán
- periódico amarillento
- ¿Qué colores combinan bien con el amarillo gris?
- Cómo usar una paleta amarillo y gris en diseños reales
- Crea visuales de paletas amarillo y gris con IA
Por qué funcionan tan bien las paletas amarillo y gris
El amarillo atrae la atención de forma natural, lo que lo hace perfecto para resaltes—botones, insignias, iconos o pequeños detalles decorativos. El gris, en cambio, te da una base tranquila que no compite con tu contenido.
Juntos, crean una jerarquía limpia: el gris se encarga de la legibilidad y la estructura del diseño, mientras el amarillo guía la vista hacia lo más importante. Esto es especialmente útil en diseño UI, carteles y paneles de control donde la claridad lo es todo.
Las paletas amarillo y gris también se adaptan muy bien de lo minimalista a lo audaz. Puedes mantener un ambiente aireado con grises claros y amarillos suaves, o elegir el máximo contraste con tonos carbón, casi negro y amarillo intenso para mayor impacto.
20+ ideas de paletas de colores amarillo y gris (con códigos HEX)
1) Hormigón Soleado
HEX: #F6C945 #D9D9D6 #8A8D8F #2E2F33 #FFF6E0
Estado de ánimo: brillante, moderno, sólido
Ideal para: interfaz de usuario de panel SaaS
Brillante y aireado como la luz de la mañana reflejada en las aceras de la ciudad, estos tonos transmiten confianza sin gritar. Usa el blanco suave como lienzo principal y reserva el amarillo para acciones clave y resaltes. Los grises medios mantienen legibles las tablas y gráficos, mientras que el casi negro aporta una jerarquía nítida. Consejo: limita el amarillo a pequeños elementos de UI para que siga siendo impactante y accesible.
Ejemplo visual de hormigón soleado generado con media.io
Media.io es un estudio de IA en línea para crear y editar vídeo, imagen y audio desde tu navegador.
2) Pizarra Mostaza
HEX: #C9A227 #6E7074 #2C2D30 #E7E2D3 #F3EFE6
Estado de ánimo: rico, acogedor, refinado
Ideal para: identidad de marca para cafetería boutique
Cálido y algo vintage, evoca granos tostados, café oscuro y pizarras de tiza. Esta combinación de amarillo y gris destaca en logos, etiquetas y encabezados de menús donde buscas energía artesanal con una sensación premium. Combínalo con papeles texturizados y una simple tipografía serif para acentuar la vibra artesanal. Consejo: imprime el mostaza como acento y deja que el pizarra lidere la legibilidad.
Ejemplo visual de pizarra mostaza generado con media.io
3) Niebla de Limón
HEX: #FFE36E #F2F2F0 #B9BCC1 #5A5D63 #1F2024
Estado de ánimo: suave, fresco, calmado
Ideal para: pantallas de bienvenida para app móvil
Suave y optimista, se siente como un té de limón en una mañana de niebla. Los neutros pálidos mantienen las pantallas ligeras, mientras los grises más oscuros generan contraste limpio para el texto. Usa el amarillo en indicadores de progreso, iconos amigables y micro-animaciones. Consejo: suaviza el aspecto con componentes redondeados y espacios generosos.
Ejemplo visual de niebla de limón generado con media.io
4) Taxi sobre Asfalto
HEX: #FFD100 #A8AAAD #3B3D42 #121316 #F5F5F5
Estado de ánimo: audaz, urbano, energético
Ideal para: cartel para evento tech
De alto impacto y corte urbano, evoca reflejos de neón y paseos nocturnos por la ciudad. Esta paleta amarillo y gris funciona mejor con alto contraste: negro para el texto, amarillo brillante para titulares y gris para información secundaria. Mantén el diseño minimalista para que la paleta haga el trabajo. Consejo: utiliza bloques grises detrás de textos pequeños para mejorar la legibilidad en fondos brillantes.
Ejemplo visual de taxi sobre asfalto generado con media.io
5) Duna Dorada
HEX: #E7B93C #CFC8B8 #9A9C9F #4A4D52 #FFF1D1
Estado de ánimo: cálido, relajado, natural
Ideal para: guía de paleta para dormitorio acogedor
Cálida y terrosa, trae a la mente dunas, lino y luz suave de la tarde. Usa el blanco cremoso en muros y ropa de cama, luego suma grises en textiles y muebles para equilibrar. El tono dorado es perfecto para una manta, pantalla de lámpara o acento artístico que aporte calidez sin ser estridente. Consejo: elige acabados mate para que los neutros se mantengan calmados y acogedores.
Ejemplo visual de duna dorada generado con media.io
6) Mica Suave
HEX: #F2D06B #E5E6E8 #B3B6BB #70737A #2B2D31
Estado de ánimo: limpio, delicado, premium
Ideal para: diseño de empaque para cuidado de la piel
Sedosa y discreta, evoca el brillo de minerales y toallas de spa. Los grises claros crean una base clínicamente limpia, mientras que el amarillo aporta un suave resplandor en detalles y sellos. Combina con tipografía sans-serif simple y mucho espacio en blanco para un look moderno y profesional. Consejo: reserva el tono más oscuro solo para textos pequeños, como ingredientes e instrucciones.
Ejemplo visual de mica suave generado con media.io
7) Miel Industrial
HEX: #F5B800 #D0D2D4 #8E9196 #3A3C40 #0F1012
Estado de ánimo: elegante, estructurado, seguro
Ideal para: interfaz de página principal e-commerce
Nítida y de ingeniería, recuerda al metal pulido con un toque de luz miel. Esta paleta amarillo y gris es ideal para e-commerce donde necesitas confianza y rapidez: grises neutros para cuadrículas de productos, casi negro para el texto y amarillo para llamadas a la acción. Combínala con fotografía de producto impecable y espacios consistentes para evitar ruido visual. Consejo: prueba los estados hover con un tinte amarillo más claro para una interfaz coherente.
Ejemplo visual de miel industrial generado con media.io
8) Autobús Escolar Retro
HEX: #FFCC00 #7A7D81 #4B4E53 #1C1D20 #FFF8D8
Estado de ánimo: divertido, audaz, nostálgico
Ideal para: volante de equipo deportivo
Enérgica y de inspiración vintage, evoca gimnasios, buses escolares y uniformes clásicos. El amarillo brillante es ideal para nombres de equipos y fechas clave, mientras que los tonos carbón aseguran un diseño fuerte y legible. Combina con tipografía contundente e iconografía simple para el ambiente retro. Consejo: usa la crema pálida como espacio en blanco para no sobrecargar el volante.
Ejemplo visual de autobús escolar retro generado con media.io
9) Neblina Primaveral
HEX: #F9D77A #E9E7E1 #BFC2C7 #6B6E75 #2E3035
Estado de ánimo: romántico, etéreo, delicado
Ideal para: set de invitaciones de boda botánicas
Ligera y soñadora, recuerda a flores primaverales bajo un cielo brumoso. Usa el amarillo cálido en detalles delicados como monogramas o pequeños bordes, mientras los neutros suaves crean el fondo. Combínalo con florales en acuarela y una caligrafía elegante para un resultado atemporal. Consejo: imprime el texto gris un poco más oscuro de lo esperado para mantener la legibilidad en papel texturizado.
Ejemplo de imagen de neblina primaveral generada con media.io
10) Citrino Grafito
HEX: #F4C83A #C9CBD0 #9EA1A8 #3C3E45 #15161A
Estado de ánimo: nítido, editorial, contemporáneo
Ideal para: diseño de artículo para revista
Pulido y moderno, transmite la sensación de impresión brillante, lápiz de grafito y un toque de citrino. Usa negro y gris oscuro para los titulares y citas destacadas, luego deja que el amarillo guíe la vista hacia los marcadores de sección o puntos de datos. Combina con fotografía potente y un diseño basado en cuadrícula para mantener un aspecto premium. Consejo: limita el amarillo al 5-10% de la página para no sobrecargar el tono editorial.
Ejemplo de imagen de citrino grafito generada con media.io
11) Acero Cosecha
HEX: #DFAF2B #D8D4CA #A2A4A7 #5D6066 #2A2B2F
Estado de ánimo: estable, cálido, profesional
Ideal para: plantilla de presentación de diapositivas
Equilibrado y listo para negocios, se percibe como oro cosecha combinado con acero cepillado. Usa el amarillo cálido para divisores de sección y cifras clave, mientras que los grises sirven para gráficos, pies de foto y notas. Combina con iconos simples y espaciado consistente para un look seguro y ejecutivo. Consejo: mantén los fondos de las diapositivas claros y usa el gris más oscuro solo para los títulos.
Ejemplo de imagen de acero cosecha generada con media.io
12) Caléndula Urbana
HEX: #FFC93C #BFC1C4 #7C7F86 #34363B #FAFAF7
Estado de ánimo: animado, moderno, accesible
Ideal para: diseño de menú de restaurante
Animado como caléndulas sobre concreto, transmite una sensación amigable, contemporánea y fácil de explorar. Para una paleta de menú en amarillo y gris, utiliza el casi negro para los nombres de platos, gris medio para las descripciones y amarillo para resaltar sugerencias o platos picantes. Combina con reglas limpias de sección y mucho espacio en blanco para un ambiente "premium casual". Consejo: evita cuerpos de texto en amarillo, mejor úsalo en etiquetas e iconos para claridad.
Ejemplo de imagen de caléndula urbana generada con media.io
13) Butterstone
HEX: #F7DA7C #F4F1E8 #C6C7C9 #8A8C90 #3E4045
Estado de ánimo: suave, reconfortante, apto para familias
Ideal para: moodboard interior de guardería
Reconfortante y apacible, evoca galletas de mantequilla, mantas suaves y siestas tranquilas. Usa crema clara para paredes y muebles grandes, y añade gris en alfombras, almacenaje y cortinas para estructura y calma. El amarillo funciona bellamente en pequeñas piezas decorativas como láminas o juguetes de peluche. Consejo: elige bombillas de luz cálida para que la paleta se mantenga acogedora y no fría.
Ejemplo de imagen de butterstone generada con media.io
14) Guijarro de Latón
HEX: #D8B34B #D4D5D7 #9A9DA3 #585B61 #1B1C20
Estado de ánimo: elegante, tecnológico, premium
Ideal para: anuncio de producto smartwatch
Elegante y discreto, evoca latón cepillado sobre piedra lisa. Deja que los grises dominen el fondo para resaltar el producto, utilizando el amarillo cálido como acento de marca en mensajes destacados o insignias de características. Combina con iluminación precisa y texto minimalista para que el anuncio se mantenga moderno. Consejo: evita sobresaturar el amarillo en impresión, úsalo como realce controlado.
Ejemplo de imagen de guijarro de latón generada con media.io
15) Neón de Seguridad
HEX: #FFEA00 #B7B9BC #6C6F75 #2D2F34 #0B0C0E
Estado de ánimo: alerta, alto contraste, utilitario
Ideal para: set de señalización de seguridad de construcción
Directo y llamativo, evoca chalecos reflectantes y líneas de advertencia recién pintadas. Combinaciones de amarillo y gris como esta funcionan mejor cuando la prioridad es el contraste: negro para iconos, amarillo para advertencias y grises neutros para información de apoyo. Combina con tipografía sans-serif audaz y formas simples para mantener los mensajes claros desde lejos. Consejo: deja márgenes generosos para asegurar la legibilidad en entornos concurridos.
Ejemplo de imagen de neón de seguridad generada con media.io
16) Lana Acogedora
HEX: #E6C15A #E2E0DA #B0B1B4 #6A6C71 #2F3034
Estado de ánimo: cálido, sereno, táctil
Ideal para: portada de lookbook de prendas de punto
Táctil y acogedor, recuerda a suéteres de lana y cálida luz de cafetería. Usa neutros suaves para poner la fotografía en primer plano y agrega amarillo como acento estacional en títulos o pequeños elementos gráficos. Combina con tipografía editorial y márgenes amplios para un lookbook de alta gama. Consejo: mantén el contraste alto en el texto de portada para que sea legible en miniaturas.
Ejemplo de imagen de lana acogedora generada con media.io
17) Bauhaus Moderno
HEX: #F3C300 #E6E6E6 #9C9FA6 #2E3036 #111214
Estado de ánimo: gráfico, limpio, modernista
Ideal para: impresión de arte mural geométrico
Gráfico y disciplinado, remite a pósteres modernistas y geometría limpia. Usa el amarillo para figuras audaces y equilibra la composición con carbón y grises medios equilibrados. Combina con círculos simples, líneas y diseños asimétricos para ese aire de galería. Consejo: deja un borde generoso para que la impresión luzca intencionada al enmarcarse.
Ejemplo de imagen de bauhaus moderno generada con media.io
18) Camino del Desierto
HEX: #EAC24A #D6D2C7 #9B9DA1 #4E5056 #1E1F23
Estado de ánimo: cinematográfico, abrasado por el sol, aventurero
Ideal para: banner principal para blog de viajes
Cinematográfico y soleado, transmite la sensación de un largo camino perdiéndose en la calina del calor. Deja que el arena blanquecino y los grises claros formen el fondo, usa el amarillo como acento en botones o etiquetas de categoría. Combina con imágenes panorámicas y texto mínimo para un ambiente de viaje moderno. Consejo: aplica una superposición gris sutil a las fotos para que los titulares blancos sean legibles.
Ejemplo de imagen de camino del desierto generada con media.io
19) Humo de Azafrán
HEX: #F1B12C #D3D4D6 #A1A3A8 #61646B #202227
Estado de ánimo: atmosférico, dramático, elegante
Ideal para: cartel de película thriller noir
Con carácter y estilo, evoca luz difusa, farolas y un resplandor de azafrán en la noche. Usa casi negro como base y para la tipografía, y deja que el amarillo resalte en el título o un único elemento gráfico. Combina con texturas granuladas y fotografía de alto contraste para un acabado cinematográfico. Consejo: pon el texto secundario en gris claro para mantener legibilidad sin robar atención.
Ejemplo de imagen de humo de azafrán generada con media.io
20) Periódico Amarillento
HEX: #F0D46A #E8E3D6 #B5B7BB #6E7177 #26282D
Estado de ánimo: reflexivo, vintage, confiable
Ideal para: infografía para informe de sostenibilidad
Reflexiva y ligeramente vintage, transmite la sensación de papel y tinta archivados. Usa el beige claro como base, luego organiza secciones con grises fríos para estructura y gráficos. El amarillo es un gran acento para métricas clave, destacados y barras de progreso sin resultar demasiado corporativo. Consejo: usa solo dos colores de datos y deja que el gris haga la mayor parte del trabajo en los gráficos.
Ejemplo de imagen de periódico amarillento generada con media.io
¿Qué colores combinan bien con el amarillo gris?
El amarillo y el gris combinan bien con neutros nítidos como blanco y casi negro, porque aumentan el contraste y mantienen los diseños legibles. En UI, esto ayuda a reservar el amarillo para los CTA, mientras que los grises se encargan de superficies, divisores y texto secundario.
Para una dirección más cálida, añade beige, crema o canela para suavizar la paleta y hacerla más amigable para interiores. Para una dirección moderna y fresca, añade azul grisáceo o tonos acero para un ambiente limpio y tecnológico.
Si buscas un acento llamativo más allá del amarillo, prueba un toque controlado (verde azulado, cobalto o rubor) en pequeñas dosis—iconos, etiquetas o elementos destacados en gráficos—para que el amarillo siga siendo el color de atención principal.
Cómo usar una paleta amarillo y gris en diseños reales
Comienza pensando en los roles, no sólo en los colores: elige un neutro claro para el fondo, un gris medio para superficies, un gris oscuro/casi negro para texto, y mantiene el amarillo como color de “acción”. Este mapeo sencillo da coherencia al diseño en páginas y componentes.
Para accesibilidad, evita usar amarillo para texto largo y garantiza suficiente contraste en botones y etiquetas. Un método común es texto oscuro sobre fondos claros, con amarillo reservado para iconos, realces y botones rellenos que aún cumplan los requisitos de contraste junto a tipografía oscura.
En impresión e interiores, usa el gris como “base tranquila” (paredes, bloques grandes, espacios negativos) y coloca amarillo donde quieras calidez y enfoque (titulares, señalización, cojines, acentos de iluminación).
Crea visuales de paletas amarillo y gris con IA
Cuando tengas la paleta elegida, la forma más rápida de validarla es verla en contexto—como en un dashboard, póster, empaque o escena de habitación. Es ahí donde las simulaciones de IA ayudan: puedes iterar diseños e iluminación sin rehacer desde cero.
Usa tus códigos HEX como guía, luego describe el tipo de diseño, ambiente y composición (por ejemplo: “pantallas mínimas de onboarding”, “cuadrícula editorial” o “interior de dormitorio cálido”). Genera algunas variantes y quédate con la de mejor jerarquía y contraste.
Media.io facilita convertir estas ideas de paletas en visuales para compartir con clientes o compañeros.
Preguntas frecuentes sobre la paleta de color amarillo y gris
-
¿Es el amarillo y gris una buena combinación de colores para UI?
Sí. El gris proporciona superficies neutras y tipografía legible, mientras que el amarillo funciona bien para CTAs, insignias de estado y realces clave—solo limita el uso del amarillo para que siga atrayendo la atención. -
¿Qué tono de gris es mejor para combinar con amarillo?
El carbón y el casi negro crean el contraste más fuerte para diseños audaces, mientras que los grises medios y los grises cálidos claros resultan más suaves y modernos para interfaces minimalistas e interiores. -
¿Debo usar amarillo para el texto?
En general, evita el amarillo para el texto principal porque el contraste puede ser débil en fondos claros. Usa amarillo para iconos, etiquetas, bordes o rellenos de botones, y mantiene el texto en oscuro para la legibilidad. -
¿Cuánto amarillo debo usar en una paleta amarillo-gris?
Un buen punto de partida es un 5–15% de amarillo como acento, dejando el trabajo pesado a los grises y blancos sucios. Aumenta el amarillo solo si buscas un impacto visual más fuerte, tipo póster. -
¿Qué colores acento combinan bien con amarillo y gris?
El verde azulado, azul marino, cobalto y rubor pueden funcionar como acentos pequeños. Mantenlos limitados (para etiquetas o realces de datos) para que la paleta no pierda su enfoque limpio y moderno. -
¿El amarillo mostaza es mejor que el amarillo brillante con gris?
La mostaza se siente más cálida y vintage/premium en la marca y la impresión, mientras que el amarillo brillante se percibe como enérgico y tecnológico—excelente para alertas, eventos y una interfaz de usuario de alto contraste. -
¿Cómo puedo hacer que un diseño amarillo y gris se sienta menos “industrial”?
Utiliza tonos blancos cálidos (crema/beige), grises medios más suaves, formas redondeadas y más espacio en blanco. En interiores, añade texturas naturales como madera, lino y acabados mate para darle calidez.
Siguiente: Paleta de colores Black Pink
