# Paletas de colores tecnológicas más allá del azul corporativo

[Canonical HTML page](https://gradiently.design/es/guide/tech-color-palettes)

El azul transmite confianza, igual que el azul de todas las demás empresas tecnológicas. Aquí tienes ocho paletas con códigos reales que siguen pareciendo software, y la estructura que hace funcionar cualquiera de ellas en un producto.

## The short version

- Una paleta tecnológica que funciona tiene cinco partes: un fondo oscuro, un fondo claro, una escala de grises neutros, un acento de marca y un juego de colores de estado.
- El azul domina la imagen de marca tecnológica porque transmite calma y fiabilidad, y precisamente por eso un acento azul rara vez hace reconocible por sí solo a una marca tecnológica.
- El acento es la parte de una paleta tecnológica que la gente recuerda, así que debería ser un color del que tu sector todavía no se haya apropiado.
- Los colores de estado para éxito, aviso y error deben seguir siendo los convencionales aunque el acento de marca sea inusual, porque los usuarios se fían de ellos para actuar.
- Cada combinación de texto y fondo en la paleta de un producto debería cumplir el contraste WCAG, al menos 4,5:1 para el texto normal.

Una buena **paleta de colores tecnológica** tiene menos que ver con un color protagonista y más con un sistema: un fondo oscuro, un fondo claro, una escala de grises neutros, un acento que sea tuyo y colores convencionales para éxito, aviso y error. El azul corporativo ocupa el hueco del acento en tantas empresas de software que ha dejado de significar nada en particular. Cambia el acento por algo que tu sector no tenga ya, mantén el resto con disciplina, y la marca seguirá leyéndose como tecnología competente.

## Por qué las marcas tecnológicas siguen eligiendo el azul

El azul es seguro. Transmite calma y fiabilidad en la mayoría de los mercados, encaja con comodidad en las interfaces y es el color de enlace por defecto de la web. Son buenas razones, y el resultado es un mar de azules casi idénticos en apps bancarias, paneles en la nube y herramientas de productividad. [Psicología del color](https://gradiently.design/es/guide/color-psychology) explica las asociaciones; el problema es sencillamente que todos actuaron en base a ellas a la vez.

Nada de esto significa que el azul esté mal. Significa que el azul no puede ser tu única idea. Si lo mantienes, combínalo con un fondo inesperado, un segundo color o un material distintivo, para que la identidad sea reconocible incluso sin el logotipo.

## Ocho paletas de colores tecnológicas con códigos hex

Cada paleta de abajo tiene un fondo, un tono de apoyo y un acento. Están escritas como degradados para que veas cómo se comportan los colores juntos, y después desglosadas en muestras para las dos que más trabajan en la interfaz de un producto.

- Tinta nocturna y lima ácida: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)`
- Grafito y naranja señal: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)`
- Papel y pino: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)`
- Violeta medianoche y rosa: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)`
- Verde azulado profundo y menta: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)`
- Blanco frío y azul eléctrico: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)`
- Espresso y ámbar: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)`
- Negro y vincapervinca suave: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)`

Ocho puntos de partida. Fíjate en cuánto trabaja el fondo: el mismo acento parece una herramienta para desarrolladores sobre negro y una app de productividad tranquila sobre papel.

- **Tinta nocturna y lima ácida** encaja con herramientas para desarrolladores e infraestructura: técnica, nocturna, imposible de confundir con un banco.
- **Grafito y naranja señal** evoca hardware, robótica o cualquier cosa física. El naranja también luce bien sobre fotografía de producto oscura.
- **Papel y pino** es la opción tranquila para software de investigación, escritura y salud, donde la calma importa más que la velocidad.
- **Violeta medianoche y rosa** va bien con apps de consumo y herramientas creativas que quieren energía sin el degradado de azul a morado de siempre.
- **Verde azulado profundo y menta** funciona para marcas de clima, datos y fintech que quieren parecer frescas en lugar de corporativas.
- **Blanco frío y azul eléctrico** mantiene el azul pero lo hace vivo y singular, casi sin nada más alrededor.
- **Espresso y ámbar** es cálida e inusual en tecnología, buena para software de hostelería, audio y todo lo que pone a las personas primero.
- **Negro y vincapervinca suave** es contenida y premium, cercana al estilo hacia el que convergen muchos productos de IA.

- Tinta nocturna: #0b1020
- Marino pizarra: #1e2a4a
- Gris niebla: #8a94a8
- Nube: #eef1f6
- Lima ácida: #c6f432

Tinta nocturna y lima ácida como juego de trabajo: dos fondos, un gris medio para el texto secundario y el acento. La lima se usa para un botón y un resaltado por pantalla, nunca para texto normal sobre blanco.

## Las cinco partes de la paleta de un producto

Las páginas de marketing pueden apañarse con tres colores. Un producto no, porque las interfaces necesitan bordes, estados desactivados, resaltados y alertas. Planifica estas funciones antes de elegir tonos, y la paleta se mantendrá coherente a medida que crezca el producto.

| Función | Qué hace | Ejemplo |
| --- | --- | --- |
| Fondo oscuro | Fondo de la app en modo oscuro, pies de página, secciones hero | `#0b1020` |
| Fondo claro | Fondo de la app en modo claro, documentos, correo | `#fafaf7` |
| Escala neutra | Texto, bordes, separadores, estados desactivados, en 8 a 10 pasos | `#f2f4f7` a `#111827` |
| Acento de marca | Botones principales, enlaces, lo único que hay que pulsar | `#c6f432` |
| Colores de estado | Éxito, aviso, error, información | Verde, ámbar, rojo, azul |

