Nazwany kolor · #B4A6D5
Grape Illusion
Grape Illusion to #B4A6D5: rgb(180 166 213), hsl(258 36% 74%), oklch(0.753 0.068 298.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Grape Illusion color name →
#B4A6D5
oklch(0.753 0.068 298.4)
Konwersje koloru
- HEX
- #b4a6d5
- RGB
- rgb(180 166 213)
- HSL
- hsl(258 36% 74%)
- HWB
- hwb(258 65% 16%)
- OKLCH
- oklch(0.753 0.068 298.4)
- OKLab
- oklab(0.753 0.032 -0.06)
- CIE Lab
- lab(70.54 12.22 -22.1)
- LCH
- lch(70.54 25.26 298.9)
- CMYK
- cmyk(15% 22% 0% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BBAFD9
- C3B7DE
- CAC0E2
- D1C9E6
- D9D2EA
- E0DBEF
- E8E4F3
- F0EDF7
- F7F6FB
Odcienie ciemniejsze
- 9C90B9
- 857A9E
- 6E6583
- 58516A
- 443E51
- 302B3A
- 1D1A24
- 0C0A10
- 020102
Tony
- AFA2CC
- A99EC4
- A49BBB
- 9F97B2
- 9A93AA
- 948FA1
- 8F8B99
- 8A8891
- 858488
Harmonie kolorów
Komplementarna +180°
- B4A6D5
Grape Illusion
- AAB584
≈ Great Green
Analogowa -30° +30°
- B4A6D5
Grape Illusion
- 9DAEDB
≈ Aster Flower Blue
- C7A0C5
≈ Stormy Sunrise
Triada +120° +240°
- B4A6D5
Grape Illusion
- D0A584
≈ Sunset Beige
- 7EBEAF
≈ Mintage
Komplementarna rozszczepiona +150° +210°
- B4A6D5
Grape Illusion
- C1AD7D
≈ Cobbler
- 92BB97
≈ Garden Swing
Tetrada +90° +180° +270°
- B4A6D5
Grape Illusion
- D79F97
≈ Rhapsodic
- AAB584
≈ Great Green
- 7ABBC6
≈ Azure Lake
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.24:1 · APCA Lc 44
Ag
AAANa czerni
WCAG 9.35:1 · APCA Lc 58
Najlepszy kolor tekstu: #000000
WCAG 9.35:1 (AAA) · APCA Lc 58
Contrast pairs
Fragmenty kodu
CSS
:root {
--grape-illusion: #b4a6d5;
--grape-illusion-rgb: 180 166 213;
--grape-illusion-oklch: oklch(0.753 0.068 298.4);
}
.element {
color: var(--grape-illusion);
background-color: hsl(258 36% 74%);
border-color: oklch(0.753 0.068 298.4);
}Tailwind CSS v4
@theme {
--color-grape-illusion: #b4a6d5;
--color-grape-illusion-50: #f8f1ff;
--color-grape-illusion-100: #ebe3fc;
--color-grape-illusion-200: #d8ceee;
--color-grape-illusion-300: #bdb0d6;
--color-grape-illusion-400: #a396c2;
--color-grape-illusion-500: #8c7cae;
--color-grape-illusion-600: #766993;
--color-grape-illusion-700: #5f5476;
--color-grape-illusion-800: #443e57;
--color-grape-illusion-900: #2f2a3d;
--color-grape-illusion-950: #1c1827;
}SCSS
$grape-illusion: #b4a6d5;
$grape-illusion-rgb: 180, 166, 213;
$grape-illusion-light: mix(#fff, $grape-illusion, 20%);
$grape-illusion-dark: mix(#000, $grape-illusion, 20%);
.element {
color: $grape-illusion;
box-shadow: 0 0 0 2px rgba($grape-illusion, 0.35);
}