Named color · #776F67
Grey Owl
Grey Owl is #776F67: rgb(119 111 103), hsl(30 7% 44%), oklch(0.547 0.016 67.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Grey Owl color name →
#776F67
oklch(0.547 0.016 67.5)
Color conversions
- HEX
- #776f67
- RGB
- rgb(119 111 103)
- HSL
- hsl(30 7% 44%)
- HWB
- hwb(30 40% 53%)
- OKLCH
- oklch(0.547 0.016 67.5)
- OKLab
- oklab(0.547 0.006 0.015)
- CIE Lab
- lab(47.39 2.11 5.65)
- LCH
- lch(47.39 6.03 69.5)
- CMYK
- cmyk(0% 7% 13% 53%)
Tints · Shades · Tones
Tints
- 847C75
- 918A83
- 9E9892
- ABA6A1
- B9B4B0
- C6C3BF
- D4D2CF
- E2E1DF
- F1F0EF
Shades
- 676059
- 57514B
- 47423D
- 383430
- 2A2723
- 1C1A17
- 100E0C
- 050404
- 010100
Tones
- 787169
- 79726C
- 7A746E
- 7B7671
- 7C7773
- 7C7976
- 7D7B78
- 7E7D7B
- 7F7E7D
Color harmonies
Complementary +180°
- 776F67
Grey Owl
- 6A727A
≈ Made in the Shade
Analogous -30° +30°
- 776F67
Grey Owl
- 796E6A
≈ Anchovy
- 737166
≈ King Fischer
Triadic +120° +240°
- 776F67
Grey Owl
- 677472
≈ Stairway to Heaven
- 736E78
≈ Exclusive Plum
Split-complementary +150° +210°
- 776F67
Grey Owl
- 677377
≈ Rain Shadow
- 6E707A
≈ Draw Your Sword
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 4.93:1 · APCA Lc 74
Ag
FailOn black
WCAG 4.25:1 · APCA Lc 27
Best text color: #FFFFFF
WCAG 4.93:1 (AA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--grey-owl: #776f67;
--grey-owl-rgb: 119 111 103;
--grey-owl-oklch: oklch(0.547 0.016 67.5);
}
.element {
color: var(--grey-owl);
background-color: hsl(30 7% 44%);
border-color: oklch(0.547 0.016 67.5);
}Tailwind CSS v4
@theme {
--color-grey-owl: #776f67;
--color-grey-owl-50: #f8f4f0;
--color-grey-owl-100: #ebe7e2;
--color-grey-owl-200: #d9d3cd;
--color-grey-owl-300: #bdb6af;
--color-grey-owl-400: #a59d95;
--color-grey-owl-500: #8d847b;
--color-grey-owl-600: #787068;
--color-grey-owl-700: #605a53;
--color-grey-owl-800: #46413d;
--color-grey-owl-900: #312d2a;
--color-grey-owl-950: #1d1a17;
}SCSS
$grey-owl: #776f67;
$grey-owl-rgb: 119, 111, 103;
$grey-owl-light: mix(#fff, $grey-owl, 20%);
$grey-owl-dark: mix(#000, $grey-owl, 20%);
.element {
color: $grey-owl;
box-shadow: 0 0 0 2px rgba($grey-owl, 0.35);
}