Benannte Farbe · #929E9D
Hatteras Grey
Hatteras Grey ist #929E9D: rgb(146 158 157), hsl(175 6% 60%), oklch(0.689 0.014 190.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Hatteras Grey color name →
#929E9D
oklch(0.689 0.014 190.8)
Farbumrechnungen
- HEX
- #929e9d
- RGB
- rgb(146 158 157)
- HSL
- hsl(175 6% 60%)
- HWB
- hwb(175 57% 38%)
- OKLCH
- oklch(0.689 0.014 190.8)
- OKLab
- oklab(0.689 -0.014 -0.003)
- CIE Lab
- lab(64.12 -4.58 -1.02)
- LCH
- lch(64.12 4.69 192.6)
- CMYK
- cmyk(8% 0% 1% 38%)
Tints · Shades · Tones
Tints
- 9CA7A6
- A7B1B0
- B2BAB9
- BCC4C3
- C7CDCD
- D2D7D7
- DDE1E1
- E8EBEB
- F4F5F5
Shades
- 7E8988
- 6B7473
- 58605F
- 464D4C
- 353A3A
- 252928
- 161818
- 080909
- 010101
Tones
- 909B9A
- 8E9897
- 8D9594
- 8B9291
- 898F8E
- 878C8B
- 858989
- 848686
- 828383
Farbharmonien
Komplementär +180°
- 929E9D
Hatteras Grey
- A39899
≈ Sugar Tree
Analog -30° +30°
- 929E9D
Hatteras Grey
- 949E98
≈ Gun Barrel
- 929DA1
≈ Soft Pumice
Triadisch +120° +240°
- 929E9D
Hatteras Grey
- 9E99A2
≈ Lavender Lake
- A19A92
≈ Grey Flanks
Geteilt komplementär +150° +210°
- 929E9D
Hatteras Grey
- A1989E
≈ Sugilite
- A39995
≈ Twilight Taupe
Tetradisch +90° +180° +270°
- 929E9D
Hatteras Grey
- 999AA4
≈ Angry Gargoyle
- A39899
≈ Sugar Tree
- 9D9C92
≈ Dawn
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.76:1 · APCA Lc 53
Ag
AAAAuf Schwarz
WCAG 7.59:1 · APCA Lc 48
Beste Textfarbe: #000000
WCAG 7.59:1 (AAA) · APCA Lc 48
Contrast pairs
Code-Snippets
CSS
:root {
--hatteras-grey: #929e9d;
--hatteras-grey-rgb: 146 158 157;
--hatteras-grey-oklch: oklch(0.689 0.014 190.8);
}
.element {
color: var(--hatteras-grey);
background-color: hsl(175 6% 60%);
border-color: oklch(0.689 0.014 190.8);
}Tailwind CSS v4
@theme {
--color-hatteras-grey: #929e9d;
--color-hatteras-grey-50: #f1f6f6;
--color-hatteras-grey-100: #e3e9e9;
--color-hatteras-grey-200: #ced6d6;
--color-hatteras-grey-300: #b0bab9;
--color-hatteras-grey-400: #96a1a0;
--color-hatteras-grey-500: #7c8988;
--color-hatteras-grey-600: #697473;
--color-hatteras-grey-700: #545d5c;
--color-hatteras-grey-800: #3d4443;
--color-hatteras-grey-900: #2a2f2e;
--color-hatteras-grey-950: #181b1b;
}SCSS
$hatteras-grey: #929e9d;
$hatteras-grey-rgb: 146, 158, 157;
$hatteras-grey-light: mix(#fff, $hatteras-grey, 20%);
$hatteras-grey-dark: mix(#000, $hatteras-grey, 20%);
.element {
color: $hatteras-grey;
box-shadow: 0 0 0 2px rgba($hatteras-grey, 0.35);
}