Polignano a Mare Color Palette
#8EC8E8 · #E8E8F0 · #C8B890 · #1E3A5C
Use #8EC8E8 as the background. Use #E8E8F0 as the primary accent. Use #C8B890 as secondary. Use #1E3A5C as body text/supporting color. Palette mood: Polignano a Mare — cliff, sea, balcony.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Polignano a Mare color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 52.9% | 142, 200, 232 | 39%, 14%, 0%, 9% | 201°, 66%, 73% | ||
| Primary Accent Luminance: 81.2% | 232, 232, 240 | 3%, 3%, 0%, 6% | 240°, 21%, 93% | ||
| Secondary Luminance: 48.6% | 200, 184, 144 | 0%, 8%, 28%, 22% | 43°, 34%, 67% | ||
| Body Text Luminance: 4.1% | 30, 58, 92 | 67%, 37%, 0%, 64% | 213°, 51%, 24% |
Polignano a Mare Tints & Shades
Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Polignano a Mare palette — click any swatch to copy its hex.
Polignano a Mare Palette Contrast Matrix (WCAG 2.1)
Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.
| Text on Background | Preview | Ratio | Grade | Safe For |
|---|---|---|---|---|
| #1E3A5C on #E8E8F0 |
Aa Sample Text
| 9.49:1 | AAA | Body text, headings, UI |
| #E8E8F0 on #1E3A5C |
Aa Sample Text
| 9.49:1 | AAA | Body text, headings, UI |
| #1E3A5C on #8EC8E8 |
Aa Sample Text
| 6.38:1 | AA | Body text, UI |
| #8EC8E8 on #1E3A5C |
Aa Sample Text
| 6.38:1 | AA | Body text, UI |
| #1E3A5C on #C8B890 |
Aa Sample Text
| 5.90:1 | AA | Body text, UI |
| #C8B890 on #1E3A5C |
Aa Sample Text
| 5.90:1 | AA | Body text, UI |
| #C8B890 on #E8E8F0 |
Aa Sample Text
| 1.61:1 | Fail | Decorative use only |
| #E8E8F0 on #C8B890 |
Aa Sample Text
| 1.61:1 | Fail | Decorative use only |
| #E8E8F0 on #8EC8E8 |
Aa Sample Text
| 1.49:1 | Fail | Decorative use only |
| #8EC8E8 on #E8E8F0 |
Aa Sample Text
| 1.49:1 | Fail | Decorative use only |
| #C8B890 on #8EC8E8 |
Aa Sample Text
| 1.08:1 | Fail | Decorative use only |
| #8EC8E8 on #C8B890 |
Aa Sample Text
| 1.08:1 | Fail | Decorative use only |
Color Harmony: Split-Complementary Scheme
The Polignano a Mare palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Best Design Use Cases
Industries This Palette Suits
Colors That Pair Well With Polignano a Mare
Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.
directly opposite #E8E8F0 on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
30° beside #E8E8F0 — a calm secondary that extends the palette without adding tension
a ink-black carrying the palette's own hue — perfect for surfaces and dividers
Using Polignano a Mare Without Breaking Accessibility
- Avoid #E8E8F0 for small UI elements on #8EC8E8 — at 1.5:1 it misses the 3:1 WCAG threshold; darken it with a shade from the ramp below.
- Set body text in #1E3A5C — 6.4:1 against #8EC8E8 passes WCAG AA (AA) for long-form reading.
- Don't use #C8B890 behind body text — this light tone works better for surfaces, badges and dividers than for reading areas.
How to Implement the Polignano a Mare Color Scheme
To use this Polignano a Mare color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'} Web Design Tip
Use #8EC8E8 for the main background and #E8E8F0 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #1E3A5C and #8EC8E8 is 6.38:1 (AA). Ensure your body text remains legible.
Polignano a Mare Palette — Frequently Asked Questions
What are the hex codes in the Polignano a Mare color palette?
The Polignano a Mare palette contains #8EC8E8, #E8E8F0, #C8B890, #1E3A5C. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.
Is the Polignano a Mare color palette accessible (WCAG)?
Yes for its strongest pairings: #1E3A5C on #E8E8F0 reaches 9.5:1 (AAA). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.
What colors go well with the Polignano a Mare palette?
Beyond its own four colors, #C3C3A2, #EDEBEF, #111518 extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.
What mood does the Polignano a Mare palette create?
Polignano a Mare reads as cliff, sea, balcony. Muted blue drives the personality, grounded by saturated cyan-blue — a combination that works best when the light base gets most of the canvas.
Can I use the Polignano a Mare color palette commercially?
Yes. Individual color values can't be copyrighted, so the Polignano a Mare palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.
How do I add the Polignano a Mare palette to Tailwind or CSS?
Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Polignano a Mare's exact values, including the tint and shade ramps shown above.