diegodiazpalma.com — Paleta de Colores
Propuesta de sistema cromático para el Sitio 1 · Febrero 2026
Tus colores originales vs. ajustes sugeridos
Tus colores originales
4 colores base
#3077DB · #F6A918 · #141414 · #FFFFFF
Base sólida. Buen contraste complementario azul/naranja.
Sistema expandido propuesto
Mismos colores base + variantes funcionales
Tus mismos 4 colores + 3 variantes de apoyo.
No cambia nada, solo añade profundidad para que el diseñador tenga guía.
Azul — Color principal
Oscuro
Blue Dark
#1B4F8A
Headers, navegación activa, fondos de sección destacada
Principal ★
Blue Primary
#3077DB
Tu color original. Links, botones secundarios, iconos, líneas de acento
Claro
Blue Light
#5A9AE6
Hover states, bordes suaves, elementos secundarios
Fondo
Blue Wash
#E8F0FB
Fondos sutiles, cards, secciones alternas para romper monotonía
Naranja/Ámbar — Color secundario / Acento
Principal ★
Amber Primary
#F6A918
Tu color original. CTAs principales, botón Fracta Paradox en nav, highlights, badges
Oscuro
Amber Dark
#D4900A
Hover en botones naranja, bordes activos
Fondo
Amber Wash
#FFF3D6
Fondos de alertas, tooltips, o badges informativos
Neutros — Estructura y texto
Base ★
Near Black
#141414
Tu color original. Fondo sección FP, textos principales
Texto sec.
Dark Gray
#333333
Textos secundarios, subtítulos, párrafos largos
Soporte
Mid Gray
#777777
Captions, meta info, placeholders
Fondo ★
Off White
#F5F5F7
Fondo general del sitio (más suave que blanco puro)
Puro
White
#FFFFFF
Tu color original. Cards, overlays, texto sobre fondos oscuros
¿Por qué #F5F5F7 en vez de #FFFFFF como fondo general?
El blanco puro (#FFFFFF) en pantalla genera un brillo que cansa la vista en sesiones largas y hace que las imágenes del portfolio "floten" sin contexto. El off-white (#F5F5F7) es casi imperceptiblemente más cálido, reduce la fatiga visual y permite que las cards blancas (#FFFFFF) tengan separación natural del fondo sin necesitar bordes ni sombras agresivas. Es un truco que usan Apple, Behance, y la mayoría de portfolios profesionales.
El blanco puro (#FFFFFF) en pantalla genera un brillo que cansa la vista en sesiones largas y hace que las imágenes del portfolio "floten" sin contexto. El off-white (#F5F5F7) es casi imperceptiblemente más cálido, reduce la fatiga visual y permite que las cards blancas (#FFFFFF) tengan separación natural del fondo sin necesitar bordes ni sombras agresivas. Es un truco que usan Apple, Behance, y la mayoría de portfolios profesionales.
Verificación de contraste (accesibilidad)
Texto oscuro sobre fondo claro AAA ✓
#141414 sobre #F5F5F7 — Ratio 16.5:1
Texto blanco sobre fondo oscuro AAA ✓
#FFFFFF sobre #141414 — Ratio 18.1:1
Link azul sobre fondo claro AA ✓
#3077DB sobre #F5F5F7 — Ratio 4.6:1
Texto blanco sobre azul AA ✓
#FFFFFF sobre #3077DB — Ratio 4.5:1
Texto oscuro sobre naranja AAA ✓
#141414 sobre #F6A918 — Ratio 8.3:1
Texto blanco sobre naranja Cuidado
#FFFFFF sobre #F6A918 — Ratio 2.2:1 · Usar texto oscuro en botones ámbar
Dato clave para el diseñador: Los botones con fondo ámbar/naranja (#F6A918) deben llevar texto oscuro (#141414), NO blanco. El blanco sobre naranja no pasa los estándares de accesibilidad. Esto aplica al botón "Fracta Paradox" en la navegación y a cualquier CTA con fondo naranja.
Vista previa — Aplicación de colores por sección
DIEGO DÍAZ PALMA
Selected Works
A curated selection of my work across children's books, comics, and personal projects.
All
Illustrations
Comics
Inks
Pencils
Photo /
Avatar
Avatar
About Me
I've been drawing for as long as I can remember. My grandfather was the one who first put a pencil in my hand...
30+ Years
Self-Taught
Major Publishers
My Graphic Novel
FRACTA PARADOX
After 30 years illustrating other people's stories, I decided to tell my own.
Enter the World of Fracta Paradox →Let's Talk
Got a project in mind? Drop me a line. I read everything.
Your name
Your email
Message
Send
© 2026 Diego Díaz Palma
Made with ink, pixels, and stubbornness in Mendoza, Argentina.
Sobre la vista previa: Este mock es solo para visualizar la aplicación de colores por sección. No representa el diseño final (eso lo define el diseñador). Lo importante es cómo se distribuyen los colores: fondo off-white general → sección FP en negro → naranja como acento en CTAs y botón FP → azul en links, filtros activos y botón de envío.
Resumen de uso por sección
| Sección | Fondo | Texto | Acento |
|---|---|---|---|
| Navegación | #FFFFFF | #141414 | Botón FP |
| Hero | Gradiente azul (o imagen + overlay) | #FFFFFF | CTA botón |
| Portfolio | #F5F5F7 | #141414 | Filtro activo |
| About | #FFFFFF | #333333 | Badges azul claro |
| Fracta Paradox | #141414 | #FFFFFF | Label + CTA |
| Contacto | #F5F5F7 | #141414 | Botón enviar |
| Footer | #141414 | #777777 | — |