Benannte Farbe · #616564
Roycroft Pewter
Roycroft Pewter ist #616564: rgb(97 101 100), hsl(165 2% 39%), oklch(0.503 0.005 179.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Roycroft Pewter color name →
#616564
oklch(0.503 0.005 179.6)
Farbumrechnungen
- HEX
- #616564
- RGB
- rgb(97 101 100)
- HSL
- hsl(165 2% 39%)
- HWB
- hwb(165 38% 60%)
- OKLCH
- oklch(0.503 0.005 179.6)
- OKLab
- oklab(0.503 -0.005 0)
- CIE Lab
- lab(42.4 -1.77 0)
- LCH
- lch(42.4 1.77 180.1)
- CMYK
- cmyk(4% 0% 1% 60%)
Tints · Shades · Tones
Tints
- 6F7372
- 7E8281
- 8D9090
- 9D9F9F
- ADAFAE
- BDBEBE
- CDCECE
- DDDEDE
- EEEFEE
Shades
- 535756
- 464948
- 393C3B
- 2D2F2E
- 212222
- 151716
- 0B0C0B
- 030303
- 000000
Tones
- 646867
- 676A6A
- 6A6D6C
- 6D706F
- 707272
- 737575
- 777877
- 7A7B7A
- 7D7D7D
Farbharmonien
Komplementär +180°
- 616564
Roycroft Pewter
- 676364
≈ Hard Coal
Analog -30° +30°
- 616564
Roycroft Pewter
- 626562
≈ Grizzle Grey
- 616566
≈ Roycroft Pewter
Triadisch +120° +240°
- 616564
Roycroft Pewter
- 646367
≈ Digital
- 666361
≈ Hard Coal
Geteilt komplementär +150° +210°
- 616564
Roycroft Pewter
- 666365
≈ Hard Coal
- 676362
≈ Hard Coal
Tetradisch +90° +180° +270°
- 616564
Roycroft Pewter
- 636467
≈ Digital
- 676364
≈ Hard Coal
- 656461
≈ Grizzle Grey
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 5.90:1 · APCA Lc 80
Ag
FailAuf Schwarz
WCAG 3.55:1 · APCA Lc 22
Beste Textfarbe: #FFFFFF
WCAG 5.90:1 (AA) · APCA Lc 80
Contrast pairs
Code-Snippets
CSS
:root {
--roycroft-pewter: #616564;
--roycroft-pewter-rgb: 97 101 100;
--roycroft-pewter-oklch: oklch(0.503 0.005 179.6);
}
.element {
color: var(--roycroft-pewter);
background-color: hsl(165 2% 39%);
border-color: oklch(0.503 0.005 179.6);
}Tailwind CSS v4
@theme {
--color-roycroft-pewter: #616564;
--color-roycroft-pewter-50: #f3f6f5;
--color-roycroft-pewter-100: #e6e8e8;
--color-roycroft-pewter-200: #d2d5d4;
--color-roycroft-pewter-300: #b5b8b7;
--color-roycroft-pewter-400: #9b9f9e;
--color-roycroft-pewter-500: #838786;
--color-roycroft-pewter-600: #6f7271;
--color-roycroft-pewter-700: #585c5b;
--color-roycroft-pewter-800: #414342;
--color-roycroft-pewter-900: #2c2e2e;
--color-roycroft-pewter-950: #1a1b1b;
}SCSS
$roycroft-pewter: #616564;
$roycroft-pewter-rgb: 97, 101, 100;
$roycroft-pewter-light: mix(#fff, $roycroft-pewter, 20%);
$roycroft-pewter-dark: mix(#000, $roycroft-pewter, 20%);
.element {
color: $roycroft-pewter;
box-shadow: 0 0 0 2px rgba($roycroft-pewter, 0.35);
}