What are the hex codes in the Boardwalk palette?

The Boardwalk color palette consists of Cyan #00A6FB, Ocean #0582CA, Linen #F5F0E1, Cantaloupe #F4A261.

How should I use the Boardwalk palette on a website?

Use Linen #F5F0E1 as the background, Ocean #0582CA for text, Cyan #00A6FB for buttons and links, and Cantaloupe #F4A261 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Boardwalk have enough contrast for text?

The highest-contrast pair is #0582CA on #F5F0E1 with a ratio of 3.65:1, which passes WCAG AA for large text only.

#00A6FBCyan

#0582CAOcean

#F5F0E1Linen

#F4A261Cantaloupe

Boardwalk color palette

Summer Blue White Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cyan	`#00A6FB`	`rgb(0, 166, 251)`	`hsl(200, 100%, 49%)`	`oklch(69.6% 0.167 243)`
Ocean	`#0582CA`	`rgb(5, 130, 202)`	`hsl(202, 95%, 41%)`	`oklch(58.5% 0.144 244)`
Linen	`#F5F0E1`	`rgb(245, 240, 225)`	`hsl(45, 50%, 92%)`	`oklch(95.5% 0.021 92)`
Cantaloupe	`#F4A261`	`rgb(244, 162, 97)`	`hsl(27, 87%, 67%)`	`oklch(78.1% 0.127 58)`

Why it works and how to use it

Boardwalk is a vivid complementary color palette tagged summer, blue, white. Near-complementary hues (about 175° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Cyan takes the lead while the rest support. Lightness runs from 41% to 92%. Well suited to websites, presentations and branding.

Background: Linen (#F5F0E1) is the lightest color, so it belongs on large surfaces.
Text: Ocean (#0582CA) on #F5F0E1 gives 3.65:1, enough for large headings only.
Primary: Cyan (#00A6FB) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cantaloupe (#F4A261) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Boardwalk

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

#00A6FB

#0582CA

#F5F0E1

#F4A261

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
`#0582CA` on `#F5F0E1`	Aa	3.65:1	AA large only
`#00A6FB` on `#F5F0E1`	Aa	2.35:1	Fail
`#0582CA` on `#F4A261`	Aa	2.02:1	Fail
`#F5F0E1` on `#F4A261`	Aa	1.81:1	Fail
`#00A6FB` on `#0582CA`	Aa	1.55:1	Fail
`#00A6FB` on `#F4A261`	Aa	1.3:1	Fail

Similar palettes 24 more in this mood