Named color · #FFB077
Obtrusive Orange
Obtrusive Orange is #FFB077: rgb(255 176 119), hsl(25 100% 73%), oklch(0.821 0.118 56.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Obtrusive Orange color name →
#FFB077
oklch(0.821 0.118 56.1)
Color conversions
- HEX
- #ffb077
- RGB
- rgb(255 176 119)
- HSL
- hsl(25 100% 73%)
- HWB
- hwb(25 47% 0%)
- OKLCH
- oklch(0.821 0.118 56.1)
- OKLab
- oklab(0.821 0.066 0.098)
- CIE Lab
- lab(78.75 25.39 41.24)
- LCH
- lch(78.75 48.43 58.4)
- CMYK
- cmyk(0% 31% 53% 0%)
Tints · Shades · Tones
Tints
- FFB885
- FFC094
- FFC8A1
- FFD0AF
- FFD8BC
- FFE0CA
- FFE8D7
- FFF0E4
- FFF7F2
Shades
- DE9967
- BE8257
- 9E6C47
- 805638
- 63422A
- 482E1C
- 2E1C10
- 160B05
- 030101
Tones
- F2AB79
- E5A77B
- D8A27C
- CC9D7D
- BF997E
- B2947F
- A68F80
- 998A80
- 8D8580
Color harmonies
Complementary +180°
- FFB077
Obtrusive Orange
- 7FCFFF
≈ Drift on the Sea
Analogous -30° +30°
- FFB077
Obtrusive Orange
- FFABA2
≈ Patient Pink
- E6BF65
≈ Golden Chalice
Triadic +120° +240°
- FFB077
Obtrusive Orange
- 62DDC2
≈ Ocean in a Bowl
- CAB7FF
≈ Violet Heaven
Split-complementary +150° +210°
- FFB077
Obtrusive Orange
- 52DAEA
≈ Blue Dacnis
- AAC4FF
≈ Pastel Blue
Tetradic +90° +180° +270°
- FFB077
Obtrusive Orange
- 91D996
≈ Leek
- 7FCFFF
≈ Drift on the Sea
- ECA9ED
≈ Pinky Swear
Contrast & accessibility
Ag
FailOn white
WCAG 1.79:1 · APCA Lc 33
Ag
AAAOn black
WCAG 11.72:1 · APCA Lc 70
Best text color: #000000
WCAG 11.72:1 (AAA) · APCA Lc 70
Contrast pairs
Code snippets
CSS
:root {
--obtrusive-orange: #ffb077;
--obtrusive-orange-rgb: 255 176 119;
--obtrusive-orange-oklch: oklch(0.821 0.118 56.1);
}
.element {
color: var(--obtrusive-orange);
background-color: hsl(25 100% 73%);
border-color: oklch(0.821 0.118 56.1);
}Tailwind CSS v4
@theme {
--color-obtrusive-orange: #ffb077;
--color-obtrusive-orange-50: #ffeed5;
--color-obtrusive-orange-100: #ffdfc2;
--color-obtrusive-orange-200: #fbc8a3;
--color-obtrusive-orange-300: #e5a97a;
--color-obtrusive-orange-400: #d38b56;
--color-obtrusive-orange-500: #c06f2c;
--color-obtrusive-orange-600: #a25e27;
--color-obtrusive-orange-700: #824b1f;
--color-obtrusive-orange-800: #613616;
--color-obtrusive-orange-900: #44250e;
--color-obtrusive-orange-950: #2c1302;
}SCSS
$obtrusive-orange: #ffb077;
$obtrusive-orange-rgb: 255, 176, 119;
$obtrusive-orange-light: mix(#fff, $obtrusive-orange, 20%);
$obtrusive-orange-dark: mix(#000, $obtrusive-orange, 20%);
.element {
color: $obtrusive-orange;
box-shadow: 0 0 0 2px rgba($obtrusive-orange, 0.35);
}