Colore con nome · #FFC400
Citrus Splash
Citrus Splash è #FFC400: rgb(255 196 0), hsl(46 100% 50%), oklch(0.85 0.174 86.6). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Yellow mean? → · Citrus Splash color name →
#FFC400
oklch(0.85 0.174 86.6)
Conversioni di colore
- HEX
- #ffc400
- RGB
- rgb(255 196 0)
- HSL
- hsl(46 100% 50%)
- HWB
- hwb(46 0% 0%)
- OKLCH
- oklch(0.85 0.174 86.6)
- OKLab
- oklab(0.85 0.01 0.174)
- CIE Lab
- lab(82.82 12.16 83.55)
- LCH
- lch(82.82 84.43 81.7)
- CMYK
- cmyk(0% 23% 100% 0%)
Tinte · Ombre · Toni
Tinte
- FFCA42
- FFD161
- FFD779
- FFDD8F
- FFE3A3
- FFE9B6
- FFEFC9
- FFF4DB
- FFFAED
Ombre
- DEAA00
- BE9100
- 9E7800
- 806100
- 634A00
- 483500
- 2E2100
- 160E00
- 030200
Toni
- F2BD30
- E5B744
- D8B051
- CBA95C
- BEA365
- B19C6C
- A59572
- 988E77
- 8C877C
Armonie di colore
Complementare +180°
- FFC400
Citrus Splash
- B8CDFF
≈ Ice Cold Stare
Analogo -30° +30°
- FFC400
Citrus Splash
- FFBE8F
≈ Orange Mousse
- C7DB3F
≈ Las Palmas
Triadico +120° +240°
- FFC400
Citrus Splash
- 00E8FD
≈ Whimsical Blue
- FFACFF
≈ Jigglypuff
Complementare divisa +150° +210°
- FFC400
Citrus Splash
- 97D7FF
≈ Shiva Blue
- D3C3FF
≈ Innocent Snowdrop
Tetradico +90° +180° +270°
- FFC400
Citrus Splash
- 00EFCB
≈ Fake Jade
- B8CDFF
≈ Ice Cold Stare
- FFB5CF
≈ Baby Pink
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.59:1 · APCA Lc 27
Ag
AAASu nero
WCAG 13.14:1 · APCA Lc 76
Miglior colore del testo: #000000
WCAG 13.14:1 (AAA) · APCA Lc 76
Contrast pairs
Frammenti di codice
CSS
:root {
--citrus-splash: #ffc400;
--citrus-splash-rgb: 255 196 0;
--citrus-splash-oklch: oklch(0.85 0.174 86.6);
}
.element {
color: var(--citrus-splash);
background-color: hsl(46 100% 50%);
border-color: oklch(0.85 0.174 86.6);
}Tailwind CSS v4
@theme {
--color-citrus-splash: #ffc400;
--color-citrus-splash-50: #fff3bc;
--color-citrus-splash-100: #ffe6a5;
--color-citrus-splash-200: #f3d07a;
--color-citrus-splash-300: #dcb23c;
--color-citrus-splash-400: #cb9500;
--color-citrus-splash-500: #b87900;
--color-citrus-splash-600: #9b6700;
--color-citrus-splash-700: #7c5200;
--color-citrus-splash-800: #5e3b00;
--color-citrus-splash-900: #422800;
--color-citrus-splash-950: #2a1600;
}SCSS
$citrus-splash: #ffc400;
$citrus-splash-rgb: 255, 196, 0;
$citrus-splash-light: mix(#fff, $citrus-splash, 20%);
$citrus-splash-dark: mix(#000, $citrus-splash, 20%);
.element {
color: $citrus-splash;
box-shadow: 0 0 0 2px rgba($citrus-splash, 0.35);
}