01COMPAÑERO
#d84d74rgb(216, 77, 116)oklch(0.61863331 0.17597389 6.703117)Relación de contraste: 5.23:1
02 / COLORES COMPAÑEROS
Colores que se acompañan.
Explora otras perspectivas con las reglas del círculo cromático.
Tres matices vecinos a −30°, 0° y +30° respecto al color base.
02BASE
#d86b4drgb(216, 107, 77)oklch(0.65065789 0.14420776 36.33236)Relación de contraste: 6.13:1
03COMPAÑERO
#d8b14drgb(216, 177, 77)oklch(0.77642304 0.12567114 87.691283)Relación de contraste: 10.32:1
HSL / Análoga
Valores y herramientas avanzadas
Color seleccionado / #D86B4D
El color en números
Un color, cuatro formas de expresarlo.
HEX
#d86b4dRGB
rgb(216, 107, 77)HSL
hsl(12.95, 64.06%, 57.45%)OKLCH
oklch(0.65065789 0.14420776 36.33236)- Matiz
- 12.95°
- Saturación
- 64.06%
- Luminosidad
- 57.45%
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.
#d84d74oklch(0.61863331 0.17597389 6.703117)#d86b4doklch(0.65065789 0.14420776 36.33236)#d8b14doklch(0.77642304 0.12567114 87.691283)CSS de la paleta
:root {
--palette-1: #d84d74;
--palette-2: #d86b4d;
--palette-3: #d8b14d;
}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 / #d86b4d · 6.13:1
your-next-idea.designFORM & 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ónLa pareja de texto y fondo no alcanza AA para texto normal.
#d8b14d / #d86b4d · 1.68:1 · Texto normal · AA
Texto alternativo sugerido: #000000 (6.13:1).
Contraste del texto mostrado: 6.13: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.
#d86b4d / #ffffffRelación de contraste3.43:1
- Texto normal · AANo cumple
- Texto grande · AACumple
- Texto normal · AAANo cumple
- Texto grande · AAANo cumple