Named color · #F16640
Opulent Orange
Opulent Orange is #F16640: rgb(241 102 64), hsl(13 86% 60%), oklch(0.678 0.18 36.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Opulent Orange color name →
#F16640
oklch(0.678 0.18 36.1)
Color conversions
- HEX
- #f16640
- RGB
- rgb(241 102 64)
- HSL
- hsl(13 86% 60%)
- HWB
- hwb(13 25% 5%)
- OKLCH
- oklch(0.678 0.18 36.1)
- OKLab
- oklab(0.678 0.145 0.106)
- CIE Lab
- lab(61.14 53.04 48.71)
- LCH
- lch(61.14 72.02 42.6)
- CMYK
- cmyk(0% 58% 73% 5%)
Tints · Shades · Tones
Tints
- F57755
- F88869
- FB977C
- FDA78F
- FFB6A2
- FFC5B4
- FFD3C7
- FFE2D9
- FFF1EC
Shades
- D25836
- B34A2D
- 953C24
- 792F1B
- 5D2313
- 43170B
- 2B0C05
- 140401
- 030000
Tones
- E76B49
- DC6F51
- D17258
- C6755F
- BB7865
- B07A6B
- A57C71
- 997E76
- 8D7F7B
Color harmonies
Complementary +180°
- F16640
Opulent Orange
- 00A9C7
≈ Gummy Dolphins
Analogous -30° +30°
- F16640
Opulent Orange
- EE5F86
≈ Watermelon Juice
- D58100
≈ Dulce de Leche
Triadic +120° +240°
- F16640
Opulent Orange
- 00B46B
≈ Green Mana
- 7D8AFF
≈ Lavender Blue Shadow
Split-complementary +150° +210°
- F16640
Opulent Orange
- 00AFA3
≈ Cozumel
- 009EFC
≈ Blue Nebula
Tetradic +90° +180° +270°
- F16640
Opulent Orange
- 7DA900
≈ Green Envy
- 00A9C7
≈ Gummy Dolphins
- B475EE
≈ Queer Purple
Contrast & accessibility
Ag
FailOn white
WCAG 3.12:1 · APCA Lc 58
Ag
AAOn black
WCAG 6.71:1 · APCA Lc 44
Best text color: #000000
WCAG 6.71:1 (AA) · APCA Lc 44
Contrast pairs
Code snippets
CSS
:root {
--opulent-orange: #f16640;
--opulent-orange-rgb: 241 102 64;
--opulent-orange-oklch: oklch(0.678 0.18 36.1);
}
.element {
color: var(--opulent-orange);
background-color: hsl(13 86% 60%);
border-color: oklch(0.678 0.18 36.1);
}Tailwind CSS v4
@theme {
--color-opulent-orange: #f16640;
--color-opulent-orange-50: #ffe4d0;
--color-opulent-orange-100: #ffd4bd;
--color-opulent-orange-200: #ffb99c;
--color-opulent-orange-300: #ff9471;
--color-opulent-orange-400: #f5714d;
--color-opulent-orange-500: #e44a1b;
--color-opulent-orange-600: #c0401a;
--color-opulent-orange-700: #9b3315;
--color-opulent-orange-800: #742311;
--color-opulent-orange-900: #52180a;
--color-opulent-orange-950: #360701;
}SCSS
$opulent-orange: #f16640;
$opulent-orange-rgb: 241, 102, 64;
$opulent-orange-light: mix(#fff, $opulent-orange, 20%);
$opulent-orange-dark: mix(#000, $opulent-orange, 20%);
.element {
color: $opulent-orange;
box-shadow: 0 0 0 2px rgba($opulent-orange, 0.35);
}