Paletas de color gris claro: 20 combinaciones para inspirarte

El gris claro es uno de los neutros más flexibles en el diseño moderno. Puede sentirse aireado y minimalista, o cálido y sólido, dependiendo de con qué lo combines.

A continuación se presentan 20 ideas seleccionadas de paletas de colores gris claro con códigos HEX, además de consejos prácticos de combinación para UI, branding e interiores.

Por qué funcionan tan bien las paletas de gris claro

El gris claro crea un “lienzo” tranquilo que soporta tanto acentos fríos como cálidos sin competir por la atención. También reduce el resplandor en comparación con el blanco puro, lo que puede hacer que las composiciones resulten más cómodas durante largas sesiones de lectura.

Debido a que se sitúa en el medio del rango de valores, el gris claro te ayuda a crear jerarquía: puedes separar tarjetas, secciones y paneles usando sutiles variaciones de gris en lugar de bordes marcados. Esto es especialmente útil en diseño de UI, donde la claridad y la moderación son fundamentales.

El gris claro también funciona bien con texturas: lino, concreto, grano de papel, metal cepillado y acabados mate. Por eso es un neutro práctico para sistemas de identidad de marca e interiores donde los materiales cuentan gran parte de la historia.

Más de 20 ideas de paletas de color gris claro (con códigos HEX)

1) Lino Nublado

HEX: #f2f3f5 #d7d9dd #b9bcc3 #c9b8a6 #6b6f76

Ambiente: aireado, tranquilo, discreto

Ideal para: salas de estar minimalistas e interiores escandinavos

Aireado y silencioso como la niebla matutina sobre lino fresco, estos tonos mantienen el espacio abierto sin volverse estéril. Usa el acento beige cálido para suavizar los grises y enriquecer las texturas de madera. Funciona maravillosamente en paredes, tapizados y alfombras con herrajes negros mate para contraste. Consejo: repite el gris más oscuro solo en molduras o iluminación para enmarcar la habitación.

Ejemplo de imagen de lino nublado generado con media.io

Media.io

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

Pruébalo gratis ahora

2) Rubor de Concreto

HEX: #f4f4f6 #d0d2d6 #a9aeb6 #e6b7b2 #8a5a5a

Ambiente: suave, moderno, romántico discretamente

Ideal para: branding de cuidado de la piel y packaging de bienestar

Suave y moderno como el concreto calentado por un atardecer sonrosado, esta mezcla se siente gentil pero madura. Para combinaciones de gris claro que resulten acogedoras, deja el rosa en pequeños bloques mientras los grises sostienen el diseño. Destaca en etiquetas, tubos y sistemas de marca minimalistas con mucho espacio blanco. Consejo: usa el marrón-rosado más profundo para encabezados de ingredientes y mantener la legibilidad clara.

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

3) Plano de Perla

HEX: #f5f6f7 #d9dbe0 #b4b8c0 #2f5d8a #101820

Ambiente: limpio, confiado, técnico

Ideal para: dashboards SaaS y UI con muchos datos

Limpio y confiado como una perla pulida junto a un plano, el azul profundo aporta estructura a los neutros suaves. Esta paleta de gris claro es ideal para tablas, tarjetas y barras laterales donde la jerarquía importa. Combina el negro-marino para textos y el gris medio para divisores, manteniendo la calma en pantallas llenas de datos. Consejo: reserva el azul brillante para acciones principales, así los clics resultan intencionados.

Ejemplo de imagen de plano de perla generado con media.io

4) Puerto de Invierno

HEX: #f1f2f4 #cfd3da #9aa3af #4f6d7a #243b53

Ambiente: frío, sólido, costero

Ideal para: composiciones editoriales y lecturas largas

Frío y sólido como un puerto tranquilo en invierno, los azules acerados añaden profundidad sin sobrecargar la página. Usa el gris más claro como fondo tipo papel y reserva los tonos más oscuros para citas destacadas o divisiones de sección. Es perfecto para revistas, informes y plantillas de blogs donde buscas calma y sofisticación. Consejo: mantiene el texto principal en el azul más profundo como alternativa suave al negro puro.

Ejemplo de imagen de puerto de invierno generado con media.io

5) Nube Cítrica

HEX: #f7f7f8 #dfe1e6 #b0b6bf #ffd36a #2b2d42

Ambiente: fresco, animado, moderno

Ideal para: carteles promocionales y gráficos de ofertas de temporada

