Named color · #FF9E4B
Tangerine Tango
Tangerine Tango is #FF9E4B: rgb(255 158 75), hsl(28 100% 65%), oklch(0.784 0.15 58.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Tangerine Tango color name →
#FF9E4B
oklch(0.784 0.15 58.3)
Color conversions
- HEX
- #ff9e4b
- RGB
- rgb(255 158 75)
- HSL
- hsl(28 100% 65%)
- HWB
- hwb(28 29% 0%)
- OKLCH
- oklch(0.784 0.15 58.3)
- OKLab
- oklab(0.784 0.079 0.128)
- CIE Lab
- lab(74.31 32.27 57.61)
- LCH
- lch(74.31 66.03 60.7)
- CMYK
- cmyk(0% 38% 71% 0%)
Tints · Shades · Tones
Tints
- FFA861
- FFB275
- FFBC87
- FFC699
- FFD0AB
- FFD9BC
- FFE3CD
- FFECDD
- FFF6EE
Shades
- DE8940
- BE7435
- 9E602B
- 804D21
- 633A17
- 48290E
- 2E1806
- 160902
- 030100
Tones
- F29C54
- E6995C
- D99662
- CC9468
- C0916D
- B38E72
- A68A76
- 9A877A
- 8D847D
Color harmonies
Complementary +180°
- FF9E4B
Tangerine Tango
- 63C4FF
≈ Maya Blue
Analogous -30° +30°
- FF9E4B
Tangerine Tango
- FF988B
≈ Mona Lisa
- E0B228
≈ Gold Tips
Triadic +120° +240°
- FF9E4B
Tangerine Tango
- 00D6B9
≈ Channel Marker Green
- C3A6FF
≈ Diva
Split-complementary +150° +210°
- FF9E4B
Tangerine Tango
- 00D0E6
≈ Picnic Day Sky
- 9BB6FF
≈ Truesky Gloxym
Tetradic +90° +180° +270°
- FF9E4B
Tangerine Tango
- 6DD380
≈ Electric Lettuce
- 63C4FF
≈ Maya Blue
- EC94E9
≈ Diva Mecha
Contrast & accessibility
Ag
FailOn white
WCAG 2.04:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.24:1 · APCA Lc 63
Best text color: #000000
WCAG 10.24:1 (AAA) · APCA Lc 63
Contrast pairs
Code snippets
CSS
:root {
--tangerine-tango: #ff9e4b;
--tangerine-tango-rgb: 255 158 75;
--tangerine-tango-oklch: oklch(0.784 0.15 58.3);
}
.element {
color: var(--tangerine-tango);
background-color: hsl(28 100% 65%);
border-color: oklch(0.784 0.15 58.3);
}Tailwind CSS v4
@theme {
--color-tangerine-tango: #ff9e4b;
--color-tangerine-tango-50: #ffecca;
--color-tangerine-tango-100: #ffddb6;
--color-tangerine-tango-200: #ffc592;
--color-tangerine-tango-300: #efa464;
--color-tangerine-tango-400: #df8535;
--color-tangerine-tango-500: #cc6600;
--color-tangerine-tango-600: #ad5700;
--color-tangerine-tango-700: #8b4600;
--color-tangerine-tango-800: #683100;
--color-tangerine-tango-900: #492200;
--color-tangerine-tango-950: #301000;
}SCSS
$tangerine-tango: #ff9e4b;
$tangerine-tango-rgb: 255, 158, 75;
$tangerine-tango-light: mix(#fff, $tangerine-tango, 20%);
$tangerine-tango-dark: mix(#000, $tangerine-tango, 20%);
.element {
color: $tangerine-tango;
box-shadow: 0 0 0 2px rgba($tangerine-tango, 0.35);
}