Serene Split-complementary Color Scheme
Five colors arranged by the split-complementary rule around Serene (#DCE3E4), each snapped to its nearest named color.
#DCE3E4
#E7D8DE
#E9E2D7
#A9C6CB
#F5F0F1
Color names and codes
| Name | HEX | RGB | HSL | CMYK | OKLCH | |
|---|---|---|---|---|---|---|
| Serene | #DCE3E4 | 220, 227, 228 | 188°, 13%, 88% | 4, 0, 0, 11 | 91.1% 0.008 207 | |
| Unfading Dusk | #E7D8DE | 231, 216, 222 | 336°, 24%, 88% | 0, 6, 4, 9 | 89.6% 0.018 351 | |
| Crisp Muslin | #E9E2D7 | 233, 226, 215 | 37°, 29%, 88% | 0, 3, 8, 9 | 91.5% 0.017 79 | |
| Spring Storm | #A9C6CB | 169, 198, 203 | 189°, 25%, 73% | 17, 2, 0, 20 | 80.7% 0.032 209 | |
| Plastic Clouds | #F5F0F1 | 245, 240, 241 | 348°, 20%, 95% | 0, 2, 2, 4 | 95.9% 0.006 3 |
Which pairs work for text
| Text on background | Contrast | WCAG |
|---|---|---|
| Aa #A9C6CB on #F5F0F1 | 1.60:1 | — |
| Aa #E9E2D7 on #A9C6CB | 1.40:1 | — |
| Aa #DCE3E4 on #A9C6CB | 1.39:1 | — |
| Aa #E7D8DE on #A9C6CB | 1.31:1 | — |
| Aa #E7D8DE on #F5F0F1 | 1.22:1 | — |
| Aa #DCE3E4 on #F5F0F1 | 1.15:1 | — |
CSS variables
:root {
--color-1: #dce3e4; /* Serene */
--color-2: #e7d8de; /* Unfading Dusk */
--color-3: #e9e2d7; /* Crisp Muslin */
--color-4: #a9c6cb; /* Spring Storm */
--color-5: #f5f0f1; /* Plastic Clouds */
}Other schemes from Serene
- Serene Complementary Color Scheme#DCE3E4#F0F4F2#E7DAD7#C8ACA9#F4EFEE
- Serene Analogous Color Scheme#D7E7DA#D8E7E1#DCE3E4#D8DEE7#D9D9EA
- Serene Triadic Color Scheme#DCE3E4#E4D7E5#E5E8D9#F0F4F2#C5A5C7
- Serene Tetradic Color Scheme#DCE3E4#E3DAE9#E7DAD7#DEEAD8#F0F4F2
- Serene Monochromatic Color Scheme#849DA2#B0C1C2#DCE3E4#F2F3F4#F2F3F4
More very light teal split-complementary color schemes
- Airy Split-complementary Color Scheme#DAE6E9#E9DBDF#EAE4DA#A9C6CB#F5F0F1
- Alpine Expedition Split-complementary Color Scheme#99EEFF#FF9BB7#FFDD99#45E9FD#FFE5ED
- Antiguan Split-complementary Color Scheme#BDDFD8#DCBFD5#DFC7BC#8AC5BA#F8EEF4
- Bare Mintimum Split-complementary Color Scheme#D6E3E7#E8D8DA#E7E3D6#A6C4CA#F5F0F1
- Blister Pearl Split-complementary Color Scheme#AAFFEE#FFAAEE#FFC4AE#55FFCC#FFE3F4
- Bone-Chilling Split-complementary Color Scheme#E1F2F0#F3E0EB#F3E8E1#AEDDD3#F8EEF4
- Break the Ice Split-complementary Color Scheme#B2E1EE#EDB2C4#F1DAB2#75C7E0#F8EAED
- Bubbles Split-complementary Color Scheme#E7FEFF#FFE6F1#FFF2E4#9CFAFF#FFE6F1
- Calm Waters Split-complementary Color Scheme#E7FAFA#F9E7F4#F9F2E7#AFEEEE#FCEBF4
- Castle in the Sky Split-complementary Color Scheme#D1EAED#EBD0DB#EDE1D1#98D2D9#F7EFEF
- Cold Canada Split-complementary Color Scheme#DBFFFE#FFDDEE#FFEBDA#88FFFF#FFE6F1
- Cold Omen Split-complementary Color Scheme#D6EAE8#EAD3E0#EBDED7#A5D0CB#F8EEF4
Questions
What colors go with Serene?
In a split-complementary scheme: Unfading Dusk (#E7D8DE), Crisp Muslin (#E9E2D7), Spring Storm (#A9C6CB), Plastic Clouds (#F5F0F1).
What is the hex code of Serene?
#DCE3E4.