Benannte Farbe · #7A687F
Purplish Grey
Purplish Grey ist #7A687F: rgb(122 104 127), hsl(287 10% 45%), oklch(0.542 0.041 318.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Purplish Grey color name →
#7A687F
oklch(0.542 0.041 318.8)
Farbumrechnungen
- HEX
- #7a687f
- RGB
- rgb(122 104 127)
- HSL
- hsl(287 10% 45%)
- HWB
- hwb(287 41% 50%)
- OKLCH
- oklch(0.542 0.041 318.8)
- OKLab
- oklab(0.542 0.031 -0.027)
- CIE Lab
- lab(46.37 10.74 -10.06)
- LCH
- lch(46.37 14.72 316.9)
- CMYK
- cmyk(4% 18% 0% 50%)
Tints · Shades · Tones
Tints
- 87768B
- 938497
- A093A4
- ADA2B0
- BAB1BD
- C8C0CA
- D5CFD7
- E3DFE4
- F1EFF2
Shades
- 69596E
- 594B5D
- 493E4C
- 3A303C
- 2B242D
- 1D181F
- 100C11
- 050406
- 010001
Tones
- 7B6A7F
- 7B6D7F
- 7C6F7F
- 7D7280
- 7D7480
- 7E7680
- 7E7980
- 7F7B80
- 7F7E80
Farbharmonien
Komplementär +180°
- 7A687F
Purplish Grey
- 63755E
≈ Finlandia
Analog -30° +30°
- 7A687F
Purplish Grey
- 6E6C86
≈ Great Grape
- 826673
≈ Opera
Triadisch +120° +240°
- 7A687F
Purplish Grey
- 7D6D54
≈ Ye Olde Rustic Colour
- 537778
≈ Sagebrush Green
Geteilt komplementär +150° +210°
- 7A687F
Purplish Grey
- 717256
≈ Herb Cornucopia
- 58776B
≈ Wishard
Tetradisch +90° +180° +270°
- 7A687F
Purplish Grey
- 84695A
≈ Quartersawn Oak
- 63755E
≈ Finlandia
- 567483
≈ San Miguel Blue
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 5.10:1 · APCA Lc 75
Ag
FailAuf Schwarz
WCAG 4.11:1 · APCA Lc 27
Beste Textfarbe: #FFFFFF
WCAG 5.10:1 (AA) · APCA Lc 75
Contrast pairs
Code-Snippets
CSS
:root {
--purplish-grey: #7a687f;
--purplish-grey-rgb: 122 104 127;
--purplish-grey-oklch: oklch(0.542 0.041 318.8);
}
.element {
color: var(--purplish-grey);
background-color: hsl(287 10% 45%);
border-color: oklch(0.542 0.041 318.8);
}Tailwind CSS v4
@theme {
--color-purplish-grey: #7a687f;
--color-purplish-grey-50: #fbf1fd;
--color-purplish-grey-100: #eee4f0;
--color-purplish-grey-200: #ddcfdf;
--color-purplish-grey-300: #c1b1c5;
--color-purplish-grey-400: #a997ae;
--color-purplish-grey-500: #927e98;
--color-purplish-grey-600: #7c6b80;
--color-purplish-grey-700: #635567;
--color-purplish-grey-800: #483e4c;
--color-purplish-grey-900: #322b35;
--color-purplish-grey-950: #1e1820;
}SCSS
$purplish-grey: #7a687f;
$purplish-grey-rgb: 122, 104, 127;
$purplish-grey-light: mix(#fff, $purplish-grey, 20%);
$purplish-grey-dark: mix(#000, $purplish-grey, 20%);
.element {
color: $purplish-grey;
box-shadow: 0 0 0 2px rgba($purplish-grey, 0.35);
}