Palette

Geometric Canvas Blocks

A sophisticated take on primary hues, creating a balanced and retro feel with bold, geometric simplicity.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Geometric Canvas Blocks reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Geometric Canvas Blocks.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#E76F51#F4A261#E9C46A#2A9D8F#264653

Palette guide

How to use Geometric Canvas Blocks

Overview

The Geometric Canvas Blocks palette offers a sophisticated take on primary hues, creating a balanced and retro feel with bold, geometric simplicity. Featuring the warm #E76F51 and #F4A261, the earthy #E9C46A, and the deep, grounding #2A9D8F and #264653, this palette is rich in character. Designers can leverage these carefully curated colors to craft designs that feel both classic and contemporary, ideal for conveying a sense of thoughtful design and vintage charm across branding, editorial, and digital platforms.

Best used for

Retro-inspired branding and packaging
Interior design and home decor concepts
Editorial design for magazines or blogs
App interfaces with a mid-century modern feel
Art and design portfolios
Sustainable and artisanal product marketing

Suggested color roles

primary

Utilize #264653 as the main foundational color for backgrounds or dominant elements, providing depth and sophistication.

secondary

Employ #2A9D8F for supporting sections, subheadings, or graphic accents, maintaining a balanced and earthy tone.

accent

Introduce #E76F51 or #F4A261 for interactive elements or highlights, offering a warm and inviting pop of color.

background

Use #E9C46A for a warm, inviting background, or a very light cream/off-white (not in palette) to make colors stand out.

text

For optimal readability, use #264653 or a very dark charcoal on lighter backgrounds, or white/cream on darker hues.

Accessibility notes

Ensure sufficient contrast between #E9C46A backgrounds and text in #264653 or #2A9D8F for WCAG AA compliance.
Avoid using #F4A261 text on #E9C46A backgrounds, as the warm tones might blend too much.
The lighter shades like #E76F51 and #F4A261 may need darker text (e.g., #264653) to ensure legibility.
Test all color pairings for text and interactive elements to guarantee adequate contrast for all users.

Recommended combinations

Mid-Century Modern

Deep base, warm background, and a vibrant accent, perfect for retro-inspired branding or stylish UI.

#264653 · #E9C46A · #E76F51

Earthy Harmony

Creates a balanced, organic feel with a cool-toned base and warm, complementary accents, ideal for natural themes.

#2A9D8F · #F4A261 · #E9C46A

Bold Canvas

A striking contrast of warm red-orange with a deep blue-green, balanced by a softer orange, for impactful designs.

#E76F51 · #264653 · #F4A261

CSS variables

:root {
  --geometric-canvas-blocks-1: #E76F51;
  --geometric-canvas-blocks-2: #F4A261;
  --geometric-canvas-blocks-3: #E9C46A;
  --geometric-canvas-blocks-4: #2A9D8F;
  --geometric-canvas-blocks-5: #264653;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "geometric-canvas-blocks": {
        1: "#E76F51",
        2: "#F4A261",
        3: "#E9C46A",
        4: "#2A9D8F",
        5: "#264653",
      }
    }
  }
}

Hex values

Color 1#E76F51

Color 2#F4A261

Color 3#E9C46A

Color 4#2A9D8F

Color 5#264653

Accessibility

Contrast checker

1.5:1Fail

1.9:1Fail

1.1:1Fail

3.3:1AA18

1.5:1Fail

1.2:1Fail

1.6:1Fail

4.9:1AA

1.9:1Fail

1.2:1Fail

2:1Fail

6:1AA

1.1:1Fail

1.6:1Fail

2:1Fail

3:1AA18

3.3:1AA18

4.9:1AA

6:1AA

3:1AA18

Similar palettes

More like Geometric Canvas Blocks

View all vibrant

Mid-Century Atomic Pop