Fresco y animado como el sol atravesando una cubierta de nubes, el amarillo cítrico añade energía instantánea. Usa los grises para estructura y deja que el amarillo destaque precios, fechas o reclamos clave. Funciona especialmente bien para promociones de tiendas, anuncios de eventos y banners sociales donde la claridad importa. Consejo: combina el amarillo con el índigo profundo para tipografía de alto contraste pero refinada.

Ejemplo de imagen de nube cítrica generado con media.io

6) Cabaña de Madera de Fresno

HEX: #f0f1f2 #c9ccd1 #9ea3ab #7a5c3c #3f3a35

Ambiente: acogedor, rústico, sólido

Ideal para: interiores de cabañas y marcas de estilo de vida al aire libre

Acogedor y sólido como madera de fresno junto a la chimenea, estos grises sienten cálidos gracias a matices marrones. Usa el taupe-marrón para muebles o marcas, y reserva el tono más oscuro para marcos y textos. Es adecuado para interiores rústicos, etiquetas de productos al aire libre y packaging de estilo tradicional sin verse anticuado. Consejo: agrega textura mediante vetas de madera o papel kraft para que los neutros se sientan táctiles.

Ejemplo de imagen de cabaña de madera de fresno generado con media.io

7) Cromo Metropolitano

HEX: #f6f7f9 #dadde2 #aeb4bd #4a4f57 #00a3b4

Ambiente: elegante, urbano, tecnológico

Ideal para: packaging de electrónica y páginas de productos tech

Elegante y urbano como cromo pulido en una estación metro, el verde azulado aporta un toque tecnológico preciso. Mantén los grises medios en fondos y usa el gris oscuro para íconos y textos. Esta combinación es fuerte para especificaciones, detalles de características y packaging donde quieres credibilidad moderna. Consejo: usa el verde azulado solo en estados clave de UI o insignias para que destaque como señal, no como ruido.

Ejemplo de imagen de cromo metropolitano generado con media.io

8) Orquídea Brumosa

HEX: #f6f5f8 #dcd9e2 #b7b0c1 #c59ad9 #5d4a72

Ambiente: soñador, elegante, suave

Ideal para: invitaciones de boda y anuncios de belleza

Soñadora y elegante como orquídeas en la niebla matinal, los tonos lavanda se sienten delicados sin ser dulces. Usa los grises pálidos como base papel y deja el morado para bordes, monogramas o ilustraciones lineales. Es perfecta para invitaciones, tarjetas de RSVP y diseños de anuncios con mucho espacio. Consejo: coloca el texto principal en violeta profundo para legibilidad manteniendo el conjunto aireado.

Ejemplo de imagen de orquídea brumosa generado con media.io

9) Avena de Grafito

HEX: #f3f4f6 #d5d7db #a7adb6 #cbb89a #2d2f33

Ambiente: profesional, cálido, confiable

Ideal para: presentaciones de negocio y pitch decks

Profesional y cálida como grafito sobre papel texturizado, el acento avena aporta humanidad. Estos tonos son ideales cuando buscas combinaciones de gris claro que sean corporativas pero no frías. Usa el tono avena para destacados y cajas de llamadas, reservando el grafito oscuro para gráficos y títulos. Consejo: limita las diapositivas a dos neutros más el acento avena para mantener ritmo limpio.

Ejemplo de imagen de avena grafito generada con media.io

10) Seaside Drift

HEX: #f4f6f7 #d2d7db #a2acb3 #2aa7a1 #0b3c49

Ambiente: fresco, limpio, refrescante

Ideal para: páginas de destino de viajes y UI de reservas

Fresco y refrescante como vidrio marino sobre arena pálida, el tono teal aporta una sensación nítida de movimiento. Usa grises claros para las secciones de contenido y reserva el teal para CTA, filtros y estados activos. Funciona bien para marcas de viajes, bienestar y servicios que buscan claridad y calma. Consejo: combina el tono oceánico profundo con espacios en blanco generosos para evitar un encabezado pesado.

Ejemplo de imagen de seaside drift generada con media.io

11) Quiet Terracotta

HEX: #f5f4f3 #d9d8d6 #b1b0ae #c36b5a #2f2b28

Ambiente: cálido, artesanal, acogedor

Ideal para: menús de café y branding para pequeños restaurantes

