#FDF5BA#FDF5BA
#FDF5BA es un color muy claro y moderadamente saturado de la familia amarillo. Luminancia relativa 0.897; OKLCH L 96.2% C 0.076 H 101.2°. El mejor color de texto es #000000 con contraste 18.95:1 (cumple WCAG AA).
Valores del color
| HEX | #FDF5BA |
|---|---|
| RGB | rgb(253, 245, 186) |
| HSL | hsl(53, 94%, 86%) |
| HSV | hsv(53, 26%, 99%) |
| CMYK | cmyk(0%, 3.2%, 26.5%, 0.8%) |
| CIE-LAB | lab(95.89, -6.24, 29.45) |
| CIE-LCH | lch(95.89, 30.10, 101.96°) |
| OKLab | oklab(96.24% -0.0147 0.0743) |
| OKLCH | oklch(96.24% 0.076 101.2) |
| XYZ | xyz(82.0236, 89.7342, 59.4444) |
| Luminance | 0.8973 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Colores con nombre más cercanos
Egg Shell
#FFFCC4
ΔE00 2.08
Light Tan
#FBEEAC
ΔE00 2.44
Cream (survey)
#FFFFC2
ΔE00 2.92
Palegoldenrod
#EEE8AA
ΔE00 3.02
Ivory (survey)
#FFFFCB
ΔE00 3.42
Light Beige
#FFFEB6
ΔE00 3.50
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#FDF5BA #BAC2FD
analogous
#FDD3BA #FDF5BA #E3FDBA
triadic
#FDF5BA #BAFDF5 #F5BAFD
tetradic
#FDF5BA #BAFDD3 #BAC2FD #FDBAE3
square
#FDF5BA #BAFDD3 #BAC2FD #FDBAE3
split-complementary
#FDF5BA #BAE3FD #D3BAFD
monochromatic
#FAE443 #FBEC7F #FDF5BA #FEFBE1 #FEFBE1
Accesibilidad y contraste
On white
1.11
#FDF5BA on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
18.95
#FDF5BA on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #FDF5BA
18.95:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##FDF5BA | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##FDF5BA | 1.00 | 1.11 | 18.95 | 18.95 |
| #FFFFFF | 1.11 | 1.00 | 21.00 | 21.00 |
| #000000 | 18.95 | 21.00 | 1.00 | 1.00 |
| ##000000 | 18.95 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#FFF1B6
Deuteranopia (green-blind)
#FFF5BC
Tritanopia (blue-blind)
#FFEDE5
Achromatopsia (no color)
#F3F3F3
Tokens de diseño y código
CSS
--color: #fdf5ba; /* rgb */ color: rgb(253, 245, 186); /* oklch */ color: oklch(96.2% 0.076 101.2);
Tailwind
colors: {
custom: {
50: '#fef8cf',
500: '#fdf5ba',
950: '#000000',
},
}SCSS
$custom: #fdf5ba; $custom-light: #fef8cf; $custom-dark: #000000;
JSON
{
"hex": "#fdf5ba",
"rgb": {
"r": 253,
"g": 245,
"b": 186
},
"hsl": {
"h": 52.836,
"s": 94.366,
"l": 86.078
},
"oklch": {
"l": 0.96235,
"c": 0.07576,
"h": 101.2
},
"luminance": 0.89733
}Semantic roles & 50–950 ramp
primary
#FDF5BA
secondary
#7885E3
accent
#1BE600
background
#FFFFFE
surface
#FFFEFB
border
#D7D6D4
text
#181713
muted
#868583
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →