Named color · #667C71
Cypress Garden
Cypress Garden is #667C71: rgb(102 124 113), hsl(150 10% 44%), oklch(0.565 0.031 163.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Cypress Garden color name →
#667C71
oklch(0.565 0.031 163.6)
Color conversions
- HEX
- #667c71
- RGB
- rgb(102 124 113)
- HSL
- hsl(150 10% 44%)
- HWB
- hwb(150 40% 51%)
- OKLCH
- oklch(0.565 0.031 163.6)
- OKLab
- oklab(0.565 -0.03 0.009)
- CIE Lab
- lab(49.99 -10.13 3.22)
- LCH
- lch(49.99 10.63 162.4)
- CMYK
- cmyk(18% 0% 9% 51%)
Tints · Shades · Tones
Tints
- 74887E
- 83958C
- 92A299
- A1AEA7
- B0BBB5
- BFC9C4
- CFD6D2
- DFE4E1
- EFF1F0
Shades
- 586B61
- 4A5A52
- 3C4A43
- 2F3B35
- 232C27
- 171E1A
- 0C110E
- 040504
- 000101
Tones
- 697C72
- 6B7D74
- 6E7D75
- 717E77
- 737E78
- 767E7A
- 787F7B
- 7B7F7D
- 7D807E
Color harmonies
Complementary +180°
- 667C71
Cypress Garden
- 846F7B
≈ Innocent Pink
Analogous -30° +30°
- 667C71
Cypress Garden
- 6F7A68
≈ Sedge Green
- 617C7B
≈ Eye Grey
Triadic +120° +240°
- 667C71
Cypress Garden
- 737488
≈ Ash Mauve
- 867168
≈ Pipe
Split-complementary +150° +210°
- 667C71
Cypress Garden
- 7D7183
≈ British Grey Mauve
- 876F71
≈ Sandstone Red Grey
Tetradic +90° +180° +270°
- 667C71
Cypress Garden
- 6A7788
≈ Cypress Grey Blue
- 846F7B
≈ Innocent Pink
- 817462
≈ Villa Oliva
Contrast & accessibility
Ag
FailOn white
WCAG 4.48:1 · APCA Lc 71
Ag
AAOn black
WCAG 4.68:1 · APCA Lc 31
Best text color: #000000
WCAG 4.68:1 (AA) · APCA Lc 31
Contrast pairs
Code snippets
CSS
:root {
--cypress-garden: #667c71;
--cypress-garden-rgb: 102 124 113;
--cypress-garden-oklch: oklch(0.565 0.031 163.6);
}
.element {
color: var(--cypress-garden);
background-color: hsl(150 10% 44%);
border-color: oklch(0.565 0.031 163.6);
}Tailwind CSS v4
@theme {
--color-cypress-garden: #667c71;
--color-cypress-garden-50: #edf8f3;
--color-cypress-garden-100: #dfebe5;
--color-cypress-garden-200: #c9d9d1;
--color-cypress-garden-300: #aabdb4;
--color-cypress-garden-400: #8fa499;
--color-cypress-garden-500: #748d81;
--color-cypress-garden-600: #62776d;
--color-cypress-garden-700: #4f5f57;
--color-cypress-garden-800: #39463f;
--color-cypress-garden-900: #27302b;
--color-cypress-garden-950: #151d19;
}SCSS
$cypress-garden: #667c71;
$cypress-garden-rgb: 102, 124, 113;
$cypress-garden-light: mix(#fff, $cypress-garden, 20%);
$cypress-garden-dark: mix(#000, $cypress-garden, 20%);
.element {
color: $cypress-garden;
box-shadow: 0 0 0 2px rgba($cypress-garden, 0.35);
}