Benannte Farbe · #F8AD1B
Tangerine Twist
Tangerine Twist ist #F8AD1B: rgb(248 173 27), hsl(40 94% 54%), oklch(0.8 0.163 76.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Tangerine Twist color name →
#F8AD1B
oklch(0.8 0.163 76.4)
Farbumrechnungen
- HEX
- #f8ad1b
- RGB
- rgb(248 173 27)
- HSL
- hsl(40 94% 54%)
- HWB
- hwb(40 11% 3%)
- OKLCH
- oklch(0.8 0.163 76.4)
- OKLab
- oklab(0.8 0.038 0.158)
- CIE Lab
- lab(76.62 20.83 75.54)
- LCH
- lch(76.62 78.36 74.6)
- CMYK
- cmyk(0% 30% 89% 3%)
Tints · Shades · Tones
Tints
- F9B646
- FABE61
- FCC778
- FCCF8D
- FDD7A1
- FEE0B5
- FEE8C8
- FFEFDA
- FFF7ED
Shades
- D89616
- B87F11
- 9A6A0C
- 7C5508
- 604105
- 452D02
- 2C1B01
- 150B00
- 030100
Tones
- ECA935
- E0A545
- D3A151
- C79C5B
- BB9863
- AF936B
- A48F71
- 988A76
- 8C857B
Farbharmonien
Komplementär +180°
- F8AD1B
Tangerine Twist
- 92C0FF
≈ Truesky Gloxym
Analog -30° +30°
- F8AD1B
Tangerine Twist
- FFA477
≈ Young Tangerine
- CBC324
≈ Bird Flower
Triadisch +120° +240°
- F8AD1B
Tangerine Twist
- 00D8DB
≈ Aztec Turquoise
- E49DFF
≈ Medium Lavender Magenta
Geteilt komplementär +150° +210°
- F8AD1B
Tangerine Twist
- 46CEFF
≈ Thor’s Thunder
- B8B4FF
≈ Greyish Lavender
Tetradisch +90° +180° +270°
- F8AD1B
Tangerine Twist
- 15DEA6
≈ Malted Mint Madness
- 92C0FF
≈ Truesky Gloxym
- FF96D0
≈ Himalayan Balsam
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.91:1 · APCA Lc 36
Ag
AAAAuf Schwarz
WCAG 10.98:1 · APCA Lc 66
Beste Textfarbe: #000000
WCAG 10.98:1 (AAA) · APCA Lc 66
Contrast pairs
Code-Snippets
CSS
:root {
--tangerine-twist: #f8ad1b;
--tangerine-twist-rgb: 248 173 27;
--tangerine-twist-oklch: oklch(0.8 0.163 76.4);
}
.element {
color: var(--tangerine-twist);
background-color: hsl(40 94% 54%);
border-color: oklch(0.8 0.163 76.4);
}Tailwind CSS v4
@theme {
--color-tangerine-twist: #f8ad1b;
--color-tangerine-twist-50: #fff0c1;
--color-tangerine-twist-100: #ffe2aa;
--color-tangerine-twist-200: #facc82;
--color-tangerine-twist-300: #e4ac4b;
--color-tangerine-twist-400: #d48f00;
--color-tangerine-twist-500: #c17200;
--color-tangerine-twist-600: #a36100;
--color-tangerine-twist-700: #834d00;
--color-tangerine-twist-800: #623700;
--color-tangerine-twist-900: #452600;
--color-tangerine-twist-950: #2d1400;
}SCSS
$tangerine-twist: #f8ad1b;
$tangerine-twist-rgb: 248, 173, 27;
$tangerine-twist-light: mix(#fff, $tangerine-twist, 20%);
$tangerine-twist-dark: mix(#000, $tangerine-twist, 20%);
.element {
color: $tangerine-twist;
box-shadow: 0 0 0 2px rgba($tangerine-twist, 0.35);
}