#5E548E
#9F86C0
#BE95C4
#E0B1CB
#D0837BTerracotta
#A8D5F2Baby Blue
#F2E8D5Eggshell
#4A4238Taupe
Royal Terracotta & Baby Blue is a complementary color palette tagged muted, blue. Near-complementary hues (about 165° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Terracotta | #D0837B | rgb(208, 131, 123) | hsl(6, 47%, 65%) | oklch(68.8% 0.097 26) | |
| Baby Blue | #A8D5F2 | rgb(168, 213, 242) | hsl(204, 74%, 80%) | oklch(85.1% 0.062 237) | |
| Eggshell | #F2E8D5 | rgb(242, 232, 213) | hsl(39, 53%, 89%) | oklch(93.4% 0.027 84) | |
| Taupe | #4A4238 | rgb(74, 66, 56) | hsl(33, 14%, 25%) | oklch(38.4% 0.020 73) |
Why it works and how to use it
It works because the lightness range is wide (25% to 89%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Eggshell (#F2E8D5) is the lightest color, so it belongs on large surfaces.
- Text: Taupe (#4A4238) on #F2E8D5 gives 8.12:1, passing WCAG AAA.
- Primary: Baby Blue (#A8D5F2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Terracotta (#D0837B) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Eggshell on Taupe at 8.12:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Royal Terracotta & Baby Blue
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#D0837B
#A8D5F2
#F2E8D5
#4A4238
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F2E8D5 on #4A4238 | Aa | 8.12:1 | AAA |
#A8D5F2 on #4A4238 | Aa | 6.33:1 | AA |
#D0837B on #4A4238 | Aa | 3.39:1 | AA large only |
#D0837B on #F2E8D5 | Aa | 2.4:1 | Fail |
#D0837B on #A8D5F2 | Aa | 1.87:1 | Fail |
#A8D5F2 on #F2E8D5 | Aa | 1.28:1 | Fail |
Similar palettes 24 more in this mood
#FFAFCC
#FFC8DD
#BDE0FE
#A2D2FF
#3D405B
#81B29A
#96DEFF
#F4F1DE
#2E2B59
#525088
#A09FC8
#DDDCE6
#FFE0F1
#FFE1BB
#B0D4FD
#96D9B8
#18213B
#526195
#7393C1
#ECFFFB
#A3CCF3
#F4B0E0
#FFDFBF
#CFF5DD
#FFCDCA
#FFEFB3
#C5FDC9
#B3D2FF
#3D3B6B
#6D6CA6
#B9B8E3
#F2F1FB
#4F4E7F
#7E7EB9
#D1D0FC
#FAF9FF
#585881
#4F748D
#B69ED1
#8FB2F0
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#2E3A66
#5C6BA6
#5EC4BE
#F5EFE4
#436291
#6B88B0
#7CA5D5
#C3D8FF
#878DBE
#CBB8C4
#DEC3F6
#FFDBE0
#D0C79B
#74DCD2
#C6CEFF
#FFC9D2
#416E90
#6194C0
#9CBCD9
#96D7FF
#AABBF3
#D4B9CE
#DFCBFF
#CEE8FC
#5D6038
#9D7E6C
#7590C2
#82B0E6
#DBE1FF
#A1D0FC
#EAAFDB
#B9A0D5
#CBEEE6
#A6D3F0
#8AAF95
#5E8288
#4B8B92
#6EA79C
#8DA7C3
#9ED2E8
#EEEFFF
#FFD0E9
#B4D8FF
#D1BEDB
#68A4D2
#5181A8
#F3F0E8
#DAAD8C