#BDF196#BDF196
#BDF196 es un color muy claro y vivo de la familia amarillo verdoso. Luminancia relativa 0.759; OKLCH L 90.1% C 0.130 H 132.7°. El mejor color de texto es #000000 con contraste 16.19:1 (cumple WCAG AA).
Valores del color
| HEX | #BDF196 |
|---|---|
| RGB | rgb(189, 241, 150) |
| HSL | hsl(94, 76%, 77%) |
| HSV | hsv(94, 38%, 95%) |
| CMYK | cmyk(21.6%, 0%, 37.8%, 5.5%) |
| CIE-LAB | lab(89.83, -32.19, 38.68) |
| CIE-LCH | lch(89.83, 50.32, 129.76°) |
| OKLab | oklab(90.1% -0.0881 0.0955) |
| OKLCH | oklch(90.1% 0.13 132.7) |
| XYZ | xyz(57.9454, 75.9302, 40.4513) |
| Luminance | 0.7593 (WCAG relative) |
| Temperature | warm |
| Family | yellow-green |
Colores con nombre más cercanos
Tea Green
#BDF8A3
ΔE00 2.30
Washed Out Green
#BCF5A6
ΔE00 2.75
Celery
#C1FD95
ΔE00 2.91
Pistachio (survey)
#C0FA8B
ΔE00 3.27
Pale Light Green
#B1FC99
ΔE00 3.62
Light Light Green
#C8FFB0
ΔE00 3.92
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#BDF196 #CA96F1
analogous
#EBF196 #BDF196 #96F19D
triadic
#BDF196 #96BDF1 #F196BD
tetradic
#BDF196 #96EBF1 #CA96F1 #F19D96
square
#BDF196 #96EBF1 #CA96F1 #F19D96
split-complementary
#BDF196 #9D96F1 #F196EB
monochromatic
#79E32A #9BEA60 #BDF196 #DFF8CC #EEFBE4
Accesibilidad y contraste
On white
1.30
#BDF196 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
16.19
#BDF196 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #BDF196
16.19:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##BDF196 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##BDF196 | 1.00 | 1.30 | 16.19 | 16.19 |
| #FFFFFF | 1.30 | 1.00 | 21.00 | 21.00 |
| #000000 | 16.19 | 21.00 | 1.00 | 1.00 |
| ##000000 | 16.19 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#F8E58F
Deuteranopia (green-blind)
#F0E09B
Tritanopia (blue-blind)
#BEEADA
Achromatopsia (no color)
#E2E2E2
Tokens de diseño y código
CSS
--color: #bdf196; /* rgb */ color: rgb(189, 241, 150); /* oklch */ color: oklch(90.1% 0.130 132.7);
Tailwind
colors: {
custom: {
50: '#d2f6b6',
500: '#bdf196',
950: '#000000',
},
}SCSS
$custom: #bdf196; $custom-light: #d2f6b6; $custom-dark: #000000;
JSON
{
"hex": "#bdf196",
"rgb": {
"r": 189,
"g": 241,
"b": 150
},
"hsl": {
"h": 94.286,
"s": 76.471,
"l": 76.667
},
"oklch": {
"l": 0.90104,
"c": 0.12989,
"h": 132.7
},
"luminance": 0.75931
}Semantic roles & 50–950 ramp
primary
#BDF196
secondary
#9E5DCE
accent
#0DD981
background
#FEFFFD
surface
#FBFEF8
border
#D4D6D1
text
#141711
muted
#838581
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →