#EC9D78#EC9D78
#EC9D78 es un color claro y moderadamente saturado de la familia naranja. Luminancia relativa 0.433; OKLCH L 76.6% C 0.107 H 45.8°. El mejor color de texto es #000000 con contraste 9.66:1 (cumple WCAG AA).
Valores del color
| HEX | #EC9D78 |
|---|---|
| RGB | rgb(236, 157, 120) |
| HSL | hsl(19, 75%, 70%) |
| HSV | hsv(19, 49%, 93%) |
| CMYK | cmyk(0%, 33.5%, 49.2%, 7.5%) |
| CIE-LAB | lab(71.76, 25.45, 31.37) |
| CIE-LCH | lch(71.76, 40.39, 50.94°) |
| OKLab | oklab(76.61% 0.075 0.077) |
| OKLCH | oklch(76.61% 0.107 45.8) |
| XYZ | xyz(50.0420, 43.3069, 23.4891) |
| Luminance | 0.4330 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Colores con nombre más cercanos
Lightsalmon
#FFA07A
ΔE00 3.53
Darksalmon
#E9967A
ΔE00 3.54
Pinkish Tan
#D99B82
ΔE00 4.62
Peach (survey)
#FFB07C
ΔE00 6.44
Light Salmon
#FEA993
ΔE00 6.65
Pale Salmon
#FFB19A
ΔE00 7.09
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#EC9D78 #78C7EC
analogous
#EC788D #EC9D78 #ECD778
triadic
#EC9D78 #78EC9D #9D78EC
tetradic
#EC9D78 #8DEC78 #78C7EC #D778EC
square
#EC9D78 #8DEC78 #78C7EC #D778EC
split-complementary
#EC9D78 #78ECD7 #788DEC
monochromatic
#CD551D #E47642 #EC9D78 #F4C4AE #FBEBE3
Accesibilidad y contraste
On white
2.17
#EC9D78 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.66
#EC9D78 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #EC9D78
9.66:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##EC9D78 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##EC9D78 | 1.00 | 2.17 | 9.66 | 9.66 |
| #FFFFFF | 2.17 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.66 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.66 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#B2A675
Deuteranopia (green-blind)
#C5B678
Tritanopia (blue-blind)
#FE8F94
Achromatopsia (no color)
#B0B0B0
Tokens de diseño y código
CSS
--color: #ec9d78; /* rgb */ color: rgb(236, 157, 120); /* oklch */ color: oklch(76.6% 0.107 45.8);
Tailwind
colors: {
custom: {
50: '#f5ba9f',
500: '#ec9d78',
950: '#000000',
},
}SCSS
$custom: #ec9d78; $custom-light: #f5ba9f; $custom-dark: #000000;
JSON
{
"hex": "#ec9d78",
"rgb": {
"r": 236,
"g": 157,
"b": 120
},
"hsl": {
"h": 19.138,
"s": 75.325,
"l": 69.804
},
"oklch": {
"l": 0.76611,
"c": 0.10749,
"h": 45.8
},
"luminance": 0.43303
}Semantic roles & 50–950 ramp
primary
#EC9D78
secondary
#D0E6F0
accent
#97D70E
background
#FFFBF9
surface
#FFF6F2
border
#D7D0CC
text
#17110E
muted
#85807E
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →