#3F2703#3F2703
#3F2703 is a dark, moderate orange. Relative luminance 0.025; OKLCH L 29.6% C 0.060 H 72.0°. Best body text is #FFFFFF at 13.97:1 contrast (WCAG AA passes).
Color values
| HEX | #3F2703 |
|---|---|
| RGB | rgb(63, 39, 3) |
| HSL | hsl(36, 91%, 13%) |
| HSV | hsv(36, 95%, 25%) |
| CMYK | cmyk(0%, 38.1%, 95.2%, 75.3%) |
| CIE-LAB | lab(17.98, 7.79, 24.94) |
| CIE-LCH | lch(17.98, 26.13, 72.65°) |
| OKLab | oklab(29.58% 0.0186 0.0573) |
| OKLCH | oklch(29.58% 0.06 72) |
| XYZ | xyz(2.7921, 2.5146, 0.4245) |
| Luminance | 0.0251 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Dark Brown
#341C02
ΔE00 5.32
Chocolate (survey)
#3D1C02
ΔE00 6.86
Espresso
#4B382A
ΔE00 8.91
Chocolate Brown
#411900
ΔE00 9.12
Brown (survey)
#653700
ΔE00 9.98
Mud Brown
#60460F
ΔE00 11.27
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#3F2703 #031B3F
analogous
#3F0903 #3F2703 #393F03
triadic
#3F2703 #033F27 #27033F
tetradic
#3F2703 #033F09 #031B3F #3F0339
square
#3F2703 #033F09 #031B3F #3F0339
split-complementary
#3F2703 #03393F #09033F
monochromatic
#1D1201 #1D1201 #3F2703 #794B06 #B46F09
Accessibility & contrast
On white
13.97
#3F2703 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.50
#3F2703 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #3F2703
13.97:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##3F2703 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##3F2703 | 1.00 | 13.97 | 1.50 | 13.97 |
| #FFFFFF | 13.97 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.50 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 13.97 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#2F2900
Deuteranopia (green-blind)
#352E04
Tritanopia (blue-blind)
#462120
Achromatopsia (no color)
#2C2C2C
Design tokens & code
CSS
--color: #3f2703; /* rgb */ color: rgb(63, 39, 3); /* oklch */ color: oklch(29.6% 0.060 72.0);
Tailwind
colors: {
custom: {
50: '#776148',
500: '#3f2703',
950: '#000000',
},
}SCSS
$custom: #3f2703; $custom-light: #776148; $custom-dark: #000000;
JSON
{
"hex": "#3f2703",
"rgb": {
"r": 63,
"g": 39,
"b": 3
},
"hsl": {
"h": 36,
"s": 90.909,
"l": 12.941
},
"oklch": {
"l": 0.29582,
"c": 0.0602,
"h": 72
},
"luminance": 0.02514
}Semantic roles & 50–950 ramp
primary
#3F2703
secondary
#1D4581
accent
#7EFF29
background
#F7F5F4
surface
#EEE9E6
border
#C9C5C2
text
#090500
muted
#7B7977