#BD2175#BD2175
#BD2175 es un color medio y muy saturado de la familia rosa. Luminancia relativa 0.132; OKLCH L 53.6% C 0.200 H 354.1°. El mejor color de texto es #FFFFFF con contraste 5.77:1 (cumple WCAG AA).
Valores del color
| HEX | #BD2175 |
|---|---|
| RGB | rgb(189, 33, 117) |
| HSL | hsl(328, 70%, 44%) |
| HSV | hsv(328, 83%, 74%) |
| CMYK | cmyk(0%, 82.5%, 38.1%, 25.9%) |
| CIE-LAB | lab(43.05, 64.71, -8.09) |
| CIE-LCH | lch(43.05, 65.22, 352.87°) |
| OKLab | oklab(53.56% 0.1992 -0.0206) |
| OKLCH | oklch(53.56% 0.2 354.1) |
| XYZ | xyz(24.7427, 13.1941, 18.0699) |
| Luminance | 0.1319 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Colores con nombre más cercanos
Magenta (survey)
#C20078
ΔE00 1.81
Mediumvioletred
#C71585
ΔE00 3.39
Deep Pink
#CB0162
ΔE00 5.78
Deep Magenta
#A0025C
ΔE00 7.47
Dark Hot Pink
#D90166
ΔE00 7.57
Violet Red
#A50055
ΔE00 7.65
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#BD2175 #21BD69
analogous
#B721BD #BD2175 #BD2127
triadic
#BD2175 #75BD21 #2175BD
tetradic
#BD2175 #BDB721 #21BD69 #2127BD
square
#BD2175 #BDB721 #21BD69 #2127BD
split-complementary
#BD2175 #27BD21 #21BDB7
monochromatic
#550F34 #891855 #BD2175 #DD3E94 #E672B1
Accesibilidad y contraste
On white
5.77
#BD2175 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.64
#BD2175 on #000000
AA ✗AA large ✓AAA ✗
Mejor color de texto
#FFFFFF on #BD2175
5.77:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##BD2175 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##BD2175 | 1.00 | 5.77 | 3.64 | 5.77 |
| #FFFFFF | 5.77 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.64 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.77 | 1.00 | 21.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#445477
Deuteranopia (green-blind)
#6F7072
Tritanopia (blue-blind)
#CC0249
Achromatopsia (no color)
#666666
Tokens de diseño y código
CSS
--color: #bd2175; /* rgb */ color: rgb(189, 33, 117); /* oklch */ color: oklch(53.6% 0.200 354.1);
Tailwind
colors: {
custom: {
50: '#d6709c',
500: '#bd2175',
950: '#000000',
},
}SCSS
$custom: #bd2175; $custom-light: #d6709c; $custom-dark: #000000;
JSON
{
"hex": "#bd2175",
"rgb": {
"r": 189,
"g": 33,
"b": 117
},
"hsl": {
"h": 327.692,
"s": 70.27,
"l": 43.529
},
"oklch": {
"l": 0.53559,
"c": 0.20023,
"h": 354.1
},
"luminance": 0.13191
}Semantic roles & 50–950 ramp
primary
#BD2175
secondary
#6DCD99
accent
#ED8D3B
background
#FDF7F9
surface
#FBEDF2
border
#D4C8CC
text
#15090E
muted
#837B7E
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →