Named color · #C5C1A3
Northern Landscape
Northern Landscape is #C5C1A3: rgb(197 193 163), hsl(53 23% 71%), oklch(0.806 0.041 101). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Northern Landscape color name →
#C5C1A3
oklch(0.806 0.041 101)
Color conversions
- HEX
- #c5c1a3
- RGB
- rgb(197 193 163)
- HSL
- hsl(53 23% 71%)
- HWB
- hwb(53 64% 23%)
- OKLCH
- oklch(0.806 0.041 101)
- OKLab
- oklab(0.806 -0.008 0.04)
- CIE Lab
- lab(77.8 -2.28 15.71)
- LCH
- lch(77.8 15.87 98.3)
- CMYK
- cmyk(0% 2% 17% 23%)
Tints · Shades · Tones
Tints
- CBC7AC
- D0CDB5
- D6D3BE
- DCDAC7
- E2E0D0
- E7E6DA
- EDECE3
- F3F2EC
- F9F9F6
Shades
- ABA78D
- 928F78
- 797763
- 615F4F
- 4B493C
- 35342A
- 212019
- 0E0E0A
- 020201
Tones
- BEBAA0
- B7B49C
- B0AD99
- A9A695
- A2A092
- 9B998E
- 94938B
- 8D8D87
- 878684
Color harmonies
Complementary +180°
- C5C1A3
Northern Landscape
- BABDDA
≈ Rhapsody Lilac
Analogous -30° +30°
- C5C1A3
Northern Landscape
- D1BCA4
≈ Classic Taupe
- B7C6AA
≈ Zion
Triadic +120° +240°
- C5C1A3
Northern Landscape
- A4C6D3
≈ Blue Dam
- D3B6C8
≈ Mary Poppins
Split-complementary +150° +210°
- C5C1A3
Northern Landscape
- ADC2DA
≈ Cloudy Blue
- C8B9D4
≈ Purple Shine
Tetradic +90° +180° +270°
- C5C1A3
Northern Landscape
- A2C9C6
≈ Ocean Boulevard
- BABDDA
≈ Rhapsody Lilac
- D9B5B9
≈ Pink Flare
Contrast & accessibility
Ag
FailOn white
WCAG 1.82:1 · APCA Lc 34
Ag
AAAOn black
WCAG 11.53:1 · APCA Lc 69
Best text color: #000000
WCAG 11.53:1 (AAA) · APCA Lc 69
Contrast pairs
Code snippets
CSS
:root {
--northern-landscape: #c5c1a3;
--northern-landscape-rgb: 197 193 163;
--northern-landscape-oklch: oklch(0.806 0.041 101);
}
.element {
color: var(--northern-landscape);
background-color: hsl(53 23% 71%);
border-color: oklch(0.806 0.041 101);
}Tailwind CSS v4
@theme {
--color-northern-landscape: #c5c1a3;
--color-northern-landscape-50: #f7f6e9;
--color-northern-landscape-100: #eae9d9;
--color-northern-landscape-200: #d7d5c2;
--color-northern-landscape-300: #bbb9a1;
--color-northern-landscape-400: #a3a084;
--color-northern-landscape-500: #8c8768;
--color-northern-landscape-600: #767358;
--color-northern-landscape-700: #5f5c46;
--color-northern-landscape-800: #464333;
--color-northern-landscape-900: #302e22;
--color-northern-landscape-950: #1d1b11;
}SCSS
$northern-landscape: #c5c1a3;
$northern-landscape-rgb: 197, 193, 163;
$northern-landscape-light: mix(#fff, $northern-landscape, 20%);
$northern-landscape-dark: mix(#000, $northern-landscape, 20%);
.element {
color: $northern-landscape;
box-shadow: 0 0 0 2px rgba($northern-landscape, 0.35);
}