Primero las funciones, después los tonos. La mayoría de los productos necesitan muchos más grises que colores de marca.

> **Que los colores de estado sean aburridos** Un acento inusual es una decisión de marca. Un color de error inusual es un problema de usabilidad. El rojo para los errores y el verde para el éxito deben seguir siendo reconocibles, aunque ajustes su tono exacto para que convivan con tu acento.

## Cómo convertir una paleta tecnológica en design tokens

Nombra los colores por su función, no por su aspecto. Un token llamado `--accent` sobrevive a un rediseño de marca; un token llamado `--lime` se convierte en una mentira el día que cambia el acento. Define cada función una vez para el modo claro y otra para el oscuro, y haz que los componentes solo hagan referencia a funciones.

```css
:root {
  --ground: #fafaf7;
  --surface: #ffffff;
  --text: #111827;
  --text-muted: #4b5563;
  --border: #d9dde3;
  --accent: #3344ff;
  --on-accent: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1020;
    --surface: #141a2e;
    --text: #eef1f6;
    --text-muted: #8a94a8;
    --border: #1e2a4a;
    --accent: #c6f432;
    --on-accent: #0b1020;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
  }
}
```

Tokens de función para los dos modos. El acento puede cambiar entre modos: azul eléctrico sobre blanco, lima sobre tinta nocturna, siempre que ambos parezcan la misma marca.

El modo oscuro es donde se juzgan las paletas tecnológicas, ya que desarrolladores y usuarios avanzados suelen vivir en él. [Diseño en modo oscuro](https://gradiently.design/es/guide/dark-mode-design) cubre los detalles, como despegar un poco el fondo del negro puro y aclarar los colores de estado para que no vibren. Para degradados que se mantengan vivos en pantallas modernas, merece la pena echar un vistazo a los [degradados oklch en CSS](https://gradiently.design/es/guide/css-gradient-oklch).

## Comprueba el contraste antes de lanzar

Los acentos vivos como la lima, la menta y el ámbar quedan de maravilla sobre fondos oscuros y fallan como texto sobre blanco. Las WCAG piden 4,5:1 para el texto normal y 3:1 para el texto grande y los elementos de interfaz. Prueba cada combinación que pienses usar y anota cuáles están permitidas. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) tiene el método completo.

### Evita

- Texto lima o menta sobre una página blanca
- Un acento usado a la vez en botones, enlaces, gráficos y titulares
- Fondo negro puro con texto blanco puro en todas partes
- Colores de estado forzados a la marca hasta que el rojo parece naranja

### Haz

- Acentos vivos como rellenos con texto oscuro encima
- Una sola tarea para el acento: la acción principal
- Un fondo oscuro ligeramente aclarado y un texto blanco roto
- Colores de estado convencionales, ajustados solo de tono

## Cómo llevar la paleta más allá de la interfaz

Las publicaciones de lanzamiento, las diapositivas de conferencias y los gráficos del registro de cambios son donde una paleta tecnológica se convierte en marca. Los rellenos planos del acento se vuelven repetitivos enseguida, así que dale a la parte de marketing una superficie más rica: el color de fondo con luz que lo atraviesa, grano, una deriva lenta del acento. [Branding para SaaS](https://gradiently.design/es/guide/saas-startup-branding) y [branding fintech](https://gradiently.design/es/guide/fintech-branding) muestran cómo se aplica en dos sectores muy distintos.

Un gráfico horizontal de lanzamiento que anuncia despliegues en cuatro segundos, ya en beta

Una imagen de lanzamiento al tamaño de enlace de LinkedIn, 1200×627, donde el fondo lleva la marca y las palabras se mantienen breves.

Una publicación vertical en redes que anuncia la versión 3 de un producto de software

El mismo sistema como publicación vertical del feed a 1080×1350.

Aquí es donde encaja Gradiently. Un Mark da a una marca tecnológica un fondo vivo con el que solo tú puedes exportar una vez que lo reservas, se renderiza a cualquier tamaño, desde una imagen de enlace hasta una diapositiva, y mantiene legibles las notas de versión moviendo su zona más tranquila detrás de las palabras. También puedes pedirle al Designer una publicación de lanzamiento y él crea los demás tamaños por ti.

## FAQ

### ¿Qué colores son mejores para una empresa tecnológica?

Cualquier color funciona si la paleta tiene una estructura clara: dos fondos, una escala neutra, un acento y colores de estado convencionales. Elige un acento que tu competencia no use ya.

### ¿Por qué tantas empresas tecnológicas usan el azul?

El azul transmite calma y fiabilidad y encaja con comodidad en las interfaces. Como tantas empresas lo eligieron por las mismas razones, un acento azul por sí solo rara vez hace reconocible a una marca.

### ¿Cuántos colores debe tener la paleta de un SaaS?

Normalmente un acento de marca, una escala de grises neutros de 8 a 10 pasos, dos fondos y cuatro colores de estado. Los productos necesitan muchos grises y muy pocos colores de marca.

### ¿Un acento vivo como la lima puede funcionar en una marca tecnológica?

Sí, sobre todo en fondos oscuros. Úsalo como relleno con texto oscuro encima en lugar de como texto sobre blanco, donde no cumple el contraste.