#BD876E#BD876E
#BD876E es un color claro y moderadamente saturado de la familia naranja. Luminancia relativa 0.293; OKLCH L 67.1% C 0.076 H 45.8°. El mejor color de texto es #000000 con contraste 6.85:1 (cumple WCAG AA).
Valores del color
| HEX | #BD876E |
|---|---|
| RGB | rgb(189, 135, 110) |
| HSL | hsl(19, 37%, 59%) |
| HSV | hsv(19, 42%, 74%) |
| CMYK | cmyk(0%, 28.6%, 41.8%, 25.9%) |
| CIE-LAB | lab(61.02, 17.52, 21.65) |
| CIE-LCH | lch(61.02, 27.85, 51.02°) |
| OKLab | oklab(67.06% 0.0528 0.0543) |
| OKLCH | oklch(67.06% 0.076 45.8) |
| XYZ | xyz(32.4660, 29.2747, 18.6894) |
| Luminance | 0.2927 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Colores con nombre más cercanos
Pinkish Tan
#D99B82
ΔE00 6.99
Pinkish Brown
#B17261
ΔE00 7.47
Dark Peach
#DE7E5D
ΔE00 8.16
Terracotta
#C96F4A
ΔE00 8.75
Brownish Pink
#C27E79
ΔE00 8.98
Pale Brown
#B1916E
ΔE00 9.01
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#BD876E #6EA4BD
analogous
#BD6E7C #BD876E #BDAE6E
triadic
#BD876E #6EBD87 #876EBD
tetradic
#BD876E #7CBD6E #6EA4BD #AE6EBD
square
#BD876E #7CBD6E #6EA4BD #AE6EBD
split-complementary
#BD876E #6EBDAE #6E7CBD
monochromatic
#794C37 #A3674A #BD876E #D0AA98 #E3CDC2
Accesibilidad y contraste
On white
3.06
#BD876E on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.85
#BD876E on #000000
AA ✓AA large ✓AAA ✗
Mejor color de texto
#000000 on #BD876E
6.85:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##BD876E | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##BD876E | 1.00 | 3.06 | 6.85 | 6.85 |
| #FFFFFF | 3.06 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.85 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.85 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#958C6C
Deuteranopia (green-blind)
#A2986E
Tritanopia (blue-blind)
#CA7E80
Achromatopsia (no color)
#939393
Tokens de diseño y código
CSS
--color: #bd876e; /* rgb */ color: rgb(189, 135, 110); /* oklch */ color: oklch(67.1% 0.076 45.8);
Tailwind
colors: {
custom: {
50: '#d3aa97',
500: '#bd876e',
950: '#000000',
},
}SCSS
$custom: #bd876e; $custom-light: #d3aa97; $custom-dark: #000000;
JSON
{
"hex": "#bd876e",
"rgb": {
"r": 189,
"g": 135,
"b": 110
},
"hsl": {
"h": 18.987,
"s": 37.441,
"l": 58.627
},
"oklch": {
"l": 0.67057,
"c": 0.07572,
"h": 45.8
},
"luminance": 0.29273
}Semantic roles & 50–950 ramp
primary
#BD876E
secondary
#B4C9D3
accent
#A9CD5A
background
#FDFAF9
surface
#FAF4F2
border
#D3CECC
text
#14100D
muted
#837F7E
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →