#F09442#F09442
#F09442 is a light, vivid orange. Relative luminance 0.401; OKLCH L 74.8% C 0.146 H 59.0°. Best body text is #000000 at 9.02:1 contrast (WCAG AA passes).
Color values
| HEX | #F09442 |
|---|---|
| RGB | rgb(240, 148, 66) |
| HSL | hsl(28, 85%, 60%) |
| HSV | hsv(28, 73%, 94%) |
| CMYK | cmyk(0%, 38.3%, 72.5%, 5.9%) |
| CIE-LAB | lab(69.54, 28.10, 56.09) |
| CIE-LCH | lch(69.54, 62.73, 63.39°) |
| OKLab | oklab(74.78% 0.0751 0.1251) |
| OKLCH | oklch(74.78% 0.146 59) |
| XYZ | xyz(47.5123, 40.1032, 10.3917) |
| Luminance | 0.4010 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Faded Orange
#F0944D
ΔE00 2.15
Pastel Orange
#FF964F
ΔE00 4.42
Sandybrown
#F4A460
ΔE00 4.47
Pale Orange
#FFA756
ΔE00 4.88
Darkorange
#FF8C00
ΔE00 4.96
Tangerine
#F28500
ΔE00 5.02
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#F09442 #429EF0
analogous
#F04247 #F09442 #F0EB42
triadic
#F09442 #42F094 #9442F0
tetradic
#F09442 #47F042 #429EF0 #EB42F0
square
#F09442 #47F042 #429EF0 #EB42F0
split-complementary
#F09442 #42F0EB #4247F0
monochromatic
#AA570E #E37412 #F09442 #F4B47B #F9D4B3
Accessibility & contrast
On white
2.33
#F09442 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.02
#F09442 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #F09442
9.02:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##F09442 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F09442 | 1.00 | 2.33 | 9.02 | 9.02 |
| #FFFFFF | 2.33 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.02 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.02 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B09D38
Deuteranopia (green-blind)
#C6B242
Tritanopia (blue-blind)
#FF8083
Achromatopsia (no color)
#AAAAAA
Design tokens & code
CSS
--color: #f09442; /* rgb */ color: rgb(240, 148, 66); /* oklch */ color: oklch(74.8% 0.146 59.0);
Tailwind
colors: {
custom: {
50: '#fbb47b',
500: '#f09442',
950: '#000000',
},
}SCSS
$custom: #f09442; $custom-light: #fbb47b; $custom-dark: #000000;
JSON
{
"hex": "#f09442",
"rgb": {
"r": 240,
"g": 148,
"b": 66
},
"hsl": {
"h": 28.276,
"s": 85.294,
"l": 60
},
"oklch": {
"l": 0.74782,
"c": 0.14587,
"h": 59
},
"luminance": 0.40098
}Semantic roles & 50–950 ramp
primary
#F09442
secondary
#A5C9E8
accent
#9AFC2C
background
#FFFBF7
surface
#FFF6EE
border
#D7D0C9
text
#191109
muted
#87807B