Colore con nome · #9C8F60
Pineapple Sage
Pineapple Sage è #9C8F60: rgb(156 143 96), hsl(47 24% 49%), oklch(0.65 0.066 94.5). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Yellow mean? → · Pineapple Sage color name →
#9C8F60
oklch(0.65 0.066 94.5)
Conversioni di colore
- HEX
- #9c8f60
- RGB
- rgb(156 143 96)
- HSL
- hsl(47 24% 49%)
- HWB
- hwb(47 38% 39%)
- OKLCH
- oklch(0.65 0.066 94.5)
- OKLab
- oklab(0.65 -0.005 0.066)
- CIE Lab
- lab(59.71 -0.22 26.88)
- LCH
- lch(59.71 26.88 90.5)
- CMYK
- cmyk(0% 8% 38% 39%)
Tinte · Ombre · Toni
Tinte
- A59A70
- AFA57F
- B9B08F
- C2BB9E
- CCC6AE
- D6D1BE
- E0DCCE
- EAE8DE
- F5F3EF
Ombre
- 877C52
- 736945
- 5F5738
- 4C452C
- 393420
- 282415
- 18150A
- 090703
- 010100
Toni
- 998E64
- 968C67
- 938B6B
- 91896E
- 8E8871
- 8B8674
- 888577
- 85837A
- 83827D
Armonie di colore
Complementare +180°
- 9C8F60
Pineapple Sage
- 838DB8
≈ Galactic Gossamer
Analogo -30° +30°
- 9C8F60
Pineapple Sage
- AC8764
≈ Chamois Leather
- 86976A
≈ Cactus Valley
Triadico +120° +240°
- 9C8F60
Pineapple Sage
- 5D9AA8
≈ Frost Blue
- A980A0
≈ Amazonian Orchid
Complementare divisa +150° +210°
- 9C8F60
Pineapple Sage
- 6C94B5
≈ Aragonite Blue
- 9885B0
≈ Celeb City
Tetradico +90° +180° +270°
- 9C8F60
Pineapple Sage
- 5E9D94
≈ Treasure Isle
- 838DB8
≈ Galactic Gossamer
- B37E8A
≈ Degas Pink
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.22:1 · APCA Lc 59
Ag
AASu nero
WCAG 6.51:1 · APCA Lc 42
Miglior colore del testo: #000000
WCAG 6.51:1 (AA) · APCA Lc 42
Contrast pairs
Frammenti di codice
CSS
:root {
--pineapple-sage: #9c8f60;
--pineapple-sage-rgb: 156 143 96;
--pineapple-sage-oklch: oklch(0.65 0.066 94.5);
}
.element {
color: var(--pineapple-sage);
background-color: hsl(47 24% 49%);
border-color: oklch(0.65 0.066 94.5);
}Tailwind CSS v4
@theme {
--color-pineapple-sage: #9c8f60;
--color-pineapple-sage-50: #faf6e0;
--color-pineapple-sage-100: #eee8d0;
--color-pineapple-sage-200: #dcd5b5;
--color-pineapple-sage-300: #c1b891;
--color-pineapple-sage-400: #ab9e71;
--color-pineapple-sage-500: #948652;
--color-pineapple-sage-600: #7d7146;
--color-pineapple-sage-700: #645b37;
--color-pineapple-sage-800: #4a4227;
--color-pineapple-sage-900: #342d1a;
--color-pineapple-sage-950: #1f1a0b;
}SCSS
$pineapple-sage: #9c8f60;
$pineapple-sage-rgb: 156, 143, 96;
$pineapple-sage-light: mix(#fff, $pineapple-sage, 20%);
$pineapple-sage-dark: mix(#000, $pineapple-sage, 20%);
.element {
color: $pineapple-sage;
box-shadow: 0 0 0 2px rgba($pineapple-sage, 0.35);
}