PALUNEXA
Volver al atlas

NOTAS SOBRE EL COLOR

Lavanda
#e6e6fa

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

Color seleccionado · sRGB#e6e6fa
El color en números · RGB / HSL / OKLCH
HEX
#e6e6fa
RGB
rgb(230, 230, 250)
HSL
hsl(240, 66.67%, 94.12%)
OKLCH
oklch(0.93090233 0.02694143 285.864799)

¿Qué distingue a este color?

Lavanda es un color pálido con rojo y verde iguales y algo más de azul. No es blanco neutro, aunque una muestra pequeña pueda parecer casi blanca en ciertas pantallas.

Este HEX también tiene un nombre 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 como fondo de una nota, un panel seleccionado o una sección tranquila de una presentación. Un título marino puede crear más jerarquía que otro texto pastel.

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

Qué revisar antes de usarlo

La diferencia frente al blanco puede ser insuficiente para reconocer un campo o una selección. Añade un borde visible, una etiqueta u otra señal no cromática.

Que también se pueda leer. / CSS
Relación de contraste · #e6e6fa
Color seleccionadoRelación de contrasteTexto normal · AA
Negro17.06:1Cumple
Blanco1.23:1No cumple

CSS para usar

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

Preguntas y respuestas directas

¿Cuáles son los valores de #e6e6fa?

#e6e6fa equivale a rgb(230, 230, 250), hsl(240, 66.67%, 94.12%) y oklch(0.93090233 0.02694143 285.864799). Todos se calculan a partir del mismo color sRGB opaco.

¿Qué texto se lee mejor sobre #e6e6fa?

El negro da 17.06:1 y el blanco 1.23: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 #e6e6fa, #fafae6. Los acromáticos siguen siendo neutros.

¿Puede usarse lavanda como texto de lectura sobre blanco?

Que un color sirva como fondo claro no significa que sea adecuado para texto. Consulta el contraste lavanda/blanco y elige un texto más oscuro que alcance el umbral.

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.

#e6e6fa

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
#e6f0fargb(230, 240, 250)oklch(0.95055246 0.01721226 248.008865)
Relación de contraste: 18.21:1
02BASE
#e6e6fargb(230, 230, 250)oklch(0.93090233 0.02694143 285.864799)
Relación de contraste: 17.06:1
03COMPAÑERO
#f0e6fargb(240, 230, 250)oklch(0.93867721 0.02869168 308.121742)
Relación de contraste: 17.40:1
HSL / Análoga
Valores y herramientas avanzadas

Color seleccionado / #E6E6FA

El color en números

Un color, cuatro formas de expresarlo.

HEX
#e6e6fa
RGB
rgb(230, 230, 250)
HSL
hsl(240, 66.67%, 94.12%)
OKLCH
oklch(0.93090233 0.02694143 285.864799)
Matiz
240.00°
Saturación
66.67%
Luminosidad
94.12%
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.

#e6f0faoklch(0.95055246 0.01721226 248.008865)#e6e6faoklch(0.93090233 0.02694143 285.864799)#f0e6faoklch(0.93867721 0.02869168 308.121742)
CSS de la paleta
:root {
  --palette-1: #e6f0fa;
  --palette-2: #e6e6fa;
  --palette-3: #f0e6fa;
}
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 / #e6e6fa · 17.06: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.

#f0e6fa / #e6e6fa · 1.02:1 · Texto normal · AA

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

Contraste del texto mostrado: 17.06: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.

#e6e6fa / #ffffff
Relación de contraste1.23: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