#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#F8DDD6Almond
#EDBEB3Baby Pink
#D99A8CLatte
#449A8CCadet
Terra Cadet & Latte is a complementary color palette tagged muted, teal. Near-complementary hues (about 159° 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 |
|---|---|---|---|---|---|
| Almond | #F8DDD6 | rgb(248, 221, 214) | hsl(12, 71%, 91%) | oklch(91.8% 0.032 35) | |
| Baby Pink | #EDBEB3 | rgb(237, 190, 179) | hsl(11, 62%, 82%) | oklch(84.0% 0.057 33) | |
| Latte | #D99A8C | rgb(217, 154, 140) | hsl(11, 50%, 70%) | oklch(74.4% 0.079 33) | |
| Cadet | #449A8C | rgb(68, 154, 140) | hsl(170, 39%, 44%) | oklch(62.9% 0.086 181) |
Why it works and how to use it
It works because the lightness range is wide (44% to 91%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Almond (#F8DDD6) is the lightest color, so it belongs on large surfaces.
- Text: Cadet (#449A8C) on #F8DDD6 gives 2.61:1, so pair it with a darker neutral for body copy.
- Primary: Baby Pink (#EDBEB3) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Latte (#D99A8C) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Terra Cadet & Latte
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
#F8DDD6
#EDBEB3
#D99A8C
#449A8C
Color-blind check: under protanopia and deuteranopia, Latte and Cadet become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F8DDD6 on #449A8C | Aa | 2.61:1 | Fail |
#EDBEB3 on #449A8C | Aa | 2.02:1 | Fail |
#F8DDD6 on #D99A8C | Aa | 1.82:1 | Fail |
#D99A8C on #449A8C | Aa | 1.43:1 | Fail |
#EDBEB3 on #D99A8C | Aa | 1.41:1 | Fail |
#F8DDD6 on #EDBEB3 | Aa | 1.29:1 | Fail |
Similar palettes 24 more in this mood
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#116A7B
#CDC2AE
#ECE5C7
#C2DEDC
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#162631
#2A9CAB
#B1E3D6
#CBFFD0
#FFABA9
#CFCAF3
#E2E69B
#93F9FF
#13505B
#0C7489
#8FD3E0
#F0FAFB
#5CBAA9
#5E99B8
#23737D
#356345
#245B54
#4F9E92
#B7E4DC
#F1FBF9
#95B39E
#BAD297
#ACF6EA
#F5EFD2
#C2C1E5
#FCB9BB
#E7E5B2
#A4F8F9
#0B3954
#087E8B
#BFD7EA
#FFFFFF
#004F4E
#49B2AC
#BCDEBE
#E4F1FF
#78A89A
#55849E
#005756
#003741
#001D19
#3D6E4A
#007886
#CED6DC
#F1C9A5
#E0A97F
#4AAAB5
#9E6A48
#D0C79B
#74DCD2
#C6CEFF
#FFC9D2
#026579
#229393
#70BEA6
#9DC2DE
#00273E
#006975
#A6BDD0
#E9E9E9
#005359
#529D9F
#8ACBCC
#8DE4F3
#3B8185
#C29D9B
#57B9BF
#E5ACB2
#DA99BB
#6FBEC0
#B79281
#246D72
#0D7580
#846160
#BA8B86
#8FB5BA
#77DADA
#7EB3A3
#41674C
#37565E