La paleta de color marca la mitad del look & feel de una web. En 2026 la tendencia clara es la naturaleza destilada: tonos terrosos, apagados y orgánicos que transmiten calma, sostenibilidad y cercanÃa.
Aquà tienes 10 paletas de colores naturales para páginas web, listas para usar. Cada una incluye códigos HEX y RGB, el uso de cada color y su contraste real medido con la fórmula de WCAG. También un enlace para abrirla en Coolors. Al final verás cómo aplicarlas en CSS y Figma.
Qué es la tendencia naturaleza destilada
Esta corriente rechaza los azules saturados y los neones que dominaron entre 2018 y 2023. En su lugar busca color con sentido orgánico: terracota, arena, verde musgo, gris cálido, beige y marrones tostados. Son paletas que parecen sacadas de un paisaje y que comunican autenticidad, sostenibilidad y calidez.
Encajan de maravilla en wellness, sostenibilidad, food, lifestyle y educación. Van de la mano del diseño web minimalista y del color del año 2026 de Pantone, Cloud Dancer. Es un blanco cálido que funciona como fondo perfecto para estos tonos.
Por qué funcionan los colores naturales
Los tonos apagados cansan menos la vista que los saturados, asà que invitan a leer y a quedarse. Además, asociamos los marrones y verdes a materiales reales (madera, barro, plantas), y eso transmite honestidad. Si quieres profundizar en lo que comunica cada color, tienes mi guÃa sobre el uso de los colores en diseño web.
Paletas 1-3: tonos terracota y arena
Paleta 1 · Terracota cálida
| HEX | RGB | Uso |
|---|---|---|
#C9714E | 201, 113, 78 | Acento (terracota) |
#E8C4A8 | 232, 196, 168 | Secundario (arena) |
#5C3A2E | 92, 58, 46 | Profundo (chocolate) |
#F5EDE4 | 245, 237, 228 | Fondo (off-white) |
#2A2520 | 42, 37, 32 | Texto (casi negro) |
Contraste: texto #2A2520 sobre fondo #F5EDE4 = 13,0:1 (AAA). En botones de acento, la mejor opción es texto #2A2520 sobre #C9714E = 4,3:1 (AA solo texto grande).
Encaja en: restaurantes, cerámica y artesanÃa, marcas de interiorismo. Abrir en Coolors
Paleta 2 · Atardecer mediterráneo
| HEX | RGB | Uso |
|---|---|---|
#D89D7E | 216, 157, 126 | Acento |
#F2CFB4 | 242, 207, 180 | Secundario |
#8B5A3C | 139, 90, 60 | Profundo |
#FAF3E8 | 250, 243, 232 | Fondo |
#1F1B16 | 31, 27, 22 | Texto |
Contraste: texto #1F1B16 sobre fondo #FAF3E8 = 15,5:1 (AAA). En botones de acento, la mejor opción es texto #1F1B16 sobre #D89D7E = 7,3:1 (AAA).
Encaja en: hoteles y turismo de costa, moda de verano, blogs de viajes. Abrir en Coolors
Paleta 3 · Adobe sereno
| HEX | RGB | Uso |
|---|---|---|
#B86A4A | 184, 106, 74 | Acento |
#DDB99B | 221, 185, 155 | Secundario |
#6B4232 | 107, 66, 50 | Profundo |
#F0E7D9 | 240, 231, 217 | Fondo |
#261C12 | 38, 28, 18 | Texto |
Contraste: texto #261C12 sobre fondo #F0E7D9 = 13,6:1 (AAA). En botones de acento, la mejor opción es texto #261C12 sobre #B86A4A = 4,1:1 (AA solo texto grande).
Encaja en: arquitectura, inmobiliarias rurales, marcas de decoración. Abrir en Coolors
Paletas 4-6: verdes y musgos
Paleta 4 · Bosque tranquilo
| HEX | RGB | Uso |
|---|---|---|
#6B7F5E | 107, 127, 94 | Acento |
#C5D2B4 | 197, 210, 180 | Secundario |
#2F3A28 | 47, 58, 40 | Profundo |
#EFEDE3 | 239, 237, 227 | Fondo |
#1A1A14 | 26, 26, 20 | Texto |
Contraste: texto #1A1A14 sobre fondo #EFEDE3 = 14,8:1 (AAA). En botones de acento, la mejor opción es texto blanco sobre #6B7F5E = 4,3:1 (AA solo texto grande).
Encaja en: sostenibilidad, ONG ambientales, turismo rural. Abrir en Coolors
Paleta 5 · Salvia moderna
| HEX | RGB | Uso |
|---|---|---|
#A8B89E | 168, 184, 158 | Acento |
#DAE3CE | 218, 227, 206 | Secundario |
#4A5C42 | 74, 92, 66 | Profundo |
#F4F2EA | 244, 242, 234 | Fondo |
#221F18 | 34, 31, 24 | Texto |
Contraste: texto #221F18 sobre fondo #F4F2EA = 14,6:1 (AAA). En botones de acento, la mejor opción es texto #221F18 sobre #A8B89E = 7,8:1 (AAA).
Encaja en: wellness, cosmética natural, herbolarios. Abrir en Coolors
Paleta 6 · Eucalipto contemporáneo
| HEX | RGB | Uso |
|---|---|---|
#7E938A | 126, 147, 138 | Acento |
#C2D4CC | 194, 212, 204 | Secundario |
#3D4F46 | 61, 79, 70 | Profundo |
#EDEBE3 | 237, 235, 227 | Fondo |
#1F1F1A | 31, 31, 26 | Texto |
Contraste: texto #1F1F1A sobre fondo #EDEBE3 = 13,8:1 (AAA). En botones de acento, la mejor opción es texto #1F1F1A sobre #7E938A = 5,0:1 (AA).
Encaja en: clÃnicas, fisioterapia, psicologÃa, spas. Abrir en Coolors
Paletas 7-10: combinaciones cálidas mixtas
Paleta 7 · Estudio cerámica
| HEX | RGB | Uso |
|---|---|---|
#B85C57 | 184, 92, 87 | Acento |
#E8B89A | 232, 184, 154 | Secundario |
#4A4540 | 74, 69, 64 | Texto |
#F3EDE3 | 243, 237, 227 | Fondo |
Contraste: texto #4A4540 sobre fondo #F3EDE3 = 8,1:1 (AAA). En botones de acento, la mejor opción es texto blanco sobre #B85C57 = 4,4:1 (AA solo texto grande).
Encaja en: estudios creativos, talleres, portfolios. Abrir en Coolors
Paleta 8 · Café editorial
| HEX | RGB | Uso |
|---|---|---|
#A47B5C | 164, 123, 92 | Acento |
#D9C2A8 | 217, 194, 168 | Secundario |
#2E2823 | 46, 40, 35 | Texto |
#F1EBDF | 241, 235, 223 | Fondo |
Contraste: texto #2E2823 sobre fondo #F1EBDF = 12,2:1 (AAA). En botones de acento, la mejor opción es texto #2E2823 sobre #A47B5C = 3,8:1 (AA solo texto grande).
Encaja en: cafeterÃas, editoriales, blogs de lifestyle. Abrir en Coolors
Paleta 9 · Otoño nórdico
| HEX | RGB | Uso |
|---|---|---|
#C68B5C | 198, 139, 92 | Acento |
#E1C9B0 | 225, 201, 176 | Secundario |
#4F3A2A | 79, 58, 42 | Texto |
#F2EBE0 | 242, 235, 224 | Fondo |
Contraste: texto #4F3A2A sobre fondo #F2EBE0 = 8,9:1 (AAA). En botones de acento, la mejor opción es texto #4F3A2A sobre #C68B5C = 3,6:1 (AA solo texto grande).
Encaja en: marcas de ropa, decoración nórdica, tiendas de regalo. Abrir en Coolors
Paleta 10 · Spa zen
| HEX | RGB | Uso |
|---|---|---|
#BFA98A | 191, 169, 138 | Acento |
#DCD4C2 | 220, 212, 194 | Secundario |
#5A4F3F | 90, 79, 63 | Texto |
#F5F0E5 | 245, 240, 229 | Fondo |
Contraste: texto #5A4F3F sobre fondo #F5F0E5 = 7,0:1 (AAA). En botones de acento, la mejor opción es texto #5A4F3F sobre #BFA98A = 3,5:1 (AA solo texto grande).
Encaja en: spas, centros de yoga, estética. Abrir en Coolors
Tip: Para generar variantes o extender cualquiera de estas paletas, Coolors parte de un color base y propone armonÃas. Y si buscas plantillas o mockups con esta estética cálida, tienes muchos en Envato Elements.
Qué paleta elegir según tu proyecto
Si no sabes por cuál empezar, parte del sector y del tono que quieres transmitir:
| Si tu proyecto es… | Prueba con | Por qué |
|---|---|---|
| Restauración y food | Paleta 1 o 8 | Los marrones tostados recuerdan al horno y al café |
| Wellness, yoga o spa | Paleta 5 o 10 | Verdes suaves y beiges que bajan el ritmo |
| Sostenibilidad u ONG | Paleta 4 | Verde bosque con contraste alto para textos largos |
| Salud y terapias | Paleta 6 | El eucalipto es sereno sin resultar frÃo |
| Turismo y hoteles | Paleta 2 | Tonos de atardecer con fondo muy luminoso |
| Portfolio o estudio creativo | Paleta 7 | Un acento rojizo con personalidad sobre base neutra |
| Decoración y moda | Paleta 3 o 9 | Cálidas y con un punto artesanal |
¿Tu proyecto pide lo contrario, energÃa y color? Entonces mira mis paletas alegres de dopamine design o la estética del cyberbrutalism, que son su opuesto.
Cómo combinarlas con tipografÃa
Estas paletas piden tipografÃas que respeten su calma. Lo que mejor funciona:
- Serif editorial en titulares: PP Editorial New, Tiempos o una Caslon moderna.
- Sans neutra en cuerpo: Inter, GT America o Söhne.
- Toque cálido: una serif amable como Recoleta para titulares sobre cuerpo en sans.
Evita las display agresivas: rompen la atmósfera. Tienes opciones (con alternativas gratis de Google Fonts) en tipografÃas modernas para diseñadores.
Aplicación práctica en CSS y Figma
En Figma, define cada paleta como un set de variables (color/primary, color/secondary, etc.). Si creas un modo claro y otro oscuro dentro de la misma colección, cambias toda la web de tema con un clic.
En CSS, declara los colores en :root. Este ejemplo usa la paleta 1 e incluye el equivalente en oklch(), un espacio de color más uniforme para generar variantes:
:root {
--primary: #C9714E; /* terracota */
--secondary: #E8C4A8; /* arena */
--deep: #5C3A2E; /* chocolate */
--bg: #F5EDE4; /* off-white */
--text: #2A2520; /* casi negro */
--primary-oklch: oklch(64% 0.122 42); /* mismo tono en oklch */
}
body { background: var(--bg); color: var(--text); }
/* Botón: texto oscuro sobre terracota (4,3:1, AA solo texto grande) */
.btn { background: var(--primary); color: var(--text); font-weight: 600; }
.btn:hover { background: color-mix(in oklch, var(--primary), black 12%); }
/* Modo oscuro sin negro puro */
@media (prefers-color-scheme: dark) {
:root { --bg: #2A2520; --text: #F5EDE4; }
}Para el modo oscuro, no inviertas a negro puro: usa los marrones oscuros de la propia paleta (la posición «casi negro»), que mantienen la calidez incluso en oscuro. Tienes más sobre esto en las guÃas de variables CSS y CSS moderno 2026 (con oklch y color-mix).
¿Quieres aplicarlas sin escribir el CSS desde cero?
Mi pack CSS gratis trae más de 40 estilos listos para copiar, botones incluidos. Cambia sus colores por los de tu paleta y tendrás la web con esta estética en minutos. Apúntate y te lo envÃo al correo.
Preguntas frecuentes
¿Funciona esta paleta para todos los sectores?
Encaja muy bien en wellness, food, sostenibilidad, lifestyle, educación y hospitality. Encaja peor en fintech, tecnologÃa agresiva o gaming, donde se esperan paletas más vibrantes o frÃas (ahà tira más el cyberbrutalism).
¿Cómo aseguro contraste accesible con tonos suaves?
Para el texto principal, usa el tono más oscuro de cada paleta sobre el fondo claro: en las diez llega al 7:1 o más (nivel AAA), muy por encima del 4,5:1 que pide WCAG AA. El problema está en los botones. El off-white sobre terracota (paleta 1) da 3,0:1, que solo vale para texto grande.
En los acentos más claros (paletas 2, 5, 9 y 10), el texto blanco ni siquiera llega a 3:1. Ahà el botón lleva texto oscuro. Cada paleta de arriba indica su mejor combinación medida.
¿Con qué colores combina el #E8C4A8?
Es el arena de la paleta 1. Combina con terracota #C9714E, chocolate #5C3A2E y off-white #F5EDE4. Si lo usas como fondo de una sección, el texto #2A2520 encima da 9,3:1, nivel AAA. Su equivalente RGB es 232, 196, 168.
¿Qué color es el #FAF3E8?
Un blanco roto cálido, el fondo de la paleta 2 (RGB 250, 243, 232). Funciona como sustituto del blanco puro en webs con tonos tierra. Con texto #1F1B16 encima alcanza 15,5:1.
¿Son compatibles con modo oscuro?
SÃ. Intercambia el rol del off-white y el casi negro, mantén los acentos y evita el negro puro. Las paletas naturaleza destilada quedan especialmente cálidas en oscuro si respetas su temperatura.
¿Puedo mezclar dos de estas paletas?
Con cuidado. Comparten familia (tonos terrosos apagados), asà que un acento de una y el fondo de otra suelen convivir bien. Lo que no conviene es usar dos acentos fuertes a la vez: elige uno como color de marca y deja el resto de apoyo.
Conclusión
Estas 10 paletas están pensadas para encajar con la tendencia visual dominante de 2026, y ahora sabes el contraste exacto de cada combinación. Cópialas, ajústalas a tu cliente y úsalas como punto de partida. Si prefieres crear las tuyas desde cero, prueba un generador de paletas de colores.
Y si prefieres que apliquemos una de estas paletas a la web de tu negocio, echa un vistazo a mis servicios de diseño web.
