Named color · #F07427
Vivid Tangelo
Vivid Tangelo is #F07427: rgb(240 116 39), hsl(23 87% 55%), oklch(0.694 0.174 47.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Vivid Tangelo color name →
#F07427
oklch(0.694 0.174 47.5)
Color conversions
- HEX
- #f07427
- RGB
- rgb(240 116 39)
- HSL
- hsl(23 87% 55%)
- HWB
- hwb(23 15% 6%)
- OKLCH
- oklch(0.694 0.174 47.5)
- OKLab
- oklab(0.694 0.117 0.128)
- CIE Lab
- lab(63.37 45.76 61.8)
- LCH
- lch(63.37 76.9 53.5)
- CMYK
- cmyk(0% 52% 84% 6%)
Tints · Shades · Tones
Tints
- F38345
- F6925D
- F9A073
- FBAE88
- FDBC9C
- FECAB0
- FFD7C4
- FFE4D7
- FFF2EB
Shades
- D16420
- B2541A
- 954514
- 78370E
- 5D2908
- 431B04
- 2A0F02
- 140501
- 030100
Tones
- E57737
- DB7944
- D07B4E
- C57D57
- BA7E5F
- AF7F67
- A47F6E
- 988074
- 8C807A
Color harmonies
Complementary +180°
- F07427
Vivid Tangelo
- 00ACDD
≈ Blue Fire
Analogous -30° +30°
- F07427
Vivid Tangelo
- F56774
≈ Sugar Coral
- CE8F00
≈ End of Summer
Triadic +120° +240°
- F07427
Vivid Tangelo
- 00B88B
≈ Green Velour
- 9988FF
≈ Lavender Blue Shadow
Split-complementary +150° +210°
- F07427
Vivid Tangelo
- 00B3B6
≈ Cyan Sky
- 579CFF
≈ Blue Chaos
Tetradic +90° +180° +270°
- F07427
Vivid Tangelo
- 62B43E
≈ Sour Candy
- 00ACDD
≈ Blue Fire
- C875E2
≈ Fake Love
Contrast & accessibility
Ag
FailOn white
WCAG 2.90:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.23:1 · APCA Lc 47
Best text color: #000000
WCAG 7.23:1 (AAA) · APCA Lc 47
Contrast pairs
Code snippets
CSS
:root {
--vivid-tangelo: #f07427;
--vivid-tangelo-rgb: 240 116 39;
--vivid-tangelo-oklch: oklch(0.694 0.174 47.5);
}
.element {
color: var(--vivid-tangelo);
background-color: hsl(23 87% 55%);
border-color: oklch(0.694 0.174 47.5);
}Tailwind CSS v4
@theme {
--color-vivid-tangelo: #f07427;
--color-vivid-tangelo-50: #ffe7c9;
--color-vivid-tangelo-100: #ffd8b4;
--color-vivid-tangelo-200: #ffbe91;
--color-vivid-tangelo-300: #fe9b62;
--color-vivid-tangelo-400: #ee7934;
--color-vivid-tangelo-500: #dd5500;
--color-vivid-tangelo-600: #ba4900;
--color-vivid-tangelo-700: #963b00;
--color-vivid-tangelo-800: #702900;
--color-vivid-tangelo-900: #4f1b00;
--color-vivid-tangelo-950: #340b00;
}SCSS
$vivid-tangelo: #f07427;
$vivid-tangelo-rgb: 240, 116, 39;
$vivid-tangelo-light: mix(#fff, $vivid-tangelo, 20%);
$vivid-tangelo-dark: mix(#000, $vivid-tangelo, 20%);
.element {
color: $vivid-tangelo;
box-shadow: 0 0 0 2px rgba($vivid-tangelo, 0.35);
}