Cálido y acogedor como barro cocido junto a piedra blanquecina, el terracota añade un carácter artesanal. Usa los grises suaves como base del menú para que las fotos de comida y los precios se lean bien. Combina bien con texturas de papel kraft, tipografía con serif y simples iconos lineales. Consejo: limita el terracota a encabezados de sección y sellos para mantener una sensación elegante.

Ejemplo de imagen de quiet terracotta generada con media.io

12) Glacier Mint

HEX: #f7f8fa #dde2e8 #b4bcc6 #8de0d3 #1d4d4f

Ambiente: brillante, limpio, optimista

Ideal para: pantallas de onboarding de apps y UI de tecnología en salud

Brillante y limpio como agua de menta sobre hielo glaciar, el acento aqua se siente fresco y tranquilizador. Una paleta gris claro como esta hace que los pasos de onboarding sean fáciles de leer y amables. Utiliza el menta para los indicadores de progreso y confirmaciones, y apóyate en el teal oscuro para textos e iconos. Consejo: mantén los degradados sutiles para que la interfaz siga accesible y serena.

Ejemplo de imagen de glacier mint generada con media.io

13) Stoneberry

HEX: #f2f2f4 #d0d2d8 #a0a6b0 #7b5c7a #3a223a

Ambiente: intenso, editorial, elegante

Ideal para: lookbooks de moda y portafolios

Intenso y elegante como moras sobre piedra fría, los tonos púrpura aportan un toque lujoso. Usa los grises claros para fondos de página y márgenes de cuadrícula, luego deja que el ciruela maneje títulos y divisores. Es ideal para editoriales de moda, portafolios creativos e historias de marca que necesitan sofisticación sin tanto contraste. Consejo: mantén la fotografía ligeramente desaturada para que la paleta sea coherente.

Ejemplo de imagen de stoneberry generada con media.io

14) Chalkboard Latte

HEX: #f3f2f0 #d6d2cc #a9a39a #6b4f3a #1f1e1c

Ambiente: acogedor, vintage, terrenal

Ideal para: empaque de café y etiquetas artesanales

Acogedor y terrenal como polvo de tiza y un latte caliente, estos neutros resultan familiares y de alta calidad. Usa el gris cremoso como base de la etiqueta, y superpone marrón para notas de tueste y detalles de origen. Funciona bien con texturas en relieve, marcas de sello y ilustraciones minimalistas. Consejo: añade el casi negro solo en barcodes y tipografía pequeña para mantener el diseño suave.

Ejemplo de imagen de chalkboard latte generada con media.io

15) Lunar Navy

HEX: #f5f6f8 #d8dbe1 #b0b6c0 #1f3c88 #0a1026

Ambiente: enfocado, confiable, de alto contraste

Ideal para: apps fintech y tableros de seguridad

Enfocado y confiable como la luz de luna sobre aguas profundas, el azul marino aporta seriedad a los neutros suaves. Esta combinación de gris claro es ideal para fintech porque equilibra superficies calmadas con contraste claro. Usa azul marino para navegación y totales clave, y reserva el gris más claro para tarjetas y formularios. Consejo: usa el casi negro solo para errores y alertas críticas para evitar fatiga visual.

Ejemplo de imagen de lunar navy generada con media.io

16) Rainy Meadow

HEX: #f4f5f7 #d2d6dd #a5aab4 #6f8f72 #2e4a3a

Ambiente: natural, relajante, terroso

Ideal para: ilustraciones botánicas y papelería de primavera

Natural y relajante como pasto tras la lluvia, los verdes se sienten suaves y realistas contra los grises fríos. Utiliza el gris pálido como lavado de papel y el verde pradera para hojas y tallos. Es ideal para marcas ecológicas, notas de jardín e impresos estacionales que buscan sobriedad. Consejo: mantén los contornos suaves y visibles las texturas acuareladas para un acabado más orgánico.

Ejemplo de imagen de rainy meadow generada con media.io

17) Soft Charcoal Pop

HEX: #f6f6f7 #d9dadd #b0b2b8 #ff4d6d #2b2d31

Ambiente: audaz, divertido, nítido

Ideal para: promos para redes sociales y plantillas de creadores

Audaz y divertido como tinta neón sobre papel liso, el rosa resalta entre los grises suaves al instante. Usa carbón para encabezados y estructura de UI, y deja el acento brillante para destacar un mensaje a la vez. Esta combinación es perfecta para portadas de reels, mosaicos promocionales y kits para creadores que necesitan legibilidad rápida. Consejo: limita el rosa al 10-15% del diseño para no opacar la tipografía.

