Back to palettes

Palette

Geometric Color Block

Striking, high-contrast colors inspired by modern art and sharp forms.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Geometric Color Block 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 Color Block.

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

Data visualization

#E44C4C#F4A261#2A9D8F#E76F51#264653

Palette guide

How to use Geometric Color Block

Overview

The Geometric Color Block palette delivers striking, high-contrast colors inspired by modern art and sharp forms. Featuring the bold #E44C4C, the warm #F4A261, the vibrant #2A9D8F, the energetic #E76F51, and the deep #264653, this palette is designed for maximum visual impact. Designers can leverage these vivid hues to create dynamic and contemporary compositions, perfect for conveying a sense of innovation and sophistication. It's an excellent choice for projects that demand attention, from digital interfaces to print advertisements, ensuring a memorable user experience.

Best used for

  • Modern branding and corporate identity
  • UI/UX design for tech applications
  • Editorial layouts and magazine covers
  • Event posters and digital campaigns
  • Contemporary art and abstract design
  • Fashion and lifestyle product marketing

Suggested color roles

primary

Utilize #264653 as a strong, grounding primary for backgrounds or main content areas, providing sophistication.

secondary

Employ #2A9D8F for supporting sections, subheadings, or graphic accents, offering a vibrant, cool contrast.

accent

Highlight key interactive elements or calls-to-action with #E44C4C or #E76F51 for an immediate, energetic pop.

background

Use a neutral white or very light gray (not in palette) to allow the bold colors to truly stand out, or #264653 for a dark mode.

text

For optimal readability, use #264653 or a dark charcoal on lighter backgrounds, or white/near-white on the darker hues.

Accessibility notes

  • Ensure sufficient contrast between the lighter #F4A261 and #E76F51 and any text placed on them; use very dark text.
  • The deep #264653 provides excellent contrast for white or light-colored text.
  • Avoid using #F4A261 text on #E76F51 backgrounds due to similar luminosity and potential readability issues.
  • Always test all button and link text colors against their respective backgrounds to ensure compliance and readability.

Recommended combinations

Bold Foundation

Deep blue-green base with a strong red and warm orange accent, perfect for impactful branding and headlines.

#264653 · #E44C4C · #F4A261

Vivid Contrast

A dynamic interplay of cool teal and warm oranges/reds, ideal for creating energetic and modern visual blocks.

#2A9D8F · #E76F51 · #E44C4C

Modern Pop

Warm orange background with deep blue-green text and a vibrant red accent, excellent for calls to action or feature blocks.

#F4A261 · #264653 · #E44C4C

CSS variables

:root {
  --geometric-color-block-1: #E44C4C;
  --geometric-color-block-2: #F4A261;
  --geometric-color-block-3: #2A9D8F;
  --geometric-color-block-4: #E76F51;
  --geometric-color-block-5: #264653;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "geometric-color-block": {
        1: "#E44C4C",
        2: "#F4A261",
        3: "#2A9D8F",
        4: "#E76F51",
        5: "#264653",
      }
    }
  }
}

Related searches

bold color blocking palettemodern geometric designhigh contrast vibrant colorsprimary inspired palettesharp form color scheme

Palette colors

Hex values

Color 1#E44C4C
·
Color 2#F4A261
·
Color 3#2A9D8F
·
Color 4#E76F51
·
Color 5#264653
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
1.2:1Fail
1.2:1Fail
2.6:1Fail
2
1.9:1Fail
1.6:1Fail
1.5:1Fail
4.9:1AA
3
1.2:1Fail
1.6:1Fail
1.1:1Fail
3:1AA18
4
1.2:1Fail
1.5:1Fail
1.1:1Fail
3.3:1AA18
5
2.6:1Fail
4.9:1AA
3:1AA18
3.3:1AA18

Similar palettes

More like Geometric Color Block

View all vibrant
Primary Abstract Edge
Abstract Block Play
Abstract Geometric Hue
Bold Art Canvas
Geometric Block Pop
Modern Geometric Canvas