Named color · #647D8E
Pier 17 Steel
Pier 17 Steel is #647D8E: rgb(100 125 142), hsl(204 17% 47%), oklch(0.576 0.039 238.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Pier 17 Steel color name →
#647D8E
oklch(0.576 0.039 238.1)
Color conversions
- HEX
- #647d8e
- RGB
- rgb(100 125 142)
- HSL
- hsl(204 17% 47%)
- HWB
- hwb(204 39% 44%)
- OKLCH
- oklch(0.576 0.039 238.1)
- OKLab
- oklab(0.576 -0.021 -0.033)
- CIE Lab
- lab(50.89 -6.19 -12.38)
- LCH
- lch(50.89 13.84 243.4)
- CMYK
- cmyk(30% 12% 0% 44%)
Tints · Shades · Tones
Tints
- 738999
- 8196A4
- 90A2AF
- A0AFBA
- AFBCC5
- BFC9D1
- CED6DC
- DEE4E8
- EFF1F3
Shades
- 566C7B
- 485B68
- 3B4B56
- 2E3B44
- 222C34
- 161E24
- 0B1115
- 030507
- 000101
Tones
- 677D8D
- 6A7E8B
- 6D7E8A
- 707E89
- 727F87
- 757F86
- 787F84
- 7B7F83
- 7D8081
Color harmonies
Complementary +180°
- 647D8E
Pier 17 Steel
- 8B7463
≈ Tree Branch
Analogous -30° +30°
- 647D8E
Pier 17 Steel
- 5E8085
≈ Refuge
- 6F7991
≈ Causeway
Triadic +120° +240°
- 647D8E
Pier 17 Steel
- 8D7079
≈ Myself
- 777D63
≈ Expanse
Split-complementary +150° +210°
- 647D8E
Pier 17 Steel
- 8F716C
≈ Oakwood Brown
- 83785F
≈ Brownish Grey
Tetradic +90° +180° +270°
- 647D8E
Pier 17 Steel
- 867185
≈ Sapphire Pink
- 8B7463
≈ Tree Branch
- 6A806C
≈ Ecological
Contrast & accessibility
Ag
FailOn white
WCAG 4.31:1 · APCA Lc 70
Ag
AAOn black
WCAG 4.86:1 · APCA Lc 32
Best text color: #000000
WCAG 4.86:1 (AA) · APCA Lc 32
Contrast pairs
Code snippets
CSS
:root {
--pier-17-steel: #647d8e;
--pier-17-steel-rgb: 100 125 142;
--pier-17-steel-oklch: oklch(0.576 0.039 238.1);
}
.element {
color: var(--pier-17-steel);
background-color: hsl(204 17% 47%);
border-color: oklch(0.576 0.039 238.1);
}Tailwind CSS v4
@theme {
--color-pier-17-steel: #647d8e;
--color-pier-17-steel-50: #ecf7ff;
--color-pier-17-steel-100: #ddeaf4;
--color-pier-17-steel-200: #c6d7e4;
--color-pier-17-steel-300: #a6bbca;
--color-pier-17-steel-400: #8aa2b3;
--color-pier-17-steel-500: #6e8a9d;
--color-pier-17-steel-600: #5e7585;
--color-pier-17-steel-700: #4b5e6b;
--color-pier-17-steel-800: #36454e;
--color-pier-17-steel-900: #253036;
--color-pier-17-steel-950: #131c21;
}SCSS
$pier-17-steel: #647d8e;
$pier-17-steel-rgb: 100, 125, 142;
$pier-17-steel-light: mix(#fff, $pier-17-steel, 20%);
$pier-17-steel-dark: mix(#000, $pier-17-steel, 20%);
.element {
color: $pier-17-steel;
box-shadow: 0 0 0 2px rgba($pier-17-steel, 0.35);
}