Nazwany kolor · #A89DAC
Goose Wing Grey
Goose Wing Grey to #A89DAC: rgb(168 157 172), hsl(284 8% 65%), oklch(0.71 0.025 317.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Goose Wing Grey color name →
#A89DAC
oklch(0.71 0.025 317.1)
Konwersje koloru
- HEX
- #a89dac
- RGB
- rgb(168 157 172)
- HSL
- hsl(284 8% 65%)
- HWB
- hwb(284 62% 33%)
- OKLCH
- oklch(0.71 0.025 317.1)
- OKLab
- oklab(0.71 0.018 -0.017)
- CIE Lab
- lab(66.05 6.26 -6.31)
- LCH
- lch(66.05 8.88 314.8)
- CMYK
- cmyk(2% 9% 0% 33%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B0A6B4
- B9B0BC
- C1B9C4
- CAC3CD
- D3CDD5
- DBD7DD
- E4E1E6
- EDEBEE
- F6F5F6
Odcienie ciemniejsze
- 928895
- 7C737F
- 675F69
- 524C54
- 3F3A40
- 2C282D
- 1A181B
- 0A090B
- 010101
Tony
- A49AA8
- A097A3
- 9C949F
- 98919A
- 948E96
- 908C91
- 8C898D
- 888689
- 848384
Harmonie kolorów
Komplementarna +180°
- A89DAC
Goose Wing Grey
- 9AA596
≈ Green Trellis
Analogowa -30° +30°
- A89DAC
Goose Wing Grey
- A0A0B1
≈ Santas Grey
- AE9CA4
≈ Laylock
Triada +120° +240°
- A89DAC
Goose Wing Grey
- AAA091
≈ Jackal
- 90A7A7
≈ In the Deep End
Komplementarna rozszczepiona +150° +210°
- A89DAC
Goose Wing Grey
- A3A391
≈ Cement
- 94A79E
≈ Lotus Leaf
Tetrada +90° +180° +270°
- A89DAC
Goose Wing Grey
- AF9D95
≈ Truly Taupe
- 9AA596
≈ Green Trellis
- 92A5AE
≈ Galleria Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.59:1 · APCA Lc 51
Ag
AAANa czerni
WCAG 8.08:1 · APCA Lc 51
Najlepszy kolor tekstu: #000000
WCAG 8.08:1 (AAA) · APCA Lc 51
Contrast pairs
Fragmenty kodu
CSS
:root {
--goose-wing-grey: #a89dac;
--goose-wing-grey-rgb: 168 157 172;
--goose-wing-grey-oklch: oklch(0.71 0.025 317.1);
}
.element {
color: var(--goose-wing-grey);
background-color: hsl(284 8% 65%);
border-color: oklch(0.71 0.025 317.1);
}Tailwind CSS v4
@theme {
--color-goose-wing-grey: #a89dac;
--color-goose-wing-grey-50: #f8f3fa;
--color-goose-wing-grey-100: #ece5ed;
--color-goose-wing-grey-200: #d9d1db;
--color-goose-wing-grey-300: #bdb4c0;
--color-goose-wing-grey-400: #a59aa8;
--color-goose-wing-grey-500: #8d8191;
--color-goose-wing-grey-600: #776e7b;
--color-goose-wing-grey-700: #5f5862;
--color-goose-wing-grey-800: #464048;
--color-goose-wing-grey-900: #302c32;
--color-goose-wing-grey-950: #1c191e;
}SCSS
$goose-wing-grey: #a89dac;
$goose-wing-grey-rgb: 168, 157, 172;
$goose-wing-grey-light: mix(#fff, $goose-wing-grey, 20%);
$goose-wing-grey-dark: mix(#000, $goose-wing-grey, 20%);
.element {
color: $goose-wing-grey;
box-shadow: 0 0 0 2px rgba($goose-wing-grey, 0.35);
}