#D4A290#D4A290
#D4A290 es un color claro y moderadamente saturado de la familia naranja. Luminancia relativa 0.419; OKLCH L 75.4% C 0.065 H 40.7°. El mejor color de texto es #000000 con contraste 9.37:1 (cumple WCAG AA).
Valores del color
| HEX | #D4A290 |
|---|---|
| RGB | rgb(212, 162, 144) |
| HSL | hsl(16, 44%, 70%) |
| HSV | hsv(16, 32%, 83%) |
| CMYK | cmyk(0%, 23.6%, 32.1%, 16.9%) |
| CIE-LAB | lab(70.77, 16.00, 16.52) |
| CIE-LCH | lch(70.77, 22.99, 45.91°) |
| OKLab | oklab(75.41% 0.0493 0.0424) |
| OKLCH | oklch(75.41% 0.065 40.7) |
| XYZ | xyz(45.1069, 41.8537, 32.0828) |
| Luminance | 0.4185 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Colores con nombre más cercanos
Pinkish Tan
#D99B82
ΔE00 3.50
Darksalmon
#E9967A
ΔE00 7.00
Blush (survey)
#F29E8E
ΔE00 7.31
Pinkish Grey
#C8ACA9
ΔE00 8.11
Pale Salmon
#FFB19A
ΔE00 8.14
Light Salmon
#FEA993
ΔE00 8.16
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#D4A290 #90C2D4
analogous
#D490A0 #D4A290 #D4C490
triadic
#D4A290 #90D4A2 #A290D4
tetradic
#D4A290 #A0D490 #90C2D4 #C490D4
square
#D4A290 #A0D490 #90C2D4 #C490D4
split-complementary
#D4A290 #90D4C4 #90A0D4
monochromatic
#A85D41 #C37D64 #D4A290 #E5C7BC #F6ECE8
Accesibilidad y contraste
On white
2.24
#D4A290 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.37
#D4A290 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #D4A290
9.37:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##D4A290 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##D4A290 | 1.00 | 2.24 | 9.37 | 9.37 |
| #FFFFFF | 2.24 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.37 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.37 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#AEA78F
Deuteranopia (green-blind)
#BAB190
Tritanopia (blue-blind)
#E09B9D
Achromatopsia (no color)
#ADADAD
Tokens de diseño y código
CSS
--color: #d4a290; /* rgb */ color: rgb(212, 162, 144); /* oklch */ color: oklch(75.4% 0.065 40.7);
Tailwind
colors: {
custom: {
50: '#e2bdb0',
500: '#d4a290',
950: '#000000',
},
}SCSS
$custom: #d4a290; $custom-light: #e2bdb0; $custom-dark: #000000;
JSON
{
"hex": "#d4a290",
"rgb": {
"r": 212,
"g": 162,
"b": 144
},
"hsl": {
"h": 15.882,
"s": 44.156,
"l": 69.804
},
"oklch": {
"l": 0.75405,
"c": 0.06496,
"h": 40.7
},
"luminance": 0.41851
}Semantic roles & 50–950 ramp
primary
#D4A290
secondary
#D6E4EA
accent
#93B72E
background
#FEFBFA
surface
#FCF6F4
border
#D5D0CE
text
#151210
muted
#84817F
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →