#116A7B
#CDC2AE
#ECE5C7
#C2DEDC
#5B5F5EStorm
#41B8C5Cyan
#A6EAEDPowder Blue
#FFE5A3Vanilla
Lemon Cyan & Vanilla is a complementary color palette tagged vintage, teal. Near-complementary hues (about 143° 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 |
|---|---|---|---|---|---|
| Storm | #5B5F5E | rgb(91, 95, 94) | hsl(165, 2%, 36%) | oklch(48.2% 0.005 180) | |
| Cyan | #41B8C5 | rgb(65, 184, 197) | hsl(186, 53%, 51%) | oklch(72.2% 0.105 205) | |
| Powder Blue | #A6EAED | rgb(166, 234, 237) | hsl(183, 66%, 79%) | oklch(89.3% 0.068 199) | |
| Vanilla | #FFE5A3 | rgb(255, 229, 163) | hsl(43, 100%, 82%) | oklch(92.8% 0.088 89) |
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 (82% down to 36% lightness). A natural fit for websites, presentations and branding.
- Background: Vanilla (#FFE5A3) is the lightest color, so it belongs on large surfaces.
- Text: Storm (#5B5F5E) on #FFE5A3 gives 5.24:1, passing WCAG AA.
- Primary: Powder Blue (#A6EAED) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cyan (#41B8C5) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Storm on Vanilla at 5.24:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Lemon Cyan & Vanilla
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
#5B5F5E
#41B8C5
#A6EAED
#FFE5A3
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#5B5F5E on #FFE5A3 | Aa | 5.24:1 | AA |
#5B5F5E on #A6EAED | Aa | 4.81:1 | AA |
#5B5F5E on #41B8C5 | Aa | 2.74:1 | Fail |
#41B8C5 on #FFE5A3 | Aa | 1.91:1 | Fail |
#41B8C5 on #A6EAED | Aa | 1.76:1 | Fail |
#A6EAED on #FFE5A3 | Aa | 1.09:1 | Fail |
Similar palettes 24 more in this mood
#4A4E4D
#0E9AA7
#8FD3D6
#F6CD61
#7071CC
#00918B
#4E91D5
#4EBBDB
#008B6D
#6C8B38
#00CFCB
#86D894
#026579
#229393
#70BEA6
#9DC2DE
#3B8185
#C29D9B
#57B9BF
#E5ACB2
#DA99BB
#6FBEC0
#B79281
#246D72
#0D7580
#846160
#BA8B86
#8FB5BA
#6F1D1B
#BB9457
#99582A
#FFE6A7
#3D405B
#81B29A
#F2CC8F
#F4F1DE
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#22223B
#595D79
#9A8C98
#F2E9E4
#4B3832
#854442
#BE9B7B
#FFF4E6
#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#A88577
#E4C1AB
#FFEFD7
#719080
#4A5D7E
#7F92B0
#D8D2C4
#F1EDE4
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#6B6F4A
#9C9E74
#D9CFAF
#F3EEE2
#7A5C4A
#B08F73
#E3CDB0
#F8F1E6
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#5A5934
#776D5C
#BE957B
#DFACA6
#725352
#41676A
#B6787B
#8EC3CE
#9AD3FF
#64E1AB
#00CBC3
#008BA3
#A694D2
#BF768E
#6879A2
#724370