#FCB88F#FCB88F
#FCB88F es un color muy claro y moderadamente saturado de la familia naranja. Luminancia relativa 0.570; OKLCH L 83.6% C 0.096 H 52.1°. El mejor color de texto es #000000 con contraste 12.39:1 (cumple WCAG AA).
Valores del color
| HEX | #FCB88F |
|---|---|
| RGB | rgb(252, 184, 143) |
| HSL | hsl(23, 95%, 77%) |
| HSV | hsv(23, 43%, 99%) |
| CMYK | cmyk(0%, 27%, 43.3%, 1.2%) |
| CIE-LAB | lab(80.16, 19.73, 30.51) |
| CIE-LCH | lch(80.16, 36.33, 57.12°) |
| OKLab | oklab(83.63% 0.0591 0.0758) |
| OKLCH | oklch(83.63% 0.096 52.1) |
| XYZ | xyz(62.2459, 56.9637, 33.6979) |
| Luminance | 0.5696 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Colores con nombre más cercanos
Peach (survey)
#FFB07C
ΔE00 3.31
Apricot (survey)
#FFB16D
ΔE00 6.48
Apricot
#FBCEB1
ΔE00 6.84
Pale Salmon
#FFB19A
ΔE00 7.00
Lightsalmon
#FFA07A
ΔE00 7.21
Sandybrown
#F4A460
ΔE00 7.79
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#FCB88F #8FD3FC
analogous
#FC8F9C #FCB88F #FCEF8F
triadic
#FCB88F #8FFCB8 #B88FFC
tetradic
#FCB88F #9CFC8F #8FD3FC #EF8FFC
square
#FCB88F #9CFC8F #8FD3FC #EF8FFC
split-complementary
#FCB88F #8FFCEF #8F9CFC
monochromatic
#F96C18 #FA9253 #FCB88F #FEDECB #FEECE1
Accesibilidad y contraste
On white
1.69
#FCB88F on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
12.39
#FCB88F on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #FCB88F
12.39:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##FCB88F | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##FCB88F | 1.00 | 1.69 | 12.39 | 12.39 |
| #FFFFFF | 1.69 | 1.00 | 21.00 | 21.00 |
| #000000 | 12.39 | 21.00 | 1.00 | 1.00 |
| ##000000 | 12.39 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#CBBE8C
Deuteranopia (green-blind)
#DBCD8F
Tritanopia (blue-blind)
#FFACAD
Achromatopsia (no color)
#C7C7C7
Tokens de diseño y código
CSS
--color: #fcb88f; /* rgb */ color: rgb(252, 184, 143); /* oklch */ color: oklch(83.6% 0.096 52.1);
Tailwind
colors: {
custom: {
50: '#ffcdb0',
500: '#fcb88f',
950: '#000000',
},
}SCSS
$custom: #fcb88f; $custom-light: #ffcdb0; $custom-dark: #000000;
JSON
{
"hex": "#fcb88f",
"rgb": {
"r": 252,
"g": 184,
"b": 143
},
"hsl": {
"h": 22.569,
"s": 94.783,
"l": 77.451
},
"oklch": {
"l": 0.83634,
"c": 0.09612,
"h": 52.1
},
"luminance": 0.5696
}Semantic roles & 50–950 ramp
primary
#FCB88F
secondary
#53A9DC
accent
#8FE600
background
#FFFEFD
surface
#FFFAF7
border
#D7D3D0
text
#181310
muted
#868381
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →