Paleta de colores para web: cómo elegir los colores de un sitio

Una buena paleta de colores para web no es un tablero de inspiración con tus cinco colores favoritos. Es una lista corta de papeles, cada uno ocupado por un color: el fondo de página, las superficies elevadas, el texto principal, el texto más discreto, los bordes, un acento para las acciones, y rojo, ámbar y verde para los estados. Elige primero el acento de marca, construye neutros tranquilos a su alrededor, comprueba el contraste de cada pareja de texto y guarda el resultado como variables CSS para que toda la web use los mismos valores.

Los papeles que necesita toda web

Cómo elegir los colores de una web

1. 1

   Empieza con un acento

   Tu color de marca, o el que quieres que la gente asocie contigo. Si no lo tienes, te ayuda cómo elegir los colores de marca.

2. 2

   Tiñe los neutros hacia él

   Los grises con un toque del tono del acento se sienten de la misma familia. Una marca verde azulado lleva grises fríos y algo azulados; una marca terracota, grises cálidos y cremosos.

3. 3

   Decide claro, oscuro o ambos

   Elige el tema que verá primero la mayoría de visitantes y diséñalo entero antes de empezar el otro.

4. 4

   Comprueba cada pareja de texto

   Texto sobre fondo, texto sobre superficie, texto suave sobre ambos, blanco sobre el botón de acento. Corrige todo lo que quede por debajo de 4,5:1.

5. 5

   Aplica 60, 30, 10

   Más o menos 60% de fondo, 30% de superficies y texto, 10% de acento. La regla 60 30 10 explica el equilibrio.

Tres paletas de colores para web para empezar

Reglas de contraste que mantienen una web legible

Las pautas de contraste de WCAG marcan el mínimo: 4,5:1 para texto normal, 3:1 para texto grande (unos 24 px, o 19 px en negrita) y 3:1 para componentes de interfaz como bordes de campos e iconos con significado. El comprobador de contraste de WebAIM prueba cualquier pareja. Nuestra guía de contraste de color explica los motivos y los casos límite.

Codificar tu paleta como tokens

Guarda cada papel una sola vez como propiedad personalizada de CSS y usa solo esas variables en tus estilos. Así un tema oscuro, una campaña de temporada o un cambio de marca es un cambio en un único bloque de valores, no una búsqueda por todos los archivos. Esa es la idea central de los design tokens.

:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }

El modo oscuro es su propia paleta

Invertir una paleta clara rara vez funciona. Los acentos saturados brillan demasiado sobre negro, las sombras desaparecen y el texto blanco puro deslumbra. Construye el modo oscuro como un segundo conjunto de valores: un fondo casi negro con un toque de tono, superficies que se aclaran a medida que suben, texto más suave y un acento aclarado hasta alcanzar el contraste. Diseño en modo oscuro lo explica a fondo.

Dónde va el color de marca más allá de los botones

Si el acento solo aparece en los botones, la web puede parecer genérica. La respuesta no es poner más acento por todas partes, sino un lugar donde la marca pueda expresarse: la cabecera, una franja destacada o el pie. Ahí funciona bien un degradado rico de la familia de la marca, mientras el resto de la página se mantiene tranquilo y legible.

Un Mark de Gradiently puede ser esa capa expresiva: un fondo que nadie más tiene y que elige un color de texto de su propia paleta para cada línea, de modo que los titulares se lean bien. Para saber más sobre combinaciones, consulta armonía del color y diseño de la sección principal.