#B99A77#B99A77
#B99A77 es un color claro y moderadamente saturado de la familia naranja. Luminancia relativa 0.348; OKLCH L 70.6% C 0.061 H 70.0°. El mejor color de texto es #000000 con contraste 7.95:1 (cumple WCAG AA).
Valores del color
| HEX | #B99A77 |
|---|---|
| RGB | rgb(185, 154, 119) |
| HSL | hsl(32, 32%, 60%) |
| HSV | hsv(32, 36%, 73%) |
| CMYK | cmyk(0%, 16.8%, 35.7%, 27.5%) |
| CIE-LAB | lab(65.56, 6.47, 22.70) |
| CIE-LCH | lch(65.56, 23.60, 74.10°) |
| OKLab | oklab(70.56% 0.0208 0.057) |
| OKLCH | oklch(70.56% 0.061 70) |
| XYZ | xyz(34.8938, 34.7589, 22.3203) |
| Luminance | 0.3476 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Colores con nombre más cercanos
Pale Brown
#B1916E
ΔE00 2.79
Camel
#C19A6B
ΔE00 3.49
Taupe (survey)
#B9A281
ΔE00 3.52
Dust
#B2996E
ΔE00 4.02
Mushroom
#BA9E88
ΔE00 4.66
Dark Beige
#AC9362
ΔE00 6.01
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#B99A77 #7796B9
analogous
#B97977 #B99A77 #B7B977
triadic
#B99A77 #77B99A #9A77B9
tetradic
#B99A77 #77B979 #7796B9 #B977B7
square
#B99A77 #77B979 #7796B9 #B977B7
split-complementary
#B99A77 #77B7B9 #7977B9
monochromatic
#785D3E #A07C53 #B99A77 #CEB89F #E3D6C8
Accesibilidad y contraste
On white
2.64
#B99A77 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.95
#B99A77 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #B99A77
7.95:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##B99A77 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##B99A77 | 1.00 | 2.64 | 7.95 | 7.95 |
| #FFFFFF | 2.64 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.95 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.95 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#A59B75
Deuteranopia (green-blind)
#ACA278
Tritanopia (blue-blind)
#C49391
Achromatopsia (no color)
#9F9F9F
Tokens de diseño y código
CSS
--color: #b99a77; /* rgb */ color: rgb(185, 154, 119); /* oklch */ color: oklch(70.6% 0.061 70.0);
Tailwind
colors: {
custom: {
50: '#cfb79e',
500: '#b99a77',
950: '#000000',
},
}SCSS
$custom: #b99a77; $custom-light: #cfb79e; $custom-dark: #000000;
JSON
{
"hex": "#b99a77",
"rgb": {
"r": 185,
"g": 154,
"b": 119
},
"hsl": {
"h": 31.818,
"s": 32.039,
"l": 59.608
},
"oklch": {
"l": 0.70555,
"c": 0.06069,
"h": 70
},
"luminance": 0.34757
}Semantic roles & 50–950 ramp
primary
#B99A77
secondary
#B9C5D3
accent
#91C860
background
#FCFBF9
surface
#F9F6F2
border
#D2D0CC
text
#14110E
muted
#82807E
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →