#F79A64#F79A64
#F79A64 is a light, vivid orange. Relative luminance 0.438; OKLCH L 77.1% C 0.132 H 50.0°. Best body text is #000000 at 9.76:1 contrast (WCAG AA passes).
Color values
| HEX | #F79A64 |
|---|---|
| RGB | rgb(247, 154, 100) |
| HSL | hsl(22, 90%, 68%) |
| HSV | hsv(22, 60%, 97%) |
| CMYK | cmyk(0%, 37.7%, 59.5%, 3.1%) |
| CIE-LAB | lab(72.10, 29.76, 42.62) |
| CIE-LCH | lch(72.10, 51.98, 55.08°) |
| OKLab | oklab(77.06% 0.0846 0.1008) |
| OKLCH | oklch(77.06% 0.132 50) |
| XYZ | xyz(52.2173, 43.8104, 17.7603) |
| Luminance | 0.4380 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Pastel Orange
#FF964F
ΔE00 3.50
Orangeish
#FD8D49
ΔE00 4.07
Faded Orange
#F0944D
ΔE00 4.46
Lightsalmon
#FFA07A
ΔE00 5.00
Peach (survey)
#FFB07C
ΔE00 5.48
Sandybrown
#F4A460
ΔE00 5.53
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#F79A64 #64C1F7
analogous
#F76477 #F79A64 #F7E464
triadic
#F79A64 #64F79A #9A64F7
tetradic
#F79A64 #77F764 #64C1F7 #E464F7
square
#F79A64 #77F764 #64C1F7 #E464F7
split-complementary
#F79A64 #64F7E4 #6477F7
monochromatic
#D6550B #F4742A #F79A64 #FAC09E #FDE6D8
Accessibility & contrast
On white
2.15
#F79A64 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.76
#F79A64 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #F79A64
9.76:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##F79A64 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F79A64 | 1.00 | 2.15 | 9.76 | 9.76 |
| #FFFFFF | 2.15 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.76 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.76 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B4A45F
Deuteranopia (green-blind)
#CAB964
Tritanopia (blue-blind)
#FF888D
Achromatopsia (no color)
#B1B1B1
Design tokens & code
CSS
--color: #f79a64; /* rgb */ color: rgb(247, 154, 100); /* oklch */ color: oklch(77.1% 0.132 50.0);
Tailwind
colors: {
custom: {
50: '#feb891',
500: '#f79a64',
950: '#000000',
},
}SCSS
$custom: #f79a64; $custom-light: #feb891; $custom-dark: #000000;
JSON
{
"hex": "#f79a64",
"rgb": {
"r": 247,
"g": 154,
"b": 100
},
"hsl": {
"h": 22.041,
"s": 90.184,
"l": 68.039
},
"oklch": {
"l": 0.77058,
"c": 0.13158,
"h": 50
},
"luminance": 0.43805
}Semantic roles & 50–950 ramp
primary
#F79A64
secondary
#C5E1F2
accent
#91E600
background
#FFFBF9
surface
#FFF6F1
border
#D7D0CB
text
#19110D
muted
#87807E