Ejemplo de imagen de soft charcoal pop generada con media.io

18) Museum Warmth

HEX: #f4f3f1 #d7d5d0 #b2b0aa #9c7a4f #2a2a2a

Ambiente: refinado, cálido, atemporal

Ideal para: interiores de galerías y sitios de decoración premium

Refinado y atemporal como una sala silenciosa de museo, el dorado-marrón cálido aporta un resplandor curado a los grises. Usa los tonos pálidos en paredes y fondos, y destaca el acento bronce en marcos, detalles o botones. Es ideal para marcas de decoración premium, páginas editoriales y rejillas de producto minimalistas. Consejo: elige iluminación cálida en la fotografía para destacar el acento y evitar que se vea opaco.

Ejemplo de imagen de museum warmth generada con media.io

19) Frosted Rose Gold

HEX: #f6f6f8 #dcdde2 #b6b8c0 #d7a1a7 #7a3e47

Ambiente: lujoso, suave, pulido

Ideal para: anuncios de joyas y lanzamientos premium

Lujoso y suave como metal esmerilado bajo luces de estudio, los tonos rosa se sienten premium sin ser estridentes. Para combinaciones de gris claro que transmitan exclusividad, mantén los fondos fríos y deja que el oro rosa aparezca en acentos y pequeños detalles. Funciona bien para campañas de joyería, lanzamientos de belleza y banners minimalistas. Consejo: agrega grano sutil o brillo al gris más claro para que parezca satén y no blanco plano.

Ejemplo de imagen de frosted rose gold generada con media.io

20) Paperclip Teal

HEX: #f7f7f9 #dfe1e6 #b6bcc6 #2f9aa0 #1c2a2e

Ambiente: ordenado, inteligente, contemporáneo

Ideal para: branding de papelería y herramientas de productividad

Ordenado y contemporáneo como un escritorio bien organizado, el teal es nítido sobre los grises tipo papel. Usa el tono más claro para fondos y el teal para sellos, acentos o elementos de navegación. Es ideal para marcas de papelería, apps de notas y material visual de productividad que exija estructura y limpieza. Consejo: combínalo con iconos lineales y espaciado uniforme para reforzar el orden.

Ejemplo de imagen de paperclip teal generada con media.io

¿Qué colores combinan bien con el gris claro?

El gris claro combina de manera natural con neutros profundos como carbón, casi negro y azul marino cuando necesitas un contraste fuerte para tipografía, navegación o estados UI. Estos anclajes oscuros ayudan a que los fondos pálidos no se vean deslucidos.

Para un look más cálido y acogedor, mezcla gris claro con beige, avena, tostado, terracota o tonos oro rosa. Estos acentos aportan personalidad mientras mantienen la paleta general discreta y minimalista.

Si buscas un toque moderno y fresco, elige un "color señal" como teal, menta, amarillo cítrico o rosa intenso y úsalo con mesura. El gris claro hace que los acentos brillantes se vean más limpios e intencionados.

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

En UI, usa gris claro como color principal de superficie para fondos, tarjetas y estados deshabilitados, y crea jerarquía con grises apenas más oscuros para divisores y contenedores. Reserva tu tono más oscuro para el texto y asegura legibilidad constante.

En branding, trata el gris claro como un escenario premium: eleva la fotografía de producto, mantiene la tipografía minimalista y hace que los acentos metálicos o pastel pequeños se vean más costosos. Un color de acento suele ser suficiente para un sistema coherente.

En interiores, equilibra el gris claro con materiales naturales (madera, lino, piedra) y un elemento de alto contraste como herrajes en negro mate. Así el espacio permanece moderno sin volverse frío.

Crea visuales de paletas gris claro con IA

Si quieres previsualizar una paleta gris claro en contexto, genera maquetas rápidas para interiores, carteles, empaque o pantallas UI. Ver la paleta aplicada te ayuda a confirmar contraste, ambiente y sensación material antes de decidirte.

Comienza con un prompt de escena sencilla, añade tus palabras clave de estilo (minimal, editorial, escandinavo, premium) y elige una relación de aspecto acorde a tu uso. Mantén la paleta consistente repitiendo "base gris claro" y nombra tu color acento.

Siguiente: Paleta de colores verde musgo