PALUNEXA
Volver al atlas

NOTAS SOBRE EL COLOR

Salvia
#a5b89c

Admite nombres de colores, HEX, RGB, HSL y OKLCH. No necesitas una cuenta.

Color seleccionado · sRGB#a5b89c
El color en números · RGB / HSL / OKLCH
HEX
#a5b89c
RGB
rgb(165, 184, 156)
HSL
hsl(100.71, 16.47%, 66.67%)
OKLCH
oklch(0.76021401 0.04443647 135.530112)

¿Qué distingue a este color?

Este salvia es un verde claro de baja saturación con los tres canales RGB presentes. Es mucho menos intenso que el lima, por lo que ofrece otra opción para fondos amplios.

El nombre es descriptivo; usa el valor numérico en CSS.

Colores que se acompañan.

Complementaria

Dos colores separados por 180° en el círculo HSL. Sus matices opuestos crean un contraste marcado.

Análoga

Tres matices vecinos a −30°, 0° y +30° respecto al color base.

Triádica

Tres matices a 0°, 120° y 240°: un triángulo de intervalos iguales en el círculo HSL.

Un ejemplo práctico de diseño

Pruébalo en paneles editoriales de estilo de vida, tableros de jardinería o tarjetas de producto tranquilas. Añade un título oscuro y un pequeño acento terracota en vez de confiar toda la jerarquía a tonos pálidos.

Los consejos de diseño dependen del contexto y se distinguen de los cálculos.

Qué revisar antes de usarlo

Una paleta de aspecto tranquilo también puede ser inaccesible. Comprueba por separado el texto salvia sobre blanco y los límites de los controles.

Que también se pueda leer. / CSS
Relación de contraste · #a5b89c
Color seleccionadoRelación de contrasteTexto normal · AA
Negro9.94:1Cumple
Blanco2.11:1No cumple

CSS para usar

.color-surface {
  background: #a5b89c;
  color: #000000;
}

Preguntas y respuestas directas

¿Cuáles son los valores de #a5b89c?

#a5b89c equivale a rgb(165, 184, 156), hsl(100.71, 16.47%, 66.67%) y oklch(0.76021401 0.04443647 135.530112). Todos se calculan a partir del mismo color sRGB opaco.

¿Qué texto se lee mejor sobre #a5b89c?

El negro da 9.94:1 y el blanco 2.11:1. Entre ambos, Negro tiene más contraste. AA para texto normal exige al menos 4,5:1.

¿Cómo se calcula la paleta complementaria?

El motor gira el matiz HSL 180° y mantiene saturación y luminosidad. Para este color el resultado es #a5b89c, #af9cb8. Los acromáticos siguen siendo neutros.

¿Salvia significa #a5b89c en todas partes?

No. Es un nombre descriptivo de una familia, no una palabra clave CSS para este valor. Si importa el tono exacto, comparte #a5b89c; otras paletas salvia pueden usar números distintos.

Probar este color en el estudio

02 / COLORES COMPAÑEROS

Colores que se acompañan.

Explora otras perspectivas con las reglas del círculo cromático.

#a5b89c

El color base permanece fijo. Ni este ni los colores bloqueados cambian al regenerar o ajustar.

Exportar CSS de la paleta

Tres matices vecinos a −30°, 0° y +30° respecto al color base.

01COMPAÑERO
#b3b89crgb(179, 184, 156)oklch(0.77101573 0.03904738 115.544086)
Relación de contraste: 10.25:1
02BASE
#a5b89crgb(165, 184, 156)oklch(0.76021401 0.04443647 135.530112)
Relación de contraste: 9.94:1
03COMPAÑERO
#9cb8a1rgb(156, 184, 161)oklch(0.75500617 0.0447061 150.367054)
Relación de contraste: 9.78:1
HSL / Análoga
Valores y herramientas avanzadas

Color seleccionado / #A5B89C

El color en números

Un color, cuatro formas de expresarlo.

HEX
#a5b89c
RGB
rgb(165, 184, 156)
HSL
hsl(100.71, 16.47%, 66.67%)
OKLCH
oklch(0.76021401 0.04443647 135.530112)
Matiz
100.71°
Saturación
16.47%
Luminosidad
66.67%
Dónde puede funcionar esta armonía

Las sugerencias de diseño son subjetivas. Los ángulos de matiz y las relaciones de contraste son cálculos.

Usos sugeridos
Páginas editoriales, marcas de estilo de vida e interfaces tranquilas.
Ventaja
Los matices vecinos dan continuidad visual.
Qué conviene tener en cuenta
Pueden difuminar los límites: añade etiquetas y espacio neutro.
Ejemplo de aplicación
Reserva el matiz central para el bloque principal y sus vecinos para tarjetas decorativas.
OKLCH · Ajustes perceptuales

Ajusta la luminosidad y el croma de los colores compañeros libres en OKLCH. La separación de matices HSL puede cambiar. Compara el resultado antes de aplicarlo.

Paleta actual
Vista previa del ajuste

Colores cuyo croma se ha reducido para sRGB: 0

El color base permanece fijo. Ni este ni los colores bloqueados cambian al regenerar o ajustar.

Comparar con la armonía HSL original

Estos son los colores teóricos sin editar. Compara sus valores HEX y OKLCH con la paleta de arriba.

#b3b89coklch(0.77101573 0.03904738 115.544086)#a5b89coklch(0.76021401 0.04443647 135.530112)#9cb8a1oklch(0.75500617 0.0447061 150.367054)
CSS de la paleta
:root {
  --palette-1: #b3b89c;
  --palette-2: #a5b89c;
  --palette-3: #9cb8a1;
}
Vista previa del diseño

03 / EN CONTEXTO

Míralo en contexto.

Tus colores aplicados con CSS real.

Asignar funciones a la paleta

Combinación de texto aplicada #000000 / #a5b89c · 9.94:1

your-next-idea.design
FORM & FIELDIdeas libres. Colores elegidos con cuidado.
UN ESTUDIO PARA LAS IDEAS COTIDIANAS

Espacio para otra mirada.

Las nuevas ideas suelen empezar con un poco de curiosidad.

Descubrir la colección

La pareja de texto y fondo no alcanza AA para texto normal.

#9cb8a1 / #a5b89c · 1.02:1 · Texto normal · AA

Texto alternativo sugerido: #000000 (9.94:1).

Contraste del texto mostrado: 9.94:1 · Los colores de texto accesibles solo afectan a la vista previa. Tu paleta no cambia.

La pareja comprobada se usa en botones, tarjetas, indicadores y franjas de diapositiva con color. El resto del texto usa #262a23 (13.18:1) o #55594f (6.47:1) sobre #f6f3ec. Los gráficos tienen números. No es una auditoría completa de accesibilidad.

Comprobador de contraste de texto

Accesibilidad / WCAG AA

Que también se pueda leer.

Compara el color seleccionado con un color de texto o de fondo.

Color de texto recomendado: #000000 · 21.00:1

AA exige 4,5:1 para texto normal y 3:1 para texto grande. Esta prueba no determina el cumplimiento completo de WCAG.

Aa

Disfruta del color sin renunciar a la lectura.

#a5b89c / #ffffff
Relación de contraste2.11:1
  • Texto normal · AANo cumple
  • Texto grande · AANo cumple
  • Texto normal · AAANo cumple
  • Texto grande · AAANo cumple

Un poco de teoría para explorar.

PALUNEXA gira los matices en el círculo HSL y conserva la saturación y la luminosidad. Las paletas monocromáticas varían la luminosidad. La armonía calculada es un punto de partida, no una garantía de que el diseño guste a todo el mundo.

Volver al atlas