What are the hex codes in the Velvet Banana & Iris palette?

The Velvet Banana & Iris color palette consists of Midnight #332780, Iris #614AB1, Banana #F6E323, Smoke #F7F7F7.

How should I use the Velvet Banana & Iris palette on a website?

Use Smoke #F7F7F7 as the background, Midnight #332780 for text, Banana #F6E323 for buttons and links, and Iris #614AB1 for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Midnight on Smoke at 11.25:1.

Which colors in Velvet Banana & Iris have enough contrast for text?

The highest-contrast pair is #332780 on #F7F7F7 with a ratio of 11.25:1, which passes WCAG AA for normal text.

#332780Midnight

#614AB1Iris

#F6E323Banana

#F7F7F7Smoke

Velvet Banana & Iris color palette

Vibrant Purple Yellow White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Midnight	`#332780`	`rgb(51, 39, 128)`	`hsl(248, 53%, 33%)`	`oklch(34.7% 0.143 282)`
Iris	`#614AB1`	`rgb(97, 74, 177)`	`hsl(253, 41%, 49%)`	`oklch(48.8% 0.157 290)`
Banana	`#F6E323`	`rgb(246, 227, 35)`	`hsl(55, 92%, 55%)`	`oklch(90.3% 0.184 103)`
Smoke	`#F7F7F7`	`rgb(247, 247, 247)`	`hsl(0, 0%, 97%)`	`oklch(97.6% 0.000 0)`

Why it works and how to use it

Velvet Banana & Iris is a complementary color palette tagged vibrant, purple, yellow. Midnight and Banana sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Banana takes the lead while the rest support. Lightness runs from 33% to 97%. Well suited to websites, presentations and branding.

Background: Smoke (#F7F7F7) is the lightest color, so it belongs on large surfaces.
Text: Midnight (#332780) on #F7F7F7 gives 11.25:1, passing WCAG AAA.
Primary: Banana (#F6E323) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Iris (#614AB1) for highlights, badges and hover states.

4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Midnight on Smoke at 11.25:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Velvet Banana & Iris

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#332780

#614AB1

#F6E323

#F7F7F7

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#332780` on `#F7F7F7`	Aa	11.25:1	AAA
`#332780` on `#F6E323`	Aa	9.14:1	AAA
`#614AB1` on `#F7F7F7`	Aa	6.28:1	AA
`#614AB1` on `#F6E323`	Aa	5.1:1	AA
`#332780` on `#614AB1`	Aa	1.79:1	Fail
`#F6E323` on `#F7F7F7`	Aa	1.23:1	Fail

Similar palettes 24 more in this mood