Nazwany kolor · #9083A5
Fabulous Grape
Fabulous Grape to #9083A5: rgb(144 131 165), hsl(263 16% 58%), oklch(0.633 0.052 302.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Fabulous Grape color name →
#9083A5
oklch(0.633 0.052 302.4)
Konwersje koloru
- HEX
- #9083a5
- RGB
- rgb(144 131 165)
- HSL
- hsl(263 16% 58%)
- HWB
- hwb(263 51% 35%)
- OKLCH
- oklch(0.633 0.052 302.4)
- OKLab
- oklab(0.633 0.028 -0.044)
- CIE Lab
- lab(56.84 10.24 -16.3)
- LCH
- lch(56.84 19.25 302.1)
- CMYK
- cmyk(13% 21% 0% 35%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 9B8FAE
- A59BB7
- B0A7C0
- BBB3C9
- C6BFD2
- D1CCDB
- DCD8E4
- E8E5ED
- F3F2F6
Odcienie ciemniejsze
- 7D718F
- 6A6079
- 574F65
- 453F51
- 342F3D
- 24202B
- 15121A
- 07060A
- 010101
Tony
- 8E83A1
- 8D839E
- 8B829A
- 8A8296
- 888293
- 86818F
- 85818B
- 838187
- 828084
Harmonie kolorów
Komplementarna +180°
- 9083A5
Fabulous Grape
- 84906C
≈ Green Coconut
Analogowa -30° +30°
- 9083A5
Fabulous Grape
- 7F89AB
≈ Purple Impression
- 9E7F98
≈ Berry Bliss
Triada +120° +240°
- 9083A5
Fabulous Grape
- A2846A
≈ Iced Mocha
- 66958D
≈ Green Turquoise
Komplementarna rozszczepiona +150° +210°
- 9083A5
Fabulous Grape
- 958A66
≈ Renwick Olive
- 73947B
≈ Watercress
Tetrada +90° +180° +270°
- 9083A5
Fabulous Grape
- A77F76
≈ Fresh Cedar
- 84906C
≈ Green Coconut
- 65939D
≈ Clear Brook
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.51:1 · APCA Lc 63
Ag
AANa czerni
WCAG 5.97:1 · APCA Lc 39
Najlepszy kolor tekstu: #000000
WCAG 5.97:1 (AA) · APCA Lc 39
Contrast pairs
Fragmenty kodu
CSS
:root {
--fabulous-grape: #9083a5;
--fabulous-grape-rgb: 144 131 165;
--fabulous-grape-oklch: oklch(0.633 0.052 302.4);
}
.element {
color: var(--fabulous-grape);
background-color: hsl(263 16% 58%);
border-color: oklch(0.633 0.052 302.4);
}Tailwind CSS v4
@theme {
--color-fabulous-grape: #9083a5;
--color-fabulous-grape-50: #f8f2ff;
--color-fabulous-grape-100: #ece4f6;
--color-fabulous-grape-200: #d9cfe7;
--color-fabulous-grape-300: #bdb1ce;
--color-fabulous-grape-400: #a498b9;
--color-fabulous-grape-500: #8d7ea3;
--color-fabulous-grape-600: #776b8a;
--color-fabulous-grape-700: #5f556f;
--color-fabulous-grape-800: #453e52;
--color-fabulous-grape-900: #302b39;
--color-fabulous-grape-950: #1c1823;
}SCSS
$fabulous-grape: #9083a5;
$fabulous-grape-rgb: 144, 131, 165;
$fabulous-grape-light: mix(#fff, $fabulous-grape, 20%);
$fabulous-grape-dark: mix(#000, $fabulous-grape, 20%);
.element {
color: $fabulous-grape;
box-shadow: 0 0 0 2px rgba($fabulous-grape, 0.35);
}