#F6A191#F6A191
#F6A191 es un color claro y moderadamente saturado de la familia rojo. Luminancia relativa 0.471; OKLCH L 78.9% C 0.105 H 31.2°. El mejor color de texto es #000000 con contraste 10.43:1 (cumple WCAG AA).
Valores del color
| HEX | #F6A191 |
|---|---|
| RGB | rgb(246, 161, 145) |
| HSL | hsl(10, 85%, 77%) |
| HSV | hsv(10, 41%, 96%) |
| CMYK | cmyk(0%, 34.6%, 41.1%, 3.5%) |
| CIE-LAB | lab(74.27, 29.72, 21.39) |
| CIE-LCH | lch(74.27, 36.61, 35.74°) |
| OKLab | oklab(78.95% 0.0895 0.0542) |
| OKLCH | oklch(78.95% 0.105 31.2) |
| XYZ | xyz(55.8643, 47.1312, 32.9375) |
| Luminance | 0.4713 (WCAG relative) |
| Temperature | warm |
| Family | red |
Colores con nombre más cercanos
Blush (survey)
#F29E8E
ΔE00 0.89
Peachy Pink
#FF9A8A
ΔE00 2.64
Light Salmon
#FEA993
ΔE00 2.84
Pale Salmon
#FFB19A
ΔE00 4.54
Darksalmon
#E9967A
ΔE00 5.43
Lightsalmon
#FFA07A
ΔE00 6.95
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#F6A191 #91E6F6
analogous
#F691B4 #F6A191 #F6D491
triadic
#F6A191 #91F6A1 #A191F6
tetradic
#F6A191 #B4F691 #91E6F6 #D491F6
square
#F6A191 #B4F691 #91E6F6 #D491F6
split-complementary
#F6A191 #91F6D4 #91B4F6
monochromatic
#ED4020 #F17158 #F6A191 #FBD1CA #FDE7E3
Accesibilidad y contraste
On white
2.01
#F6A191 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
10.43
#F6A191 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #F6A191
10.43:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##F6A191 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F6A191 | 1.00 | 2.01 | 10.43 | 10.43 |
| #FFFFFF | 2.01 | 1.00 | 21.00 | 21.00 |
| #000000 | 10.43 | 21.00 | 1.00 | 1.00 |
| ##000000 | 10.43 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#B4AC90
Deuteranopia (green-blind)
#C8BD90
Tritanopia (blue-blind)
#FF959D
Achromatopsia (no color)
#B7B7B7
Tokens de diseño y código
CSS
--color: #f6a191; /* rgb */ color: rgb(246, 161, 145); /* oklch */ color: oklch(78.9% 0.105 31.2);
Tailwind
colors: {
custom: {
50: '#fcbdb1',
500: '#f6a191',
950: '#000000',
},
}SCSS
$custom: #f6a191; $custom-light: #fcbdb1; $custom-dark: #000000;
JSON
{
"hex": "#f6a191",
"rgb": {
"r": 246,
"g": 161,
"b": 145
},
"hsl": {
"h": 9.505,
"s": 84.874,
"l": 76.667
},
"oklch": {
"l": 0.78947,
"c": 0.10463,
"h": 31.2
},
"luminance": 0.47127
}Semantic roles & 50–950 ramp
primary
#F6A191
secondary
#D6F0F5
accent
#BEE104
background
#FFFBFA
surface
#FFF6F5
border
#D7D0CF
text
#181210
muted
#86817F
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →