Colore con nome · #9C89A1
Amethyst Grey Violet
Amethyst Grey Violet è #9C89A1: rgb(156 137 161), hsl(288 11% 58%), oklch(0.655 0.041 319.2). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Amethyst Grey Violet color name →
#9C89A1
oklch(0.655 0.041 319.2)
Conversioni di colore
- HEX
- #9c89a1
- RGB
- rgb(156 137 161)
- HSL
- hsl(288 11% 58%)
- HWB
- hwb(288 54% 37%)
- OKLCH
- oklch(0.655 0.041 319.2)
- OKLab
- oklab(0.655 0.031 -0.027)
- CIE Lab
- lab(59.43 10.77 -10.02)
- LCH
- lch(59.43 14.71 317.1)
- CMYK
- cmyk(3% 15% 0% 37%)
Tinte · Ombre · Toni
Tinte
- A694AA
- AFA0B3
- B9ABBC
- C3B7C6
- CDC2CF
- D6CED9
- E0DAE2
- EBE6EC
- F5F3F5
Ombre
- 87768B
- 736476
- 5F5362
- 4C424E
- 39313C
- 28222A
- 181419
- 090709
- 010101
Toni
- 99889E
- 96879A
- 948697
- 918594
- 8E8590
- 8B848D
- 88838A
- 868287
- 838183
Armonie di colore
Complementare +180°
- 9C89A1
Amethyst Grey Violet
- 84977F
≈ Laurel Tree
Analogo -30° +30°
- 9C89A1
Amethyst Grey Violet
- 8F8DA9
≈ Delicate Violet
- A58795
≈ Mohair Pink
Triadico +120° +240°
- 9C89A1
Amethyst Grey Violet
- 9E8E75
≈ Rustic Hacienda
- 73999A
≈ Teal & Tonic
Complementare divisa +150° +210°
- 9C89A1
Amethyst Grey Violet
- 929376
≈ Dry Hemlock
- 78998C
≈ Bitter Clover Green
Tetradico +90° +180° +270°
- 9C89A1
Amethyst Grey Violet
- A68A7B
≈ Chocolate Powder
- 84977F
≈ Laurel Tree
- 7796A5
≈ Smoky Blue
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.22:1 · APCA Lc 60
Ag
AASu nero
WCAG 6.50:1 · APCA Lc 42
Miglior colore del testo: #000000
WCAG 6.50:1 (AA) · APCA Lc 42
Contrast pairs
Frammenti di codice
CSS
:root {
--amethyst-grey-violet: #9c89a1;
--amethyst-grey-violet-rgb: 156 137 161;
--amethyst-grey-violet-oklch: oklch(0.655 0.041 319.2);
}
.element {
color: var(--amethyst-grey-violet);
background-color: hsl(288 11% 58%);
border-color: oklch(0.655 0.041 319.2);
}Tailwind CSS v4
@theme {
--color-amethyst-grey-violet: #9c89a1;
--color-amethyst-grey-violet-50: #fbf1fc;
--color-amethyst-grey-violet-100: #efe4f0;
--color-amethyst-grey-violet-200: #ddcfdf;
--color-amethyst-grey-violet-300: #c2b1c4;
--color-amethyst-grey-violet-400: #a997ae;
--color-amethyst-grey-violet-500: #927e98;
--color-amethyst-grey-violet-600: #7c6b80;
--color-amethyst-grey-violet-700: #635567;
--color-amethyst-grey-violet-800: #483e4c;
--color-amethyst-grey-violet-900: #322b35;
--color-amethyst-grey-violet-950: #1e1820;
}SCSS
$amethyst-grey-violet: #9c89a1;
$amethyst-grey-violet-rgb: 156, 137, 161;
$amethyst-grey-violet-light: mix(#fff, $amethyst-grey-violet, 20%);
$amethyst-grey-violet-dark: mix(#000, $amethyst-grey-violet, 20%);
.element {
color: $amethyst-grey-violet;
box-shadow: 0 0 0 2px rgba($amethyst-grey-violet, 0.35);
}