El color de acento que no sea el azul de Tailwind: una guía práctica para 2026

Abre la documentación de Tailwind, baja hasta blue-500 y tienes delante el #3b82f6. Ese código hexadecimal es, ahora mismo, el color de acento más desplegado de toda la web. Es el color de enlace por defecto en mil botones de shadcn, el anillo de foco de cada formulario de v0, el ancla de degradado de la mitad de las plantillas de Framer publicadas este año. Cuando la acción principal de un sitio es bg-blue-600 hover:bg-blue-700, ya sabes cómo se construyó antes de leer una sola línea del texto.

Elegir otro acento es la jugada más barata que existe para que un sitio deje de leerse como salida de una máquina. No cuesta nada (una variable CSS) y sobrevive a cualquier otro atajo que tomes. Esta es la guía práctica: de dónde sacar un color, cómo controlarlo, cómo asegurarte de que pasa el contraste y ocho acentos concretos con los sectores en los que de verdad encajan.

Por qué el #3b82f6 se lee como "esto lo construyó una IA"

El azul no es el problema. El azul es el color de marca más usado del planeta por algo: transmite confianza, se lee bien, va sobre seguro. El problema es *este azul en concreto*, aplicado con *cero desviación*, al lado de su primo violet-500 (#8b5cf6) en un degradado de 135 grados. Ya escribí sobre el degradado azul-violeta como firma de la IA: el acento por defecto es la misma enfermedad en versión monocromática.

Esta es la pista. Una persona que diseña elige un acento y luego lo *afina*: empuja el tono dos grados hacia el cálido, baja la saturación para que no vibre contra el fondo, construye una rampa de tonos a medida. Una herramienta de IA tira del token con nombre porque el token con nombre es de lo que están saturados sus datos de entrenamiento. blue-600 es una decisión que no tomó nadie. Y eso es justo lo que capta el ojo: la ausencia de decisión. Es el mismo monocultivo que ves cuando cada instalación de shadcn envía los mismos valores por defecto del registro: el ajuste de fábrica de la herramienta se convierte en el aspecto de todo el sector.

Puedes comprobarlo en cualquier sitio en treinta segundos. Abre las DevTools, inspecciona el botón principal y, si el background-color calculado es rgb(37, 99, 235), tienes delante un blue-600 sin tocar. Si es rgb(59, 130, 246), eso es blue-500. El método de auditoría CSS trata esos valores exactos como huellas dactilares, porque lo son.

Paso 1: deriva el color de algo real

No abras un selector de color y te pongas a "buscar un azul bonito". Deriva el acento de un hecho del proyecto. Esa es la diferencia entre un color que significa algo y un color que solo *no es el de por defecto*.

Tres fuentes fiables:

El dominio o el nombre del producto. terre apunta a tonos tierra. forge apunta a un naranja de metal al rojo. marine, slate, harbor te dan lo evidente. Una fintech que se llame Cobalt no debería ser azul Tailwind: debería ser cobalto de verdad, que es más verdoso y más profundo (oklch(0.45 0.13 250)). El nombre es un brief; léelo.

El producto físico o el material. ¿Vendes máquinas de espresso? Saca el acento del marrón del grano tostado y del dorado de la crema, no de una paleta SaaS genérica. El acento de un estudio de cerámica está en el esmalte. El de una marca de escalada está en el blanco de la magnesia y el gris del granito. Fotografía el objeto real, sácale el color con el cuentagotas y luego limpia el resultado en OKLCH.

El conjunto de la competencia, para huir de él. Si toda la competencia de tu sector es azul (y en fintech, herramientas para desarrolladores y SaaS B2B lo es), ese es el argumento más fuerte posible para no ser azul. Stripe es dueño del índigo (su color principal es #635bff). Linear es dueño de un casi-negro frío sobre un acento azul-violáceo tenue (#5e6ad2). Ir de azul en herramientas para desarrolladores significa pelear por un territorio que ya ocupan tres gigantes. Quédate con el hueco que dejaron.

Escribe el razonamiento en una frase: "El acento es siena tostado porque el producto es marroquinería artesanal y el hero se fotografía con un marrón cálido". Si no eres capaz de escribir esa frase, todavía no has elegido un color: has elegido un código hexadecimal.

Paso 2: trabaja en OKLCH, no en hex

La mayoría se salta este paso, y es el que separa una paleta plana de aficionado de una que se sostiene. Deja de razonar el color en hex o en HSL. Usa OKLCH.

OKLCH es oklch(lightness chroma hue):

• Lightness (luminosidad), de 0 a 1, perceptual, así que 0.5 de verdad se ve la mitad de brillante. (La luminosidad de HSL miente: el amarillo HSL y el azul HSL con la misma "luminosidad" tienen brillos abismalmente distintos.)
• Chroma (croma), de 0 a ~0.37, es la viveza del color. 0 es gris, 0.15 es vívido.
• Hue (tono), de 0 a 360, el ángulo, justo lo que esperarías.

El soporte de los navegadores es universal desde 2023. Lo escribes directamente en el CSS:

:root {
  --accent: oklch(0.62 0.19 35);        /* a burnt orange */
  --accent-hover: oklch(0.56 0.19 35);  /* same hue/chroma, darker */
  --accent-subtle: oklch(0.95 0.04 35); /* same hue, washed out for backgrounds */
}

Por qué importa esto en la práctica: para construir una rampa de tonos, mantienes el tono y el croma más o menos fijos y mueves la luminosidad. Intenta eso en hex y obtienes un fango que va cambiando de tono: arrastra un deslizador hex hacia lo oscuro y tu naranja deriva a marrón, tu azul deriva a violeta. En OKLCH la rampa se mantiene *en el mismo color*, solo más claro y más oscuro. Tu estado hover es L - 0.06. Tu estado deshabilitado es el mismo tono con chroma 0.04. Tu fondo teñido es L 0.96, chroma 0.03. Una decisión, todo un sistema.

La segunda razón: OKLCH hace que sea trivial construir una paleta donde cada color está *igual* de saturado e *igual* de brillante. ¿Quieres una paleta categórica de seis colores para un gráfico donde ninguno grite más fuerte que el resto? Fija L 0.65 C 0.15, rota el tono en pasos de 60 grados (35, 95, 155, 215, 275, 335) y obtienes seis colores con el mismo peso. Eso es algo que no puedes hacer a ojo en un selector hex.

Paso 3: ocho acentos que no son azul, y dónde encajan

Cada uno es un punto de partida real, con su sector y su razonamiento. Ajusta la luminosidad según tu fondo. Estos son los valores *ancla*, el equivalente al 500.

1. Siena tostado / terracota — `oklch(0.62 0.15 40)` (~`#c2613a`)

Cálido y terroso, la señal de algo hecho a mano. Encaja con cualquier cosa física: cerámica, cuero, mobiliario, café de especialidad, cosmética natural. La señal exactamente opuesta al frío azul SaaS. Combina con un blanco roto cálido (oklch(0.97 0.01 80)), no con blanco puro. Evítalo en medicina o fintech, donde puede leerse como "advertencia".

2. Verde bosque / pino — `oklch(0.48 0.10 155)` (~`#2f6b4f`)

Profundo y sereno, creíble sin caer en lo corporativo. Encaja con sostenibilidad, equipamiento de exterior, finanzas que quieren transmitir "estable" en lugar de "disruptivo" y cualquier cosa cercana al bienestar que esté harta del beige de balneario. Fíjate en el *croma bajo*: mantén el verde apagado o se va al "logo de reciclaje". Es el no-azul más seguro para un producto B2B que aun así necesita parecer serio.

3. Sangre de toro / rojo profundo — `oklch(0.45 0.15 25)` (~`#9b3a35`)

Editorial y con pinta de caro. Encaja con bufetes, publicaciones premium, whisky y vino, consultoría de alto nivel. Es rojo sin la alarma: la luminosidad más baja lo aleja del "estado de error". Úsalo con cuentagotas como acento de verdad (un botón, los enlaces, una línea bajo el logotipo); una pared entera se vuelve agresiva. Brillante para sitios que buscan gravedad.

4. Mostaza / ocre — `oklch(0.75 0.14 85)` (~`#d4a017`)

Distintivo y un punto retro. Encaja con agencias creativas, gastronomía, editorial, cualquier cosa con personalidad que quiera parecer escogida a mano. Es difícil acertar con el contraste (los acentos amarillentos fallan contra el blanco, mira el paso 4), así que normalmente pide texto oscuro sobre el acento, y el acento usado sobre superficies oscuras. Mucha recompensa, pero hay que tener cuidado.

5. Verde azulado / cian profundo — `oklch(0.58 0.10 200)` (~`#2a8c9c`)

La vía de escape para quien de verdad necesita un color frío con aire tecnológico pero quiere salir del azul. Encaja con health tech, productos de datos, fintech que quiere resultar cercana. *Cuidado*: el verde azulado se está convirtiendo a toda velocidad en el nuevo valor por defecto seguro, es adonde huye la gente cuando se da cuenta de que el azul está sobreexplotado, lo que significa que en dos años será justo lo que intentes evitar. Úsalo, pero empuja el tono hacia el verde (190-200) para diferenciarlo del token cyan-500 (oklch(0.71 0.13 215), #06b6d4).

6. Ciruela / berenjena — `oklch(0.42 0.11 330)` (~`#7a3d6b`)

Rico e inesperado. Encaja con belleza, DTC premium, herramientas creativas, cualquier cosa dirigida a un público sofisticado. *No* es el violeta de degradado de IA del violet-500: es más oscuro, más rojizo y mucho más bajo en croma, que es exactamente lo que lo mantiene fuera del radar de la morralla. El violeta de degradado vive en oklch(0.6 0.23 295); este se sitúa a 35 grados de distancia y con más o menos la mitad de saturación.

7. Gris azulado pizarra — `oklch(0.50 0.04 250)` (~`#5a6478`)

Para cuando el brief pide de verdad contención: empresa, infraestructura, seguridad, herramientas para desarrolladores que quieren parecerse a Linear y no a una startup en fase semilla. El truco está en el *croma casi nulo* (0.04). Técnicamente pertenece a la familia del azul, pero está tan desaturado que se lee como un neutro meditado, no como un valor por defecto. Así se hace lo de "profesional y frío" sin blue-600.

8. Coral / salmón — `oklch(0.70 0.14 25)` (~`#e8745f`)

Amable y enérgico sin esforzarse demasiado. Encaja con apps de consumo, productos de comunidad, educación, cualquier cosa que busque calidez y cercanía. Es la respuesta cálida al "necesitamos un acento acogedor" que todos los demás resuelven con azul o con ese violeta clavadito al de Stripe. Combina de maravilla con un texto en azul marino profundo para el contraste.

Paso 4: la comprobación de contraste no es negociable

Un acento no-por-defecto que nadie puede leer es peor que el azul. Haz dos comprobaciones antes de publicar.

Texto sobre el acento. Tu botón principal es texto blanco (u oscuro) sobre el relleno del acento. Necesita cumplir WCAG AA: 4.5:1 para texto normal, 3:1 para texto grande. El asesino aquí son los acentos claros: la mostaza y el coral con luminosidad alta *fallarán* con texto blanco. Dos arreglos: baja la luminosidad del acento hasta que el blanco pase, o usa texto oscuro sobre el acento. La mostaza casi siempre pide texto oscuro:

.btn-primary {
  background: var(--accent);     /* oklch(0.75 0.14 85) mustard */
  color: oklch(0.20 0.02 85);    /* near-black, warm-tinted — passes AA */
}

El acento como texto o enlaces sobre el fondo de la página. Los enlaces y el texto de acento pequeño sobre blanco necesitan 4.5:1. Aquí es donde tu acento brillante suele fallar y necesitas una variante *más oscura* del mismo tono solo para el texto:

:root {
  --accent: oklch(0.70 0.14 25);       /* coral — for fills */
  --accent-text: oklch(0.52 0.16 25);  /* darker coral — for links on white, passes AA */
}

Herramientas: pega tu OKLCH o tu hex en el comprobador de contraste de WebAIM, o usa la lupa de contraste del selector de oklch.com (muestra la ratio en vivo mientras arrastras la luminosidad). No lo juzgues a ojo. El coral en oklch(0.70 0.14 25) sobre blanco se queda alrededor de 2.9:1: se ve bien y falla AA. "Se ve bien en mi monitor" es justo como acabas publicando un enlace que es invisible para un tercio de tus visitantes.

Una más, que se olvida a menudo: comprueba también el acento contra la superficie de tu *modo oscuro*. Un color afinado para el blanco muchas veces se muere sobre oklch(0.20 0 0). Normalmente necesitas una variante más clara y un poco menos saturada para los fondos oscuros: mismo tono, L + 0.1, chroma - 0.03.

Paso 5: cablearlo como una sola variable y cerrar el tema

Toda la gracia está en que esto es barato. Define el acento y sus derivados una vez, referencia la variable en todas partes y no vuelvas a teclear un hex en bruto dentro de un componente nunca más:

:root {
  --accent:        oklch(0.62 0.15 40);
  --accent-hover:  oklch(0.56 0.15 40);
  --accent-text:   oklch(0.50 0.16 40);
  --accent-subtle: oklch(0.96 0.03 40);
}

En Tailwind, regístralo para dejar de tirar de blue-600 por reflejo:

// tailwind.config — or @theme in v4
colors: {
  accent: {
    DEFAULT: 'oklch(0.62 0.15 40)',
    hover:   'oklch(0.56 0.15 40)',
    subtle:  'oklch(0.96 0.03 40)',
  },
}

Ahora bg-accent hover:bg-accent-hover es tan fácil de teclear como el valor por defecto de la morralla, y la próxima vez que Cursor o Copilot autocompleten bg-blue-600 lo notarás y lo corregirás. Ese reflejo, cazar el valor por defecto antes de que aterrice, es la mayor parte de la batalla. Si haces esto en trabajos para clientes, mételo en tu plantilla base para que el *punto de partida* ya no sea el de por defecto; el manual de agencia sobre sitios construidos con IA que no parecen de IA trata la variable de acento como un entregable por cliente, no como algo que se deja para el final.

La versión de treinta segundos

Si no recuerdas nada más: deriva el acento de un hecho real del proyecto, constrúyelo en OKLCH para que la rampa de tonos se sostenga, comprueba el contraste tanto del texto-sobre-acento como del acento-sobre-fondo y cablealo como una sola variable. Arriba tienes ocho puntos de partida: siena tostado para lo artesanal, verde bosque para serio-pero-no-corporativo, sangre de toro para la gravedad, pizarra para la contención.

El listón está embarazosamente bajo. La web está tan saturada de #3b82f6 que *cualquier* acento elegido a conciencia (escogido por una razón, afinado para el contraste, aplicado con coherencia) se lee al instante como "aquí hubo una persona tomando decisiones". De eso va todo el juego. El azul no está mal. Un blue-600 sin tocar es, simplemente, el anuncio más ruidoso posible de que nadie lo eligió.