Nazwany kolor · #866F85
Purple Grey
Purple Grey to #866F85: rgb(134 111 133), hsl(303 9% 48%), oklch(0.571 0.043 327.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Purple Grey color name →
#866F85
oklch(0.571 0.043 327.5)
Konwersje koloru
- HEX
- #866f85
- RGB
- rgb(134 111 133)
- HSL
- hsl(303 9% 48%)
- HWB
- hwb(303 44% 47%)
- OKLCH
- oklch(0.571 0.043 327.5)
- OKLab
- oklab(0.571 0.036 -0.023)
- CIE Lab
- lab(49.64 12.4 -8.6)
- LCH
- lch(49.64 15.09 325.3)
- CMYK
- cmyk(0% 17% 1% 47%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 927C91
- 9D8A9C
- A998A8
- B5A6B4
- C1B5C0
- CDC3CD
- D9D2D9
- E6E1E6
- F2F0F2
Odcienie ciemniejsze
- 746073
- 625161
- 514250
- 403440
- 302730
- 211A21
- 130E13
- 060406
- 010101
Tony
- 857185
- 857284
- 847484
- 847683
- 837883
- 837982
- 827B82
- 817D81
- 817E81
Harmonie kolorów
Komplementarna +180°
- 866F85
Purple Grey
- 677F69
≈ Jadite
Analogowa -30° +30°
- 866F85
Purple Grey
- 7A738E
≈ Capercaillie Mauve
- 8E6D78
≈ Blunt Violet
Triada +120° +240°
- 866F85
Purple Grey
- 83775B
≈ Private Affair
- 597F85
≈ La Pineta
Komplementarna rozszczepiona +150° +210°
- 866F85
Purple Grey
- 757B5F
≈ Aceituna Picante
- 5C8077
≈ Hanging Moss
Tetrada +90° +180° +270°
- 866F85
Purple Grey
- 8C725F
≈ Nuthatch
- 677F69
≈ Jadite
- 607C8E
≈ Whale Shark
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.53:1 · APCA Lc 72
Ag
AANa czerni
WCAG 4.62:1 · APCA Lc 30
Najlepszy kolor tekstu: #000000
WCAG 4.62:1 (AA) · APCA Lc 30
Contrast pairs
Fragmenty kodu
CSS
:root {
--purple-grey: #866f85;
--purple-grey-rgb: 134 111 133;
--purple-grey-oklch: oklch(0.571 0.043 327.5);
}
.element {
color: var(--purple-grey);
background-color: hsl(303 9% 48%);
border-color: oklch(0.571 0.043 327.5);
}Tailwind CSS v4
@theme {
--color-purple-grey: #866f85;
--color-purple-grey-50: #fdf1fb;
--color-purple-grey-100: #f1e3ef;
--color-purple-grey-200: #dfcedd;
--color-purple-grey-300: #c5b0c2;
--color-purple-grey-400: #ad96ac;
--color-purple-grey-500: #967c95;
--color-purple-grey-600: #7f697e;
--color-purple-grey-700: #665465;
--color-purple-grey-800: #4a3d4b;
--color-purple-grey-900: #342a34;
--color-purple-grey-950: #1f181f;
}SCSS
$purple-grey: #866f85;
$purple-grey-rgb: 134, 111, 133;
$purple-grey-light: mix(#fff, $purple-grey, 20%);
$purple-grey-dark: mix(#000, $purple-grey, 20%);
.element {
color: $purple-grey;
box-shadow: 0 0 0 2px rgba($purple-grey, 0.35);
}