--- title: "Cómo cambiar los colores de tu app GoodBarber" description: "En GoodBarber, los colores de tu tema cumplen cada uno un rol. En una de nuestras apps, cambiar un solo color repintó 95 ajustes, sin abrir una pantalla." canonical_url: "https://es.goodbarber.com/blog/como-cambiar-los-colores-de-mi-app-a1179/" lang: es date: 2026-10-22 last_updated: 2026-10-22 --- # ¿Cómo cambiar los colores de mi app? En una app GoodBarber, no tienes que colorear los elementos uno a uno. Cada color de tu tema cumple un rol (el texto, el acento, el fondo de las celdas) y todo lo que tiene ese rol toma su tono, en todas tus páginas. Cambia un color y toda la app cambia con él. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://es.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 22 oct 2026 · 7 min de lectura ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98459060-68663952.jpg?v=1792669088.8381069) Aquí tienes el rol de cada color, cómo cambiarlos para toda la app y cómo darle su propio color a un solo elemento. ## Los colores de toda la app en un solo panel En el back office de GoodBarber, el panel **Mi App › Estilo de la app › Colores** reúne los veinte ajustes de color de tu app. Arriba, el «Tema de colores». Debajo, el «Header», cuatro «Colores primarios», dos «Colores secundarios» y luego las zonas de la app, el «Fondo de la app», el menú, el «Separador de listas» y los botones. No eliges estos colores pantalla por pantalla. Cada uno cumple un rol, y los títulos, los bordes o las pastillas de fecha que tienen ese rol toman ese color en todas tus páginas. Lo ajustas una vez y se propaga por toda la app. Es nuestro principio «Set once, consistent everywhere», en el corazón de [Color](https://es.goodbarber.com/uxdesign/color/), uno de los fundamentos del Design System de GoodBarber. Elegir los tonos en sí es otra cuestión, tratada en [un artículo y cinco herramientas](https://es.goodbarber.com/blog/como-elegir-los-colores-adecuados-para-tu-aplicacion-movil-a814/). Aquí vemos cómo los lleva la app. ## Un rol para cada color ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98459060-68663954.jpg?v=1792669090.2701075) En el panel Colores, los cuatro «Colores primarios» y luego los dos «Colores secundarios» tienen cada uno un rol, el mismo en toda la app. Aquí los tienes en el orden del panel, como en la imagen. 1. **El texto principal**, los títulos y el texto de los artículos. 2. **El acento**, la información bajo el título, la dirección de un evento, el icono de una acción seleccionada. 3. **El texto secundario**, la información sobre el título (fecha, categoría), los autores, el enlace a la lista completa. 4. **El fondo de las superficies**, las celdas y las cabeceras de widget. 5. **Los bordes**, alrededor de las celdas. 6. **El fondo secundario**, el de un widget cuando le das uno. En una app GoodBarber, un color tiene, por tanto, una función, no un lugar. Si tu acento es azul, todo lo que lleva el acento se vuelve azul, de una pantalla a otra. Y cuando cambias de tono, el texto sigue siendo texto y el fondo sigue siendo fondo. Las zonas de la app, el «Header», el menú, los botones, tienen sus propios ajustes, en el mismo panel. Así, el amarillo de las pastillas de fecha, el 7 de la imagen, viene de «Otros botones». ## Ajusta tus colores en GoodBarber [Animation de 21,6 s dans le panneau Couleurs (back-office en anglais) : le thème « Ondas Locales », puis la carte « Eastside », App background passé en Lake Blue, Apply et sa confirmation, puis le panneau du widget Room change, fond de cellule en jaune](https://player.vimeo.com/video/1238304470?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Todo ocurre en el panel **Colores**, en tres gestos, del más amplio al más fino. 1. **Elige un tema.** El carrusel del «Tema de colores» propone decenas, entre ellos los [temas Classic](https://es.goodbarber.com/blog/nuevos-temas-classic-para-lanzar-tu-app-mas-rapido-a1120/) lanzados este verano. Un tema define de una vez los veinte ajustes del panel. La «Paleta mágica» también puede componer uno para ti, y el botón «Crear un tema de color» guarda el tuyo, que se suma al carrusel. En el vídeo, es el tema «Eastside» de la escuela de música. 2. **Cambia un color.** Haz clic en un color, introduce su código hexadecimal y luego «Escoger». La vista previa lo sigue al instante. 3. **Aplica.** El botón «Aplicar» repinta toda la app, tras una confirmación. Todos los elementos toman los colores del tema, en todas tus páginas. «Estilo de la app» reúne también los paneles **Fuentes**, **Botones** y **Campos de formulario**, que ajustan del mismo modo toda la app desde un solo lugar. Para un solo elemento, abre el panel de diseño de su sección o de su widget. Allí sus colores ya vienen rellenados con los del tema, y puedes cambiar uno de ellos solo para esa lista. Es el final del vídeo, donde la celda «Room change» pasa a amarillo. La extensión gratuita **Edición avanzada** y su botón { EDICIÓN } van más allá, con el color de cada elemento [escrito en hexadecimal](https://es.goodbarber.com/uxdesign/atom-color/), como para [la sombra](https://es.goodbarber.com/blog/como-ajustar-la-sombra-en-mi-app-a1160/) y [los bordes](https://es.goodbarber.com/blog/como-ajustar-los-bordes-en-mi-app-a1169/). El panel Colores, en cambio, sigue siendo el nivel de toda la app, y desde ahí «Aplicar» devuelve cada elemento al color de su rol. Así que ajusta primero tu tema, y tus detalles después. ## Antes, después: cambia un solo color, y todo lo que lo lleva cambia con él ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98459060-68663956.jpg?v=1792669091.7581084) Aquí tienes dos veces la misma pantalla, y entre las dos solo ha cambiado un color, el acento. A la izquierda, tiene el color del texto, y todo se lee al mismo nivel. A la derecha, pasa al azul de la marca, y con él la información bajo el título del aviso y la dirección de cada ensayo, con su icono. El ojo encuentra enseguida lo que le sirve. Ni los títulos, ni los fondos, ni las fuentes se han movido. Un solo ajuste llega lejos. En una de nuestras apps GoodBarber, cambiar el color del texto principal repintó 95 ajustes de golpe, en toda la app, sin abrir una sola pantalla. Es nuestro principio «No design burden», para que la coherencia nunca corra de tu cuenta. Para juzgar tu ajuste, mira la vista previa antes de aplicar, y luego recorre dos o tres páginas. Si el acento salta a la vista donde no debería, seguramente es el elemento que lo lleva el que hay que retocar, en su panel de diseño. ## Cuatro formas de manejar el color de acento ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98459060-68663957.jpg?v=1792669093.030109) Estas cuatro apps usan los mismos roles y, sin embargo, no se parecen. La diferencia está en los ajustes donde cada una pone su color. - **Eastside Music Workshop** pone su azul en el acento, que aquí colorea la dirección de un ensayo, y su amarillo en «Otros botones», que colorean las pastillas de fecha. - **Blandas Astronomy Club** pone su ámbar en los ajustes de su barra de pestañas, y aquí solo se enciende la pestaña actual. - **Unit 7** pone su verde fluorescente de fondo en la pestaña activa, un bloque de color liso con su nombre escrito encima. - **Tweed & Cheviot** pone su rojo en el acento, pero solo muestra la información bajo el título donde importa, aquí la cifra que hay que retener. Tú eliges dónde poner el tuyo. Pregúntate qué debe decir, lo que está activo, lo que es nuevo, lo que espera un gesto. ## Mi ajuste favorito: nunca blanco puro, nunca negro puro ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98459060-68663958.jpg?v=1792669094.6421096) Mi ajuste favorito no se nota. Para el fondo de las superficies, nunca pongo #FFFFFF, sino un blanco ligeramente teñido, #FFF8ED en Eastside, sobre un «Fondo de la app» un punto más oscuro, #EDE7DD. Las celdas se despegan sin sombra, y la pantalla gana textura, como el papel. Para el texto principal, tampoco #000000, sino un casi negro con un toque de color, #23252B aquí. El negro puro sobre blanco da el contraste máximo, 21:1, que me parece duro en una lectura larga. #23252B sobre #FFF8ED mantiene 14,5:1, el doble del nivel más exigente de las WCAG (7:1), y además con más suavidad. Tres valores, y toda la app sale ganando, los títulos, los textos, las celdas. Es lo que permite el rol, ajustar una vez, para todas partes. **Los colores en resumen** - En una app GoodBarber, los colores de toda la app se ajustan en un solo panel, veinte ajustes, entre ellos seis colores que cumplen cada uno un rol. - Un color tiene una función, no un lugar, el texto principal, el acento, el texto secundario, el fondo de las superficies, los bordes, el fondo secundario. - Todo se ajusta en el panel Colores, un tema, la Paleta mágica o un solo color, y luego «Aplicar», que repinta toda la app. - Un elemento se retoca en el panel de su sección o de su widget, o clave por clave con la extensión gratuita Edición avanzada. - Ajusta primero el tema, y los detalles después. - Dos ajustes de diseñadora, nunca blanco puro para las superficies, nunca negro puro para el texto. ## Te toca Abre **Mi App › Estilo de la app › Colores**, haz clic en el color de tu acento y prueba otro tono en la vista previa. No se aplica nada hasta que haces clic en «Aplicar». ¿Todavía no tienes app? [Crea la tuya](https://es.goodbarber.com/create/) con GoodBarber, el Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre el autor Marie-Pierre Jeffard UI Designer Soy UI Designer en GoodBarber. Design system de las apps, componentes, layouts, sitio web, ilustraciones, animaciones: todo lo que hago gira en torno a la interfaz. Lo que me gusta de nuestro producto es inventar reglas universales, que funcionan en todas las pantallas y acogen todas las identidades visuales. La app se convierte en el escaparate de tu contenido. Me gusta lo que parece sencillo, y todo el trabajo invisible que hace falta para lograrlo: las reglas, las decisiones y las restricciones que hacen que una interfaz se sostenga. Eso es lo que cuento aquí. [Más de Marie-Pierre](https://es.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)