#A16C19#A16C19
#A16C19 es un color medio y moderadamente saturado de la familia naranja. Luminancia relativa 0.184; OKLCH L 57.4% C 0.114 H 72.4°. El mejor color de texto es #000000 con contraste 4.67:1 (cumple WCAG AA).
Valores del color
| HEX | #A16C19 |
|---|---|
| RGB | rgb(161, 108, 25) |
| HSL | hsl(37, 73%, 36%) |
| HSV | hsv(37, 84%, 63%) |
| CMYK | cmyk(0%, 32.9%, 84.5%, 36.9%) |
| CIE-LAB | lab(49.95, 14.31, 50.72) |
| CIE-LCH | lch(49.95, 52.70, 74.24°) |
| OKLab | oklab(57.38% 0.0344 0.1085) |
| OKLCH | oklch(57.38% 0.114 72.4) |
| XYZ | xyz(20.2376, 18.3742, 3.4003) |
| Luminance | 0.1837 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Colores con nombre más cercanos
Caramel (survey)
#AF6F09
ΔE00 3.59
Raw Sienna
#9A6200
ΔE00 3.69
Leather
#AC7434
ΔE00 4.91
Umber (survey)
#B26400
ΔE00 6.29
Bronze (survey)
#A87900
ΔE00 6.38
Golden Brown
#B27A01
ΔE00 6.48
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#A16C19 #194EA1
analogous
#A12819 #A16C19 #92A119
triadic
#A16C19 #19A16C #6C19A1
tetradic
#A16C19 #19A128 #194EA1 #A11992
square
#A16C19 #19A128 #194EA1 #A11992
split-complementary
#A16C19 #1992A1 #2819A1
monochromatic
#372509 #6C4811 #A16C19 #D69021 #E4AA50
Accesibilidad y contraste
On white
4.49
#A16C19 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.67
#A16C19 on #000000
AA ✓AA large ✓AAA ✗
Mejor color de texto
#000000 on #A16C19
4.67:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##A16C19 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##A16C19 | 1.00 | 4.49 | 4.67 | 4.67 |
| #FFFFFF | 4.49 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.67 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.67 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#7E6F05
Deuteranopia (green-blind)
#8B7C1C
Tritanopia (blue-blind)
#B05E5D
Achromatopsia (no color)
#777777
Tokens de diseño y código
CSS
--color: #a16c19; /* rgb */ color: rgb(161, 108, 25); /* oklch */ color: oklch(57.4% 0.114 72.4);
Tailwind
colors: {
custom: {
50: '#c2965e',
500: '#a16c19',
950: '#000000',
},
}SCSS
$custom: #a16c19; $custom-light: #c2965e; $custom-dark: #000000;
JSON
{
"hex": "#a16c19",
"rgb": {
"r": 161,
"g": 108,
"b": 25
},
"hsl": {
"h": 36.618,
"s": 73.118,
"l": 36.471
},
"oklch": {
"l": 0.57375,
"c": 0.11377,
"h": 72.4
},
"luminance": 0.18372
}Semantic roles & 50–950 ramp
primary
#A16C19
secondary
#4F7EC6
accent
#80F038
background
#FCF9F5
surface
#F9F1E9
border
#D2CBC5
text
#130D05
muted
#827E79
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →