#006D77
#83C5BE
#EDF6F9
#E29578
#DFFFF3Smoke
#63CDBETurquoise
#C17330Copper
#484233Taupe
Copper & Turquoise Shore is a complementary color palette tagged modern, white, teal. Near-complementary hues (about 144° 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 |
|---|---|---|---|---|---|
| Smoke | #DFFFF3 | rgb(223, 255, 243) | hsl(157, 100%, 94%) | oklch(97.4% 0.037 171) | |
| Turquoise | #63CDBE | rgb(99, 205, 190) | hsl(172, 51%, 60%) | oklch(78.1% 0.101 183) | |
| Copper | #C17330 | rgb(193, 115, 48) | hsl(28, 60%, 47%) | oklch(62.9% 0.127 58) | |
| Taupe | #484233 | rgb(72, 66, 51) | hsl(43, 17%, 24%) | oklch(38.1% 0.026 89) |
Why it works and how to use it
It works because the lightness range is wide (24% to 94%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Smoke (#DFFFF3) is the lightest color, so it belongs on large surfaces.
- Text: Taupe (#484233) on #DFFFF3 gives 9.39:1, passing WCAG AAA.
- Primary: Copper (#C17330) is the most saturated mid-tone; use it for buttons and links (3.42:1 against the background, fine for UI elements).
- Accent: Turquoise (#63CDBE) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Taupe at 9.39:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Copper & Turquoise Shore
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
#DFFFF3
#63CDBE
#C17330
#484233
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#DFFFF3 on #484233 | Aa | 9.39:1 | AAA |
#63CDBE on #484233 | Aa | 5.23:1 | AA |
#DFFFF3 on #C17330 | Aa | 3.42:1 | AA large only |
#C17330 on #484233 | Aa | 2.74:1 | Fail |
#63CDBE on #C17330 | Aa | 1.91:1 | Fail |
#DFFFF3 on #63CDBE | Aa | 1.79:1 | Fail |
Similar palettes 24 more in this mood
#E1F6FF
#75DECF
#3A4441
#A78423
#222831
#575D65
#00ADB5
#EEEEEE
#3B2A22
#7A5A48
#8FD3C0
#F5F1EC
#924A43
#5C6049
#D5D2BF
#F5F3ED
#6B4E1E
#00B8C4
#E8DCC0
#F7F3EA
#1B1B1B
#BF9800
#CC3BB1
#F2F2F2
#2B2B2B
#4A4A4A
#00E9DB
#F5F5F5
#F3F1ED
#2B2B2B
#D88B65
#7F5990
#2B2D42
#8D99AE
#EDF2F4
#A97B00
#524037
#8E6C5A
#ADF2DF
#FDF9F4
#F5FBFB
#D9EFEF
#1BA3A8
#1E2A2B
#2B2B2B
#A97B00
#F1FAEE
#457B9D
#1B1B1B
#D68B00
#B549D5
#F2F2F2
#FFFFFF
#F6EDE7
#C8654A
#3A2A24
#242828
#809494
#A4FCFF
#EEFDFE
#2D2B26
#F1F1F1
#AC4800
#C87CE9
#EDEEF0
#C9CCD1
#7A5A00
#0B1220
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#2D2E3A
#9299A4
#EFF2F3
#C56160
#BF6664
#293548
#F4F9F2
#E6D59B
#E0FBFC
#98E2E8
#CA804C
#0B3C42
#343B44
#6B717A
#40CBD3
#FAFAFA
#F4F3F1
#B9B6B1
#5F5C58
#C86A4A