#ECF1F7
#FF2A6C
#4E6074
#222A32
#E2EFEAIce
#CC64E0Orchid
#385B4FSpruce
#1D322BGunmetal
Studio Orchid & Spruce is a complementary color palette tagged modern, dark, minimal. Near-complementary hues (about 133° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Ice | #E2EFEA | rgb(226, 239, 234) | hsl(157, 29%, 91%) | oklch(94.1% 0.015 171) | |
| Orchid | #CC64E0 | rgb(204, 100, 224) | hsl(290, 67%, 64%) | oklch(67.4% 0.201 321) | |
| Spruce | #385B4F | rgb(56, 91, 79) | hsl(159, 24%, 29%) | oklch(44.1% 0.045 170) | |
| Gunmetal | #1D322B | rgb(29, 50, 43) | hsl(160, 27%, 15%) | oklch(29.7% 0.030 171) |
Why it works and how to use it
It works because the lightness range is wide (15% to 91%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Ice (#E2EFEA) is the lightest color, so it belongs on large surfaces.
- Text: Gunmetal (#1D322B) on #E2EFEA gives 11.51:1, passing WCAG AAA.
- Primary: Orchid (#CC64E0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Spruce (#385B4F) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ice on Gunmetal at 11.51:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Studio Orchid & Spruce
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
#E2EFEA
#CC64E0
#385B4F
#1D322B
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#E2EFEA on #1D322B | Aa | 11.51:1 | AAA |
#E2EFEA on #385B4F | Aa | 6.4:1 | AA |
#CC64E0 on #1D322B | Aa | 4.19:1 | AA large only |
#E2EFEA on #CC64E0 | Aa | 2.75:1 | Fail |
#CC64E0 on #385B4F | Aa | 2.33:1 | Fail |
#385B4F on #1D322B | Aa | 1.8:1 | Fail |
Similar palettes 24 more in this mood
#E8EEEE
#DD5600
#596564
#050D0D
#E0E4E9
#BC4358
#3E5169
#090E15
#E5E6E6
#F61061
#4E5756
#0E0F0F
#02151B
#2C515C
#E75100
#D6E3E7
#09130F
#647970
#704FEE
#E4EBE7
#12190F
#626C5E
#D30044
#ECF1EA
#EDEFF3
#FD7463
#707990
#181A20
#0A1A1E
#648691
#EED200
#D8E2E5
#DDDEE2
#00C463
#676C7C
#17191F
#1C2F2E
#4F7F7B
#FFC582
#D6E2E1
#F3F5F4
#AD6FDD
#4E5A58
#0F1212
#FAF8FD
#E9E2F5
#6D4AA8
#24203A
#282A2A
#5F727D
#FF1234
#E3E4E5
#DDE8E1
#F25100
#6D8476
#1F3127
#111111
#424242
#E444BE
#FAFAFA
#222831
#575D65
#00ADB5
#EEEEEE
#E6E7E8
#D25661
#687074
#0F1112
#EDEEF0
#C9CCD1
#9714A2
#0B1220
#1C2541
#465D79
#5BC0BE
#FFFFFF
#111111
#424242
#FF3B3B
#FAFAFA
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#2B2B2B
#4A4A4A
#00E9DB
#F5F5F5