Named color · #3D5C77
China Pattern
China Pattern is #3D5C77: rgb(61 92 119), hsl(208 32% 35%), oklch(0.462 0.057 245.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · China Pattern color name →
#3D5C77
oklch(0.462 0.057 245.7)
Color conversions
- HEX
- #3d5c77
- RGB
- rgb(61 92 119)
- HSL
- hsl(208 32% 35%)
- HWB
- hwb(208 24% 53%)
- OKLCH
- oklch(0.462 0.057 245.7)
- OKLab
- oklab(0.462 -0.024 -0.052)
- CIE Lab
- lab(37.53 -5.67 -19.15)
- LCH
- lch(37.53 19.97 253.5)
- CMYK
- cmyk(49% 23% 0% 53%)
Tints · Shades · Tones
Tints
- 4F6B84
- 617B91
- 748A9E
- 879AAC
- 9AAAB9
- ADBBC7
- C1CCD5
- D6DCE3
- EAEEF1
Shades
- 344F67
- 2B4257
- 223647
- 1A2A38
- 121F2A
- 0A141C
- 040A10
- 010305
- 000001
Tones
- 446078
- 4B6379
- 51677A
- 586B7B
- 5F6E7C
- 65727D
- 6C757E
- 73797F
- 797C7F
Color harmonies
Complementary +180°
- 3D5C77
China Pattern
- 6F5235
≈ Rustic Cabin
Analogous -30° +30°
- 3D5C77
China Pattern
- 2F616D
≈ After the Storm
- 505679
≈ Alpha Centauri
Triadic +120° +240°
- 3D5C77
China Pattern
- 744B54
≈ Plum Wine
- 515F3B
≈ Cactus Green
Split-complementary +150° +210°
- 3D5C77
China Pattern
- 754D42
≈ November Foliage
- 625932
≈ Beach Casuarina
Tetradic +90° +180° +270°
- 3D5C77
China Pattern
- 6D4C65
≈ Dirty Purple
- 6F5235
≈ Rustic Cabin
- 3D624B
≈ Windy Pine
Contrast & accessibility
Ag
AAAOn white
WCAG 7.01:1 · APCA Lc 84
Ag
FailOn black
WCAG 2.99:1 · APCA Lc 18
Best text color: #FFFFFF
WCAG 7.01:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--china-pattern: #3d5c77;
--china-pattern-rgb: 61 92 119;
--china-pattern-oklch: oklch(0.462 0.057 245.7);
}
.element {
color: var(--china-pattern);
background-color: hsl(208 32% 35%);
border-color: oklch(0.462 0.057 245.7);
}Tailwind CSS v4
@theme {
--color-china-pattern: #3d5c77;
--color-china-pattern-50: #e9f7ff;
--color-china-pattern-100: #d9eafb;
--color-china-pattern-200: #c2d7ec;
--color-china-pattern-300: #a1bbd4;
--color-china-pattern-400: #83a2bf;
--color-china-pattern-500: #668aaa;
--color-china-pattern-600: #577590;
--color-china-pattern-700: #455e73;
--color-china-pattern-800: #314555;
--color-china-pattern-900: #21303b;
--color-china-pattern-950: #111c25;
}SCSS
$china-pattern: #3d5c77;
$china-pattern-rgb: 61, 92, 119;
$china-pattern-light: mix(#fff, $china-pattern, 20%);
$china-pattern-dark: mix(#000, $china-pattern, 20%);
.element {
color: $china-pattern;
box-shadow: 0 0 0 2px rgba($china-pattern, 0.35);
}