Named color · #A7A699
Historical Grey
Historical Grey is #A7A699: rgb(167 166 153), hsl(56 7% 63%), oklch(0.722 0.018 103.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Historical Grey color name →
#A7A699
oklch(0.722 0.018 103.3)
Color conversions
- HEX
- #a7a699
- RGB
- rgb(167 166 153)
- HSL
- hsl(56 7% 63%)
- HWB
- hwb(56 60% 35%)
- OKLCH
- oklch(0.722 0.018 103.3)
- OKLab
- oklab(0.722 -0.004 0.018)
- CIE Lab
- lab(67.92 -1.39 6.89)
- LCH
- lch(67.92 7.03 101.4)
- CMYK
- cmyk(0% 1% 8% 35%)
Tints · Shades · Tones
Tints
- AFAFA3
- B8B7AD
- C1C0B7
- C9C9C1
- D2D2CB
- DBDBD5
- E4E4DF
- EDEDEA
- F6F6F4
Shades
- 919084
- 7B7A70
- 66655D
- 52514A
- 3E3E38
- 2C2B27
- 1A1A17
- 0A0A08
- 010101
Tones
- A3A296
- 9F9E94
- 9B9A91
- 97978F
- 93938C
- 8F8F8A
- 8B8B87
- 888785
- 848482
Color harmonies
Complementary +180°
- A7A699
Historical Grey
- A3A4B1
≈ Pandemonium
Analogous -30° +30°
- A7A699
Historical Grey
- ADA499
≈ Warm Grey Flannel
- A1A89C
≈ Secret Retreat
Triadic +120° +240°
- A7A699
Historical Grey
- 9AA8AE
≈ Nor’wester
- AEA1A8
≈ Beijing Moon
Split-complementary +150° +210°
- A7A699
Historical Grey
- 9DA6B1
≈ Great Falls
- A9A2AE
≈ Luxe Lilac
Tetradic +90° +180° +270°
- A7A699
Historical Grey
- 99A9A8
≈ Oily Steel
- A3A4B1
≈ Pandemonium
- B1A1A2
≈ Dusky Hyacinth
Contrast & accessibility
Ag
FailOn white
WCAG 2.45:1 · APCA Lc 48
Ag
AAAOn black
WCAG 8.55:1 · APCA Lc 54
Best text color: #000000
WCAG 8.55:1 (AAA) · APCA Lc 54
Contrast pairs
Code snippets
CSS
:root {
--historical-grey: #a7a699;
--historical-grey-rgb: 167 166 153;
--historical-grey-oklch: oklch(0.722 0.018 103.3);
}
.element {
color: var(--historical-grey);
background-color: hsl(56 7% 63%);
border-color: oklch(0.722 0.018 103.3);
}Tailwind CSS v4
@theme {
--color-historical-grey: #a7a699;
--color-historical-grey-50: #f6f5f0;
--color-historical-grey-100: #e8e8e1;
--color-historical-grey-200: #d5d5cc;
--color-historical-grey-300: #b8b8ad;
--color-historical-grey-400: #a09f93;
--color-historical-grey-500: #888779;
--color-historical-grey-600: #737267;
--color-historical-grey-700: #5c5b52;
--color-historical-grey-800: #44433b;
--color-historical-grey-900: #2f2e29;
--color-historical-grey-950: #1b1b17;
}SCSS
$historical-grey: #a7a699;
$historical-grey-rgb: 167, 166, 153;
$historical-grey-light: mix(#fff, $historical-grey, 20%);
$historical-grey-dark: mix(#000, $historical-grey, 20%);
.element {
color: $historical-grey;
box-shadow: 0 0 0 2px rgba($historical-grey, 0.35);
}