#F893E7#F893E7
#F893E7 es un color claro y vivo de la familia rosa. Luminancia relativa 0.466; OKLCH L 79.5% C 0.159 H 333.4°. El mejor color de texto es #000000 con contraste 10.32:1 (cumple WCAG AA).
Valores del color
| HEX | #F893E7 |
|---|---|
| RGB | rgb(248, 147, 231) |
| HSL | hsl(310, 88%, 77%) |
| HSV | hsv(310, 41%, 97%) |
| CMYK | cmyk(0%, 40.7%, 6.9%, 2.7%) |
| CIE-LAB | lab(73.93, 49.62, -26.34) |
| CIE-LCH | lch(73.93, 56.18, 332.04°) |
| OKLab | oklab(79.52% 0.1419 -0.0711) |
| OKLCH | oklch(79.52% 0.159 333.4) |
| XYZ | xyz(63.5685, 46.5969, 81.2316) |
| Luminance | 0.4659 (WCAG relative) |
| Temperature | neutral |
| Family | pink |
Colores con nombre más cercanos
Violet (CSS)
#EE82EE
ΔE00 5.07
Lavender Pink
#DD85D7
ΔE00 5.38
Bubblegum Pink
#FE83CC
ΔE00 5.73
Plum
#DDA0DD
ΔE00 5.98
Purply Pink
#F075E6
ΔE00 6.61
Pink (survey)
#FF81C0
ΔE00 8.08
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#F893E7 #93F8A4
analogous
#D793F8 #F893E7 #F893B5
triadic
#F893E7 #E7F893 #93E7F8
tetradic
#F893E7 #F8D793 #93F8A4 #93B5F8
square
#F893E7 #F8D793 #93F8A4 #93B5F8
split-complementary
#F893E7 #B5F893 #93F8D7
monochromatic
#F120CD #F45ADA #F893E7 #FCCCF4 #FDE2F9
Accesibilidad y contraste
On white
2.04
#F893E7 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
10.32
#F893E7 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #F893E7
10.32:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##F893E7 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F893E7 | 1.00 | 2.04 | 10.32 | 10.32 |
| #FFFFFF | 2.04 | 1.00 | 21.00 | 21.00 |
| #000000 | 10.32 | 21.00 | 1.00 | 1.00 |
| ##000000 | 10.32 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#92ADEA
Deuteranopia (green-blind)
#ACBBE4
Tritanopia (blue-blind)
#FF98B3
Achromatopsia (no color)
#B6B6B6
Tokens de diseño y código
CSS
--color: #f893e7; /* rgb */ color: rgb(248, 147, 231); /* oklch */ color: oklch(79.5% 0.159 333.4);
Tailwind
colors: {
custom: {
50: '#fcb5ee',
500: '#f893e7',
950: '#000000',
},
}SCSS
$custom: #f893e7; $custom-light: #fcb5ee; $custom-dark: #000000;
JSON
{
"hex": "#f893e7",
"rgb": {
"r": 248,
"g": 147,
"b": 231
},
"hsl": {
"h": 310.099,
"s": 87.826,
"l": 77.451
},
"oklch": {
"l": 0.79523,
"c": 0.15874,
"h": 333.4
},
"luminance": 0.46593
}Semantic roles & 50–950 ramp
primary
#F893E7
secondary
#D6F5DB
accent
#E42701
background
#FFFBFE
surface
#FFF6FD
border
#D7D0D5
text
#181116
muted
#868084
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →