Colore con nome · #F8AD1B
Tangerine Twist
Tangerine Twist è #F8AD1B: rgb(248 173 27), hsl(40 94% 54%), oklch(0.8 0.163 76.4). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Tangerine Twist color name →
#F8AD1B
oklch(0.8 0.163 76.4)
Conversioni di colore
- 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%)
Tinte · Ombre · Toni
Tinte
- F9B646
- FABE61
- FCC778
- FCCF8D
- FDD7A1
- FEE0B5
- FEE8C8
- FFEFDA
- FFF7ED
Ombre
- D89616
- B87F11
- 9A6A0C
- 7C5508
- 604105
- 452D02
- 2C1B01
- 150B00
- 030100
Toni
- ECA935
- E0A545
- D3A151
- C79C5B
- BB9863
- AF936B
- A48F71
- 988A76
- 8C857B
Armonie di colore
Complementare +180°
- F8AD1B
Tangerine Twist
- 92C0FF
≈ Truesky Gloxym
Analogo -30° +30°
- F8AD1B
Tangerine Twist
- FFA477
≈ Young Tangerine
- CBC324
≈ Bird Flower
Triadico +120° +240°
- F8AD1B
Tangerine Twist
- 00D8DB
≈ Aztec Turquoise
- E49DFF
≈ Medium Lavender Magenta
Complementare divisa +150° +210°
- F8AD1B
Tangerine Twist
- 46CEFF
≈ Thor’s Thunder
- B8B4FF
≈ Greyish Lavender
Tetradico +90° +180° +270°
- F8AD1B
Tangerine Twist
- 15DEA6
≈ Malted Mint Madness
- 92C0FF
≈ Truesky Gloxym
- FF96D0
≈ Himalayan Balsam
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.91:1 · APCA Lc 36
Ag
AAASu nero
WCAG 10.98:1 · APCA Lc 66
Miglior colore del testo: #000000
WCAG 10.98:1 (AAA) · APCA Lc 66
Contrast pairs
Frammenti di codice
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);
}