#BAC976#BAC976
#BAC976 es un color claro y moderadamente saturado de la familia amarillo verdoso. Luminancia relativa 0.535; OKLCH L 80.6% C 0.109 H 117.3°. El mejor color de texto es #000000 con contraste 11.70:1 (cumple WCAG AA).
Valores del color
| HEX | #BAC976 |
|---|---|
| RGB | rgb(186, 201, 118) |
| HSL | hsl(71, 43%, 63%) |
| HSV | hsv(71, 41%, 79%) |
| CMYK | cmyk(7.5%, 0%, 41.3%, 21.2%) |
| CIE-LAB | lab(78.18, -17.98, 39.71) |
| CIE-LCH | lch(78.18, 43.59, 114.36°) |
| OKLab | oklab(80.56% -0.0498 0.0965) |
| OKLCH | oklch(80.56% 0.109 117.3) |
| XYZ | xyz(44.4066, 53.5207, 25.1272) |
| Luminance | 0.5352 (WCAG relative) |
| Temperature | warm |
| Family | yellow-green |
Colores con nombre más cercanos
Greenish Tan
#BCCB7A
ΔE00 0.65
Pale Olive
#B9CC81
ΔE00 2.09
Light Olive
#ACBF69
ΔE00 3.02
Greenish Beige
#C9D179
ΔE00 3.08
Tan Green
#A9BE70
ΔE00 3.63
Pale Olive Green
#B1D27B
ΔE00 4.17
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#BAC976 #8576C9
analogous
#C9AE76 #BAC976 #91C976
triadic
#BAC976 #76BAC9 #C976BA
tetradic
#BAC976 #76C9AE #8576C9 #C97691
square
#BAC976 #76C9AE #8576C9 #C97691
split-complementary
#BAC976 #7691C9 #AE76C9
monochromatic
#7E8D38 #A4B84A #BAC976 #D0DAA2 #E6ECCE
Accesibilidad y contraste
On white
1.79
#BAC976 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
11.70
#BAC976 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #BAC976
11.70:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##BAC976 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##BAC976 | 1.00 | 1.79 | 11.70 | 11.70 |
| #FFFFFF | 1.79 | 1.00 | 21.00 | 21.00 |
| #000000 | 11.70 | 21.00 | 1.00 | 1.00 |
| ##000000 | 11.70 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#D3C170
Deuteranopia (green-blind)
#D2C27A
Tritanopia (blue-blind)
#C2C1B5
Achromatopsia (no color)
#C1C1C1
Tokens de diseño y código
CSS
--color: #bac976; /* rgb */ color: rgb(186, 201, 118); /* oklch */ color: oklch(80.6% 0.109 117.3);
Tailwind
colors: {
custom: {
50: '#d0d99f',
500: '#bac976',
950: '#000000',
},
}SCSS
$custom: #bac976; $custom-light: #d0d99f; $custom-dark: #000000;
JSON
{
"hex": "#bac976",
"rgb": {
"r": 186,
"g": 201,
"b": 118
},
"hsl": {
"h": 70.843,
"s": 43.455,
"l": 62.549
},
"oklch": {
"l": 0.80561,
"c": 0.10858,
"h": 117.3
},
"luminance": 0.5352
}Semantic roles & 50–950 ramp
primary
#BAC976
secondary
#5C4F94
accent
#2FB747
background
#FEFEFC
surface
#FBFBF5
border
#D4D4CF
text
#14140E
muted
#83837F
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →