#FAF2BA#FAF2BA
#FAF2BA es un color muy claro y moderadamente saturado de la familia amarillo. Luminancia relativa 0.874; OKLCH L 95.4% C 0.072 H 100.8°. El mejor color de texto es #000000 con contraste 18.47:1 (cumple WCAG AA).
Valores del color
| HEX | #FAF2BA |
|---|---|
| RGB | rgb(250, 242, 186) |
| HSL | hsl(53, 86%, 85%) |
| HSV | hsv(53, 26%, 98%) |
| CMYK | cmyk(0%, 3.2%, 25.6%, 2%) |
| CIE-LAB | lab(94.90, -5.84, 28.06) |
| CIE-LCH | lch(94.90, 28.66, 101.76°) |
| OKLab | oklab(95.4% -0.0136 0.071) |
| OKLCH | oklch(95.4% 0.072 100.8) |
| XYZ | xyz(80.0396, 87.3749, 59.0935) |
| Luminance | 0.8737 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Colores con nombre más cercanos
Egg Shell
#FFFCC4
ΔE00 2.41
Light Tan
#FBEEAC
ΔE00 2.62
Palegoldenrod
#EEE8AA
ΔE00 2.74
Vanilla
#F3E5AB
ΔE00 3.19
Lemonchiffon
#FFFACD
ΔE00 3.21
Cream (survey)
#FFFFC2
ΔE00 3.44
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#FAF2BA #BAC2FA
analogous
#FAD2BA #FAF2BA #E2FABA
triadic
#FAF2BA #BAFAF2 #F2BAFA
tetradic
#FAF2BA #BAFAD2 #BAC2FA #FABAE2
square
#FAF2BA #BAFAD2 #BAC2FA #FABAE2
split-complementary
#FAF2BA #BAE2FA #D2BAFA
monochromatic
#F2DC48 #F6E781 #FAF2BA #FDFAE2 #FDFAE2
Accesibilidad y contraste
On white
1.14
#FAF2BA on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
18.47
#FAF2BA on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #FAF2BA
18.47:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##FAF2BA | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##FAF2BA | 1.00 | 1.14 | 18.47 | 18.47 |
| #FFFFFF | 1.14 | 1.00 | 21.00 | 21.00 |
| #000000 | 18.47 | 21.00 | 1.00 | 1.00 |
| ##000000 | 18.47 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#FDEEB6
Deuteranopia (green-blind)
#FFF2BC
Tritanopia (blue-blind)
#FFEAE3
Achromatopsia (no color)
#F0F0F0
Tokens de diseño y código
CSS
--color: #faf2ba; /* rgb */ color: rgb(250, 242, 186); /* oklch */ color: oklch(95.4% 0.072 100.8);
Tailwind
colors: {
custom: {
50: '#fcf6cf',
500: '#faf2ba',
950: '#000000',
},
}SCSS
$custom: #faf2ba; $custom-light: #fcf6cf; $custom-dark: #000000;
JSON
{
"hex": "#faf2ba",
"rgb": {
"r": 250,
"g": 242,
"b": 186
},
"hsl": {
"h": 52.5,
"s": 86.486,
"l": 85.49
},
"oklch": {
"l": 0.95396,
"c": 0.07226,
"h": 100.8
},
"luminance": 0.87373
}Semantic roles & 50–950 ramp
primary
#FAF2BA
secondary
#7A86DE
accent
#1FE302
background
#FFFFFE
surface
#FFFEFB
border
#D7D6D4
text
#171713
muted
#858583
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →