#0A1A1E
#648691
#EED200
#D8E2E5
#1C2F2EGunmetal
#4F7F7BTeal
#FFC582Apricot
#D6E2E1Glacier
Modern Apricot & Teal is a complementary color palette tagged modern, minimal, gray. Near-complementary hues (about 145° 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 |
|---|---|---|---|---|---|
| Gunmetal | #1C2F2E | rgb(28, 47, 46) | hsl(177, 25%, 15%) | oklch(28.9% 0.025 192) | |
| Teal | #4F7F7B | rgb(79, 127, 123) | hsl(175, 23%, 40%) | oklch(56.1% 0.053 189) | |
| Apricot | #FFC582 | rgb(255, 197, 130) | hsl(32, 100%, 75%) | oklch(86.1% 0.107 70) | |
| Glacier | #D6E2E1 | rgb(214, 226, 225) | hsl(175, 17%, 86%) | oklch(90.3% 0.013 191) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (86% down to 15% lightness). A natural fit for websites, presentations and branding.
- Background: Glacier (#D6E2E1) is the lightest color, so it belongs on large surfaces.
- Text: Gunmetal (#1C2F2E) on #D6E2E1 gives 10.58:1, passing WCAG AAA.
- Primary: Apricot (#FFC582) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Teal (#4F7F7B) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Glacier at 10.58:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Modern Apricot & Teal
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
#1C2F2E
#4F7F7B
#FFC582
#D6E2E1
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#1C2F2E on #D6E2E1 | Aa | 10.58:1 | AAA |
#1C2F2E on #FFC582 | Aa | 9.07:1 | AAA |
#4F7F7B on #D6E2E1 | Aa | 3.4:1 | AA large only |
#1C2F2E on #4F7F7B | Aa | 3.11:1 | AA large only |
#4F7F7B on #FFC582 | Aa | 2.91:1 | Fail |
#FFC582 on #D6E2E1 | Aa | 1.17:1 | Fail |
Similar palettes 24 more in this mood
#DDDEE2
#00C463
#676C7C
#17191F
#E5E6E6
#F61061
#4E5756
#0E0F0F
#ECF1F7
#FF2A6C
#4E6074
#222A32
#09130F
#647970
#704FEE
#E4EBE7
#E8EEEE
#DD5600
#596564
#050D0D
#282A2A
#5F727D
#FF1234
#E3E4E5
#12190F
#626C5E
#D30044
#ECF1EA
#DDE8E1
#F25100
#6D8476
#1F3127
#E6E7E8
#D25661
#687074
#0F1112
#EDEFF3
#FD7463
#707990
#181A20
#E0E4E9
#BC4358
#3E5169
#090E15
#02151B
#2C515C
#E75100
#D6E3E7
#E2EFEA
#CC64E0
#385B4F
#1D322B
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#3D272C
#9B7981
#AC9498
#E4C8CE
#D4CAAF
#B6B29A
#6F664F
#534F3E
#FDFDFF
#FFDFBC
#B9B9B9
#222222
#ECDCF8
#9B91A4
#78708B
#382F45
#142532
#528494
#DE9D89
#FAF4E9
#FFF9F4
#FFE0C7
#F28C38
#2A2320
#3C3C3C
#747474
#FFB2AA
#EEEEEE
#D8D1C6
#BEB19C
#233E64
#000A1E
#222831
#575D65
#00ADB5
#EEEEEE