Named color · #FF9980
Vivid Tangerine
Vivid Tangerine is #FF9980: rgb(255 153 128), hsl(12 100% 75%), oklch(0.783 0.128 34.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Vivid Tangerine color name →
#FF9980
oklch(0.783 0.128 34.6)
Color conversions
- HEX
- #ff9980
- RGB
- rgb(255 153 128)
- HSL
- hsl(12 100% 75%)
- HWB
- hwb(12 50% 0%)
- OKLCH
- oklch(0.783 0.128 34.6)
- OKLab
- oklab(0.783 0.105 0.073)
- CIE Lab
- lab(73.8 37.32 30.34)
- LCH
- lch(73.8 48.09 39.1)
- CMYK
- cmyk(0% 40% 50% 0%)
Tints · Shades · Tones
Tints
- FFA48D
- FFAE99
- FFB9A6
- FFC3B3
- FFCDBF
- FFD7CC
- FFE1D9
- FFEBE5
- FFF5F2
Shades
- DE846E
- BE705D
- 9E5D4D
- 804A3D
- 63382E
- 48271F
- 2E1712
- 160806
- 030101
Tones
- F29781
- E69581
- D99381
- CD9081
- C08E81
- B38B81
- A78981
- 9A8681
- 8D8380
Color harmonies
Complementary +180°
- FF9980
Vivid Tangerine
- 32CDEB
≈ Picnic Day Sky
Analogous -30° +30°
- FF9980
Vivid Tangerine
- FD94AE
≈ Baker-Miller Pink
- F1A659
≈ Ginger Milk
Triadic +120° +240°
- FF9980
Vivid Tangerine
- 6FD093
≈ Van Gogh Green
- A3B3FF
≈ Wondrous Wisteria
Split-complementary +150° +210°
- FF9980
Vivid Tangerine
- 33D3C2
≈ Turquoise Panic
- 73C0FF
≈ Maya Blue
Tetradic +90° +180° +270°
- FF9980
Vivid Tangerine
- A6C667
≈ Green Peridot
- 32CDEB
≈ Picnic Day Sky
- CBA3FA
≈ Lilac
Contrast & accessibility
Ag
FailOn white
WCAG 2.07:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.12:1 · APCA Lc 62
Best text color: #000000
WCAG 10.12:1 (AAA) · APCA Lc 62
Contrast pairs
Code snippets
CSS
:root {
--vivid-tangerine: #ff9980;
--vivid-tangerine-rgb: 255 153 128;
--vivid-tangerine-oklch: oklch(0.783 0.128 34.6);
}
.element {
color: var(--vivid-tangerine);
background-color: hsl(12 100% 75%);
border-color: oklch(0.783 0.128 34.6);
}Tailwind CSS v4
@theme {
--color-vivid-tangerine: #ff9980;
--color-vivid-tangerine-50: #ffe9dc;
--color-vivid-tangerine-100: #ffdaca;
--color-vivid-tangerine-200: #ffc2ae;
--color-vivid-tangerine-300: #f1a089;
--color-vivid-tangerine-400: #df816a;
--color-vivid-tangerine-500: #cc6249;
--color-vivid-tangerine-600: #ad543e;
--color-vivid-tangerine-700: #8b4331;
--color-vivid-tangerine-800: #672f24;
--color-vivid-tangerine-900: #492018;
--color-vivid-tangerine-950: #2f0f09;
}SCSS
$vivid-tangerine: #ff9980;
$vivid-tangerine-rgb: 255, 153, 128;
$vivid-tangerine-light: mix(#fff, $vivid-tangerine, 20%);
$vivid-tangerine-dark: mix(#000, $vivid-tangerine, 20%);
.element {
color: $vivid-tangerine;
box-shadow: 0 0 0 2px rgba($vivid-tangerine, 0.35);
}