#DD9D7A#DD9D7A
#DD9D7A es un color claro y moderadamente saturado de la familia naranja. Luminancia relativa 0.409; OKLCH L 75.0% C 0.091 H 49.6°. El mejor color de texto es #000000 con contraste 9.18:1 (cumple WCAG AA).
Valores del color
| HEX | #DD9D7A |
|---|---|
| RGB | rgb(221, 157, 122) |
| HSL | hsl(21, 59%, 67%) |
| HSV | hsv(21, 45%, 87%) |
| CMYK | cmyk(0%, 29%, 44.8%, 13.3%) |
| CIE-LAB | lab(70.10, 19.69, 27.79) |
| CIE-LCH | lch(70.10, 34.06, 54.67°) |
| OKLab | oklab(74.96% 0.0587 0.069) |
| OKLCH | oklch(74.96% 0.091 49.6) |
| XYZ | xyz(45.3907, 40.8944, 23.9113) |
| Luminance | 0.4089 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Colores con nombre más cercanos
Pinkish Tan
#D99B82
ΔE00 3.34
Darksalmon
#E9967A
ΔE00 5.24
Lightsalmon
#FFA07A
ΔE00 6.69
Peach (survey)
#FFB07C
ΔE00 7.43
Sandybrown
#F4A460
ΔE00 8.33
Light Salmon
#FEA993
ΔE00 8.60
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#DD9D7A #7ABADD
analogous
#DD7A89 #DD9D7A #DDCE7A
triadic
#DD9D7A #7ADD9D #9D7ADD
tetradic
#DD9D7A #89DD7A #7ABADD #CE7ADD
square
#DD9D7A #89DD7A #7ABADD #CE7ADD
split-complementary
#DD9D7A #7ADDCE #7A89DD
monochromatic
#B05B2D #D17949 #DD9D7A #E9C1AB #F6E5DB
Accesibilidad y contraste
On white
2.29
#DD9D7A on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.18
#DD9D7A on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #DD9D7A
9.18:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##DD9D7A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##DD9D7A | 1.00 | 2.29 | 9.18 | 9.18 |
| #FFFFFF | 2.29 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.18 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.18 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#AEA377
Deuteranopia (green-blind)
#BDB17A
Tritanopia (blue-blind)
#ED9294
Achromatopsia (no color)
#ABABAB
Tokens de diseño y código
CSS
--color: #dd9d7a; /* rgb */ color: rgb(221, 157, 122); /* oklch */ color: oklch(75.0% 0.091 49.6);
Tailwind
colors: {
custom: {
50: '#eabaa0',
500: '#dd9d7a',
950: '#000000',
},
}SCSS
$custom: #dd9d7a; $custom-light: #eabaa0; $custom-dark: #000000;
JSON
{
"hex": "#dd9d7a",
"rgb": {
"r": 221,
"g": 157,
"b": 122
},
"hsl": {
"h": 21.212,
"s": 59.281,
"l": 67.255
},
"oklch": {
"l": 0.74963,
"c": 0.09057,
"h": 49.6
},
"luminance": 0.40891
}Semantic roles & 50–950 ramp
primary
#DD9D7A
secondary
#CADEE9
accent
#8BC71F
background
#FEFBF9
surface
#FDF6F2
border
#D5D0CC
text
#16110F
muted
#84807E
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →