Named color · #354E4B
Silk Crepe Grey
Silk Crepe Grey is #354E4B: rgb(53 78 75), hsl(173 19% 26%), oklch(0.403 0.031 186.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Silk Crepe Grey color name →
#354E4B
oklch(0.403 0.031 186.7)
Color conversions
- HEX
- #354e4b
- RGB
- rgb(53 78 75)
- HSL
- hsl(173 19% 26%)
- HWB
- hwb(173 21% 69%)
- OKLCH
- oklch(0.403 0.031 186.7)
- OKLab
- oklab(0.403 -0.031 -0.004)
- CIE Lab
- lab(31.07 -10.49 -1.45)
- LCH
- lch(31.07 10.59 187.9)
- CMYK
- cmyk(32% 0% 4% 69%)
Tints · Shades · Tones
Tints
- 475E5B
- 5A6E6C
- 6D7F7D
- 81908E
- 95A2A0
- A9B4B2
- BEC6C5
- D3D9D8
- E9ECEB
Shades
- 2D4340
- 253835
- 1D2D2B
- 152321
- 0E1917
- 080F0E
- 030706
- 010202
- 000000
Tones
- 3C5350
- 445855
- 4B5D5A
- 536260
- 5A6765
- 626C6A
- 697170
- 717675
- 787B7A
Color harmonies
Complementary +180°
- 354E4B
Silk Crepe Grey
- 584245
≈ Wood-Black Red
Analogous -30° +30°
- 354E4B
Silk Crepe Grey
- 3B4E42
≈ Amphitrite
- 354D53
≈ Iron Head
Triadic +120° +240°
- 354E4B
Silk Crepe Grey
- 4D4456
≈ Violet Intense
- 544537
≈ Well-Bred Brown
Split-complementary +150° +210°
- 354E4B
Silk Crepe Grey
- 54424F
≈ Punchit Purple
- 58433D
≈ Cordovan Leather
Tetradic +90° +180° +270°
- 354E4B
Silk Crepe Grey
- 444759
≈ Blue Nights
- 584245
≈ Wood-Black Red
- 4D4935
≈ Olive Leaf
Contrast & accessibility
Ag
AAAOn white
WCAG 8.96:1 · APCA Lc 91
Ag
FailOn black
WCAG 2.34:1 · APCA Lc 12
Best text color: #FFFFFF
WCAG 8.96:1 (AAA) · APCA Lc 91
Contrast pairs
Code snippets
CSS
:root {
--silk-crepe-grey: #354e4b;
--silk-crepe-grey-rgb: 53 78 75;
--silk-crepe-grey-oklch: oklch(0.403 0.031 186.7);
}
.element {
color: var(--silk-crepe-grey);
background-color: hsl(173 19% 26%);
border-color: oklch(0.403 0.031 186.7);
}Tailwind CSS v4
@theme {
--color-silk-crepe-grey: #354e4b;
--color-silk-crepe-grey-50: #ecf8f7;
--color-silk-crepe-grey-100: #ddebea;
--color-silk-crepe-grey-200: #c6d9d7;
--color-silk-crepe-grey-300: #a6bdba;
--color-silk-crepe-grey-400: #8ba5a1;
--color-silk-crepe-grey-500: #6f8d89;
--color-silk-crepe-grey-600: #5f7774;
--color-silk-crepe-grey-700: #4b605d;
--color-silk-crepe-grey-800: #374644;
--color-silk-crepe-grey-900: #25302f;
--color-silk-crepe-grey-950: #141d1b;
}SCSS
$silk-crepe-grey: #354e4b;
$silk-crepe-grey-rgb: 53, 78, 75;
$silk-crepe-grey-light: mix(#fff, $silk-crepe-grey, 20%);
$silk-crepe-grey-dark: mix(#000, $silk-crepe-grey, 20%);
.element {
color: $silk-crepe-grey;
box-shadow: 0 0 0 2px rgba($silk-crepe-grey, 0.35);
}