Free tools Windows power users keep installed
One-click scans. No signup required.
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
Estas 30 paletas de colores para páginas web son puntos de partida listos para probar: cada una combina fondo, superficie, texto, color primario y acento con sus códigos HEX. Elige según la personalidad de tu marca, conviértela en tokens de diseño y comprueba después cada combinación real de texto y fondo. Una paleta atractiva no es automáticamente accesible ni garantiza por sí sola el cumplimiento de WCAG.
Cómo leer y usar estas paletas
En cada propuesta encontrarás cinco roles editoriales:
- Fondo: color principal de la página.
- Superficie: tarjetas, bloques, formularios o zonas elevadas.
- Texto: tono recomendado para el contenido y la navegación.
- Primario: enlaces, botones y acciones principales.
- Acento: detalles de marca, badges, CTA secundarios o elementos que deban llamar la atención.
Son combinaciones editoriales originales para inspiración, no paletas oficiales de marcas ni resultados de una prueba automática de conformidad. Los HEX están pensados para diseño digital; no equivalen directamente a un color de impresión.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
- It can be a gift option
- Easy to read text
- This product will be an excellent pick for you
30 paletas de colores para páginas web
1. Café editorial
#F7F1E8Superficie
#E8D8C3Texto secundario
#A67C52Primario
#5C4033Texto
#25201D
Adecuada para blogs, editoriales, fotografía y marcas artesanales. Usa el marrón más oscuro para el texto y reserva el terracota para acentos moderados.
2. Azul confianza
#F5F9FCSuperficie
#DCEAF7Texto secundario
#6FA3D2Primario
#2563A6Texto
#12304A
Una base sobria para consultoría, educación, servicios profesionales y tecnología. El azul intenso funciona mejor en enlaces y acciones principales.
3. Verde botánico
#F4F7F0Superficie
#DDE8D2Texto secundario
#9BBF7APrimario
#4F7D4ATexto
#243B2A
Funciona en proyectos de bienestar, jardinería, alimentación natural y sostenibilidad.
4. Atardecer coral
#FFF7F2Superficie
#F9D8C8Texto secundario
#F28C73Primario
#C9574DTexto
#3D2928
Una combinación cálida para portafolios creativos, eventos, moda y proyectos dirigidos a un público joven.
5. Lavanda digital
#FAF8FFSuperficie
#E9E0FATexto secundario
#B59AE0Primario
#7452A8Texto
#30253D
Aporta una sensación tecnológica y amable a productos digitales, aplicaciones, cursos y servicios creativos.
6. Mar y arena
#F7F3EASuperficie
#E7D5B5Texto secundario
#8CC7C4Primario
#2F7F83Texto
#193B43
Una opción relajada para viajes, hoteles, gastronomía costera y marcas relacionadas con el océano.
7. Minimalismo carbón
#FFFFFFSuperficie
#F1F1EFTexto secundario
#B8B8B2Primario
#3E4548Texto
#17191A
Versátil para estudios de diseño, portfolios y arquitectura, especialmente cuando las imágenes deben dominar.
8. Amarillo optimista
#FFFBEASuperficie
#F9E79FTexto secundario
#F4C542Primario
#D9822BTexto
#352B20
El amarillo funciona mejor como acento o fondo de bloques breves. Para texto corrido, apóyate en el marrón oscuro.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteRank #2
- Used Book in Good Condition
9. Rosa editorial
#FFF8FASuperficie
#F5D6DFTexto secundario
#E99AAFPrimario
#A94D70Texto
#422433
Adecuada para belleza, lifestyle, bodas, moda y publicaciones personales.
10. Bosque nocturno
#EFF5F0Superficie
#C8DCCBTexto secundario
#71977APrimario
#315C45Texto
#142B22
Una paleta madura para ecología, finanzas sostenibles, productos premium y organizaciones ambientales.
11. Cobalto y lima
#F6F8FFSuperficie
#DCE4FFPrimario
#4263D9Acento
#B8D334Texto
#17213E
El contraste entre azul y lima crea jerarquía en SaaS, startups y páginas de lanzamiento. El lima debe ocupar áreas pequeñas.
12. Terracota mediterránea
#FFF7EDSuperficie
#F2D0A7Texto secundario
#D98555Primario
#8C4936Texto
#38251F
Evoca cerámica, arquitectura, cocina y viajes sin depender de colores excesivamente saturados.
13. Hielo ártico
#F8FCFFSuperficie
#DDF2FATexto secundario
#8DD3E5Primario
#3B8EA5Texto
#173844
Puede utilizarse en salud digital, climatología, software y servicios que buscan claridad y ligereza.
14. Uva y crema
#FFF9F1Superficie
#EBDCF0Texto secundario
#A878B4Primario
#6A3D78Texto
#2C1D32
Una propuesta elegante para cultura, música, belleza y marcas con una personalidad expresiva.
15. Naranja productivo
#FFF9F4Superficie
#FFE1C7Texto secundario
#FF9B54Primario
#D95D39Texto
#3C2520
El naranja llama la atención en CTA y botones, mientras los neutros mantienen la legibilidad.
16. Azul petróleo
#F1F7F6Superficie
#D0E5E1Texto secundario
#6AA69CPrimario
#176B68Texto
#123536
Adecuada para consultoría, interiorismo, negocios B2B y marcas de apariencia confiable.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsRank #3
17. Pastel fresco
#FFFDF8Superficie rosa
#FADDE1Superficie verde
#CDECCFSuperficie azul
#B8D9F2Texto y acciones
#3E4A59
Usa los pasteles en superficies y reserva el gris azulado para texto, navegación y elementos importantes.
18. Rojo energía
#FFF7F5Superficie
#F7D4CCTexto secundario
#ED8B7BPrimario
#B8383BTexto
#351D24
Aporta fuerza a restaurantes, deporte, entretenimiento y campañas promocionales. No uses el rojo como único indicador de error.
19. Oliva sofisticado
#F8F6EESuperficie
#E2E0C9Texto secundario
#A5A477Primario
#686B43Texto
#292B22
Una opción natural y adulta para alimentación, decoración, moda y marcas premium discretas.
20. Cielo claro
#F5FAFFSuperficie
#D7EAFBTexto secundario
#91C5F2Primario
#4E8BC7Texto
#20354D
Suave como punto de partida para educación, comunidades y productos infantiles.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →21. Negro y mandarina
#FFFDF8Superficie
#EDE9E1Texto
#242424Primario
#F07838Acento
#8C3B22
Una combinación de alto carácter para portfolios, agencias, eventos y páginas con estética editorial.
22. Turquesa tropical
#F2FFFCSuperficie
#C6F3E8Texto secundario
#55C7B2Primario
#168A83Texto
#153A3C
Ideal para viajes, salud, actividades al aire libre y marcas que necesitan una sensación vital.
23. Gris lavanda
#F8F8FBSuperficie
#E5E4ECTexto secundario
#B6B3C9Primario
#67627DTexto
#292735
Una alternativa sobria al gris neutro para servicios profesionales y productos digitales.
24. Mostaza y tinta
#FFFBEFSuperficie
#F5E6AETexto secundario
#D2A72EPrimario
#66501BTexto
#202326
La mostaza aporta un acento distintivo; la tinta proporciona el peso visual necesario para texto y navegación.
25. Rosa y granate
#FFF8F8Superficie
#F0D1D1Texto secundario
#D98A8APrimario
#8F3D4ATexto
#391F2A
Intensa pero refinada para gastronomía, cultura, moda y proyectos personales.
26. Verde menta
#F4FFFASuperficie
#D3F2E1Texto secundario
#8DD7B5Primario
#398A68Texto
#1D4036
Adecuada para wellness, aplicaciones de hábitos, productos sostenibles y comercio de productos naturales.
27. Azul tinta y melocotón
#F8FAFFSuperficie
#E0E6F5Texto
#172A46Acento
#F4A77DPrimario secundario
#A64F43
El azul profundo sostiene la interfaz y el melocotón aporta calidez en CTA, ilustraciones o llamadas destacadas.
28. Crema y ciruela
#FFF9EDSuperficie
#F0E2C5Texto secundario
#C29AAEPrimario
#70445DTexto
#291E2A
Funciona para hoteles boutique, productos artesanales, publicaciones y marcas basadas en la experiencia.
29. Neón controlado
#F7FAF8Superficie
#DCE7E1Texto
#1C2421Acento
#B7F000Primario
#426B5A
El verde ácido debe ocupar una superficie pequeña. Es especialmente útil en detalles de tecnología, gaming o música.
30. Monocromo azul
#F5F8FCSuperficie
#D8E2EFTexto secundario
#9DB5CEPrimario
#547797Texto
#1D354B
Una escala monocromática fácil de convertir en un sistema de superficies, bordes, botones y estados.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Cómo elegir una paleta para tu web
- Empieza por la marca y el contenido. Una web de fotografía puede necesitar neutros que no compitan con las imágenes; una tienda infantil tolerará más color. No atribuyas significados psicológicos universales a un tono: el contexto, la cultura y la combinación modifican su lectura.
- Limita las funciones. Define un fondo, una superficie, un color de texto y uno o dos colores de acción. No conviertas cada componente en un HEX independiente.
- Piensa en roles semánticos. En lugar de nombrar variables como
--azul-oscuro, usa nombres como--color-bg,--color-surface,--color-text,--color-primaryy--color-accent. Este enfoque facilita cambiar de tema y mantener una jerarquía coherente, similar al sistema de roles y tonalidades documentado por Material 3. - Prueba la paleta en contexto. El color de un texto sobre una tarjeta, un botón con texto, un enlace sobre el fondo y un placeholder no se evalúan necesariamente igual. Comprueba cada par real.
Contraste y accesibilidad: la paleta no basta
WCAG 2.2 establece, para el nivel AA, una relación mínima de 4,5:1 para texto normal y de 3:1 para texto grande. En el nivel AAA, los mínimos suben a 7:1 para texto normal y 4,5:1 para texto grande. El tamaño, el peso tipográfico, el fondo real y el uso del elemento importan; por eso no es correcto afirmar que una de estas paletas “cumple WCAG” en abstracto.
El contraste debe verificarse entre pares concretos de primer plano y fondo. Una tarjeta con cinco muestras puede parecer equilibrada y, aun así, tener un enlace o un texto secundario demasiado claro en la interfaz final. Revisa también los estados hover, focus, disabled, error y éxito, además de los cambios que ocurren en modo oscuro.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Best Value
- Used Book in Good Condition
No transmitas información únicamente mediante color. Un error debe incluir texto o un mensaje identificable; un estado de éxito puede añadir un icono y una etiqueta; una selección puede combinar color con borde, forma o patrón. Esto ayuda tanto a personas con diferentes formas de percepción del color como a quienes consultan la web en condiciones de iluminación difíciles.
Convierte una paleta en variables CSS
Una vez escogida una combinación, puedes convertirla en un pequeño sistema de diseño:
:root {
--color-bg: #F5F9FC;
--color-surface: #DCEAF7;
--color-text: #12304A;
--color-primary: #2563A6;
--color-accent: #6FA3D2;
}
body {
background: var(--color-bg);
color: var(--color-text);
}
.card {
background: var(--color-surface);
}
.button-primary {
background: var(--color-primary);
color: #fff;
}Los nombres semánticos permiten sustituir la paleta completa sin buscar y reemplazar colores por todo el CSS. Para una interfaz compleja, crea además roles como --color-on-primary, --color-border, --color-error y --color-success. Los roles mantienen la relación entre fondo y contenido aunque cambies de tema.
Herramientas y recursos complementarios
Una herramienta como Adobe Color puede ayudarte a generar combinaciones desde una rueda cromática, extraer colores de una imagen o explorar paletas creadas por otros usuarios. Úsala como apoyo creativo, no como sustituto de una comprobación de contraste: generar una combinación no significa que sea accesible automáticamente.
Recommended Free Tools
Si quieres comprender mejor las relaciones cromáticas antes de elegir, Interacting with Color, publicado por Yale University Press, es una guía práctica basada en ejercicios de Josef Albers. Es un recurso opcional para aprender teoría del color y aplicar las paletas con más criterio; comprueba precio y disponibilidad antes de comprar.
Para proyectos que pasan de la pantalla a la impresión, las guías Pantone CMYK y Color Bridge pueden ser útiles para selección y especificación profesional. No son necesarias para escoger HEX en una web y su precio suele tener más sentido para diseñadores que trabajan también con impresión, packaging o branding. La apariencia impresa cambia según el material, el acabado y el perfil de color, por lo que una guía tampoco sustituye una prueba física.
Lista de comprobación antes de publicar
- ¿La paleta expresa el tono de la marca sin depender de una interpretación psicológica universal?
- ¿Has asignado roles semánticos en lugar de usar colores arbitrarios por componente?
- ¿Has medido cada combinación de texto y fondo en su tamaño y peso reales?
- ¿Los enlaces, botones, formularios y textos secundarios siguen siendo distinguibles?
- ¿Los estados de error, éxito, selección y foco tienen una señal adicional al color?
- ¿Has revisado hover, focus, disabled, modo oscuro y contenido dinámico?
- ¿Has probado la interfaz con herramientas o personas que simulen distintas formas de percepción del color?
- Si habrá impresión, ¿has separado los valores HEX de las especificaciones CMYK o Pantone?
Frequently Asked Questions
¿Cuál es la mejor paleta de colores para una página web?
No existe una única paleta mejor. La elección depende de la marca, el contenido, las imágenes y la jerarquía que necesites. Escoge una combinación de esta lista como punto de partida y valida después sus pares de texto y fondo.
¿Estas paletas cumplen WCAG?
No automáticamente. WCAG evalúa combinaciones concretas de primer plano y fondo, junto con el tamaño y el uso del texto. Debes comprobar cada estado y componente de la interfaz.
Recommended Free Tools
¿Cuántos colores debe tener una web?
Como punto de partida, define un fondo, una superficie, un color de texto y uno o dos colores de acción. Después añade roles específicos para bordes y estados si el producto lo necesita.
¿HEX sirve también para imprimir?
HEX describe colores para medios digitales. Para impresión debes trabajar con perfiles y especificaciones adecuadas, como CMYK o guías Pantone, y considerar que el papel y el acabado cambian la apariencia.
The Bottom Line
Elige la paleta que mejor encaje con tu contenido, asígnala mediante roles semánticos y valida todos los pares de color en la interfaz real. La inspiración inicia el diseño; la comprobación de contraste y el uso de señales que no dependan solo del color lo hacen más sólido.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →
