#F7B465#F7B465
#F7B465 is a light, vivid orange. Relative luminance 0.534; OKLCH L 81.7% C 0.124 H 69.1°. Best body text is #000000 at 11.67:1 contrast (WCAG AA passes).
Color values
| HEX | #F7B465 |
|---|---|
| RGB | rgb(247, 180, 101) |
| HSL | hsl(32, 90%, 68%) |
| HSV | hsv(32, 59%, 97%) |
| CMYK | cmyk(0%, 27.1%, 59.1%, 3.1%) |
| CIE-LAB | lab(78.09, 16.18, 49.28) |
| CIE-LCH | lch(78.09, 51.87, 71.83°) |
| OKLab | oklab(81.71% 0.0441 0.1155) |
| OKLCH | oklch(81.71% 0.124 69.1) |
| XYZ | xyz(57.0313, 53.3605, 19.6052) |
| Luminance | 0.5336 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Butterscotch
#FDB147
ΔE00 3.94
Light Orange
#FDAA48
ΔE00 4.00
Apricot (survey)
#FFB16D
ΔE00 4.35
Pale Orange
#FFA756
ΔE00 5.26
Sandybrown
#F4A460
ΔE00 5.82
Mango
#FFA62B
ΔE00 6.33
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#F7B465 #65A8F7
analogous
#F76B65 #F7B465 #F1F765
triadic
#F7B465 #65F7B4 #B465F7
tetradic
#F7B465 #65F76B #65A8F7 #F765F1
square
#F7B465 #65F76B #65A8F7 #F765F1
split-complementary
#F7B465 #65F1F7 #6B65F7
monochromatic
#D6790B #F4982B #F7B465 #FAD09F #FDEDD9
Accessibility & contrast
On white
1.80
#F7B465 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
11.67
#F7B465 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #F7B465
11.67:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##F7B465 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F7B465 | 1.00 | 1.80 | 11.67 | 11.67 |
| #FFFFFF | 1.80 | 1.00 | 21.00 | 21.00 |
| #000000 | 11.67 | 21.00 | 1.00 | 1.00 |
| ##000000 | 11.67 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#CBB85E
Deuteranopia (green-blind)
#DBC767
Tritanopia (blue-blind)
#FFA4A2
Achromatopsia (no color)
#C1C1C1
Design tokens & code
CSS
--color: #f7b465; /* rgb */ color: rgb(247, 180, 101); /* oklch */ color: oklch(81.7% 0.124 69.1);
Tailwind
colors: {
custom: {
50: '#feca93',
500: '#f7b465',
950: '#000000',
},
}SCSS
$custom: #f7b465; $custom-light: #feca93; $custom-dark: #000000;
JSON
{
"hex": "#f7b465",
"rgb": {
"r": 247,
"g": 180,
"b": 101
},
"hsl": {
"h": 32.466,
"s": 90.123,
"l": 68.235
},
"oklch": {
"l": 0.81708,
"c": 0.12364,
"h": 69.1
},
"luminance": 0.53356
}Semantic roles & 50–950 ramp
primary
#F7B465
secondary
#307AD0
accent
#69E600
background
#FFFDFC
surface
#FFF9F4
border
#D7D2CE
text
#18130D
muted
#86827F