Calculada con el motor HSL existente; no es una selección editorial.
Roles de color sugeridos
Fondo
#ffffff
Tarjeta
#262626
Acento
#4d4d4d
Botón
#ffffff
Texto
#d9d9d9
Texto / Fondo: 1.41:1 — No cumple AA; alternativa #000000
Texto / Tarjeta: 10.72:1 — AA para texto normal
Texto / Botón: 1.41:1 — No cumple AA; alternativa #000000
Comprueba cada par de texto y fondo; ningún color se cambia automáticamente.
El color elegido queda bloqueado. El primer color sigue siendo la base del estudio.
El color en diseño
Ejemplos estáticos creados con colores representativos. Los tonos cercanos pueden compartir una referencia, pero la imagen no cambia con la paleta.
¿Qué distingue a este color?
El blanco es el color opaco sRGB con todos los canales al máximo. En una interfaz con muchos colores aporta una referencia neutra, sin sumar otro matiz.
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.
Úsalo en documentos, alrededor de fotos de producto o entre tarjetas de un panel. Para organizar la información, suele ser más claro recurrir al espacio y a los títulos que superponer blancos casi idénticos.
Los consejos de diseño dependen del contexto y se distinguen de los cálculos.
Qué revisar antes de usarlo
Una tarjeta blanca sobre fondo blanco no tiene un límite cromático. Si ese límite permite reconocer un control, añade espacio o un contorno suficientemente visible.
Tres matices vecinos a −30°, 0° y +30° respecto al color base.
Este color es acromático: girar su matiz no lo cambia. Prueba la armonía monocromática para variar la luminosidad.
01BASE
#ffffffrgb(255, 255, 255)oklch(0.99999999 0 0)
Relación de contraste: 21.00:1
HSL / Análoga
Valores y herramientas avanzadas
Color seleccionado / #FFFFFF
El color en números
Un color, cuatro formas de expresarlo.
HEX
#ffffff
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
OKLCH
oklch(0.99999999 0 0)
Matiz
Sin definir (acromático)
Saturación
0.00%
Luminosidad
100.00%
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.
#ffffffoklch(0.99999999 0 0)
CSS de la paleta
:root {
--palette-1: #ffffff;
}
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 / #ffffff · 21.00: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.
#ffffff / #ffffff · 1.00:1 · Texto normal · AA
Texto alternativo sugerido: #000000 (21.00:1).
Contraste del texto mostrado: 21.00: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.
El color en diseño
Ejemplos estáticos creados con colores representativos. Los tonos cercanos pueden compartir una referencia, pero la imagen no cambia con la paleta.
Vista previa de diseño interactiva
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.
#ffffff / #ffffff
Relación de contraste1.00: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.