Colore con nome · #F0C374
Sassy Yellow
Sassy Yellow è #F0C374: rgb(240 195 116), hsl(38 81% 70%), oklch(0.84 0.11 80.4). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Sassy Yellow color name →
#F0C374
oklch(0.84 0.11 80.4)
Conversioni di colore
- HEX
- #f0c374
- RGB
- rgb(240 195 116)
- HSL
- hsl(38 81% 70%)
- HWB
- hwb(38 45% 6%)
- OKLCH
- oklch(0.84 0.11 80.4)
- OKLab
- oklab(0.84 0.018 0.109)
- CIE Lab
- lab(81.6 9.72 45.73)
- LCH
- lch(81.6 46.75 78)
- CMYK
- cmyk(0% 19% 52% 6%)
Tinte · Ombre · Toni
Tinte
- F2C983
- F3CF92
- F5D5A0
- F7DBAE
- F8E1BC
- FAE7C9
- FBEDD7
- FCF3E4
- FEF9F2
Ombre
- D1A964
- B29054
- 957845
- 786037
- 5D4A29
- 43341B
- 2A200F
- 140E05
- 030201
Toni
- E4BC77
- D9B679
- CDAF7B
- C2A87C
- B7A17E
- AC9B7F
- A1947F
- 968D80
- 8B8780
Armonie di colore
Complementare +180°
- F0C374
Sassy Yellow
- ADCCFF
≈ Night Snow
Analogo -30° +30°
- F0C374
Sassy Yellow
- FFB890
≈ Coral Wisp
- CED17A
≈ Greenish Beige
Triadico +120° +240°
- F0C374
Sassy Yellow
- 64E0E7
≈ Pluviophile
- EBB3F7
≈ Candy Dreams
Complementare divisa +150° +210°
- F0C374
Sassy Yellow
- 84D7FF
≈ Kul Sharif Blue
- CAC2FF
≈ Innocent Snowdrop
Tetradico +90° +180° +270°
- F0C374
Sassy Yellow
- 79E2C0
≈ Sprig of Mint
- ADCCFF
≈ Night Snow
- FFAFD4
≈ Spaghetti Strap Pink
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.64:1 · APCA Lc 29
Ag
AAASu nero
WCAG 12.76:1 · APCA Lc 74
Miglior colore del testo: #000000
WCAG 12.76:1 (AAA) · APCA Lc 74
Contrast pairs
Frammenti di codice
CSS
:root {
--sassy-yellow: #f0c374;
--sassy-yellow-rgb: 240 195 116;
--sassy-yellow-oklch: oklch(0.84 0.11 80.4);
}
.element {
color: var(--sassy-yellow);
background-color: hsl(38 81% 70%);
border-color: oklch(0.84 0.11 80.4);
}Tailwind CSS v4
@theme {
--color-sassy-yellow: #f0c374;
--color-sassy-yellow-50: #fff3d2;
--color-sassy-yellow-100: #fae5bf;
--color-sassy-yellow-200: #ecd19f;
--color-sassy-yellow-300: #d3b275;
--color-sassy-yellow-400: #c0974d;
--color-sassy-yellow-500: #ac7d19;
--color-sassy-yellow-600: #916a19;
--color-sassy-yellow-700: #745514;
--color-sassy-yellow-800: #573d0c;
--color-sassy-yellow-900: #3d2a08;
--color-sassy-yellow-950: #261700;
}SCSS
$sassy-yellow: #f0c374;
$sassy-yellow-rgb: 240, 195, 116;
$sassy-yellow-light: mix(#fff, $sassy-yellow, 20%);
$sassy-yellow-dark: mix(#000, $sassy-yellow, 20%);
.element {
color: $sassy-yellow;
box-shadow: 0 0 0 2px rgba($sassy-yellow, 0.35);
}