Named color · #3D4E67
Calico Dress
Calico Dress is #3D4E67: rgb(61 78 103), hsl(216 26% 32%), oklch(0.42 0.047 257.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Calico Dress color name →
#3D4E67
oklch(0.42 0.047 257.9)
Color conversions
- HEX
- #3d4e67
- RGB
- rgb(61 78 103)
- HSL
- hsl(216 26% 32%)
- HWB
- hwb(216 24% 60%)
- OKLCH
- oklch(0.42 0.047 257.9)
- OKLab
- oklab(0.42 -0.01 -0.046)
- CIE Lab
- lab(32.53 -1.5 -16.9)
- LCH
- lch(32.53 16.96 264.9)
- CMYK
- cmyk(41% 24% 0% 60%)
Tints · Shades · Tones
Tints
- 4E5E75
- 606F84
- 727F93
- 8591A1
- 99A2B1
- ACB4C0
- C0C6CF
- D5D9DF
- EAECEF
Shades
- 344359
- 2B384B
- 222D3D
- 1A2330
- 121923
- 0A0F17
- 04070C
- 010204
- 000000
Tones
- 43536A
- 4A586C
- 515D6F
- 576271
- 5E6774
- 656C76
- 6B7179
- 72767B
- 797B7E
Color harmonies
Complementary +180°
- 3D4E67
Calico Dress
- 5B4A2F
≈ Hóng Zōng Brown
Analogous -30° +30°
- 3D4E67
Calico Dress
- 305261
≈ Blue Bayberry
- 4C4966
≈ Darlak
Triadic +120° +240°
- 3D4E67
Calico Dress
- 654343
≈ Wild Thing
- 40533A
≈ Okroshka
Split-complementary +150° +210°
- 3D4E67
Calico Dress
- 634536
≈ Thai Teak
- 4F4F30
≈ Waiouru
Tetradic +90° +180° +270°
- 3D4E67
Calico Dress
- 614352
≈ Miranda’s Spike
- 5B4A2F
≈ Hóng Zōng Brown
- 325648
≈ Hypnotism
Contrast & accessibility
Ag
AAAOn white
WCAG 8.45:1 · APCA Lc 89
Ag
FailOn black
WCAG 2.48:1 · APCA Lc 13
Best text color: #FFFFFF
WCAG 8.45:1 (AAA) · APCA Lc 89
Contrast pairs
Code snippets
CSS
:root {
--calico-dress: #3d4e67;
--calico-dress-rgb: 61 78 103;
--calico-dress-oklch: oklch(0.42 0.047 257.9);
}
.element {
color: var(--calico-dress);
background-color: hsl(216 26% 32%);
border-color: oklch(0.42 0.047 257.9);
}Tailwind CSS v4
@theme {
--color-calico-dress: #3d4e67;
--color-calico-dress-50: #edf6ff;
--color-calico-dress-100: #dfe9f8;
--color-calico-dress-200: #c9d5e9;
--color-calico-dress-300: #aab8d0;
--color-calico-dress-400: #8da0bb;
--color-calico-dress-500: #7388a6;
--color-calico-dress-600: #61738c;
--color-calico-dress-700: #4e5c70;
--color-calico-dress-800: #384353;
--color-calico-dress-900: #262e3a;
--color-calico-dress-950: #141b24;
}SCSS
$calico-dress: #3d4e67;
$calico-dress-rgb: 61, 78, 103;
$calico-dress-light: mix(#fff, $calico-dress, 20%);
$calico-dress-dark: mix(#000, $calico-dress, 20%);
.element {
color: $calico-dress;
box-shadow: 0 0 0 2px rgba($calico-dress, 0.35);
}