Back to palettes

Palette

Victory Field

A bold and dynamic collection, reminiscent of vibrant team colors and the energy of a sports field.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Victory Field 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 Victory Field.

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

Data visualization

#D32F2F#FFC107#00BCD4#4CAF50#3F51B5

Palette guide

How to use Victory Field

Overview

The Victory Field palette is a bold and dynamic collection, reminiscent of vibrant team colors and the high energy of a sports arena. Featuring a powerful red in #D32F2F, a bright amber #FFC107, a striking cyan #00BCD4, a lively green #4CAF50, and a steadfast indigo #3F51B5, this palette is built for impact. It offers designers and developers a robust set of primary and secondary colors that communicate strength, enthusiasm, and competition. Perfect for projects needing to convey energy, excitement, and a strong visual presence, it ensures a memorable and highly engaging user experience across various platforms and mediums.

Best used for

  • Sports team branding and merchandise
  • Event posters and promotional materials
  • Children's product packaging and websites
  • Dynamic digital interfaces and dashboards
  • Energetic marketing campaigns and ads
  • Gaming UI/UX design

Suggested color roles

primary

Use #D32F2F as a dominant, energetic color for calls to action, alerts, or key brand elements.

secondary

Employ #3F51B5 to provide a stable, complementary contrast, suitable for navigation or secondary sections.

accent

Apply #FFC107 for bright highlights, warnings, or interactive elements that need to stand out vibrantly.

background

A neutral grey or white is recommended for backgrounds to allow these vibrant colors to pop; #00BCD4 can serve as a vibrant hero background.

text

Use black or white for maximum contrast on these vibrant colors, ensuring excellent readability across the palette.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #FFC107 on any mid-tone colors.
  • Avoid using #D32F2F (red) and #4CAF50 (green) together for critical information to accommodate red-green color blindness.
  • Consider providing alternative text representations for important color-coded information.
  • Test all color pairings for text and interactive elements against WCAG contrast guidelines (AA or AAA).

Recommended combinations

Energetic Primary

A bold and classic combination for primary branding, conveying strength and vibrancy.

#D32F2F · #3F51B5 · #FFC107

Dynamic Contrast

Ideal for creating a modern and energetic feel, perfect for digital interfaces or sports graphics.

#00BCD4 · #4CAF50 · #D32F2F

Playful Brights

Use for a lively and youthful aesthetic, suitable for children's products or casual branding.

#FFC107 · #00BCD4 · #3F51B5

CSS variables

:root {
  --victory-field-1: #D32F2F;
  --victory-field-2: #FFC107;
  --victory-field-3: #00BCD4;
  --victory-field-4: #4CAF50;
  --victory-field-5: #3F51B5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "victory-field": {
        1: "#D32F2F",
        2: "#FFC107",
        3: "#00BCD4",
        4: "#4CAF50",
        5: "#3F51B5",
      }
    }
  }
}

Related searches

vibrant sports colorsenergetic primary palettebold digital colorschildren's brand palettedynamic graphic design colors

Palette colors

Hex values

Color 1#D32F2F
·
Color 2#FFC107
·
Color 3#00BCD4
·
Color 4#4CAF50
·
Color 5#3F51B5
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.1:1AA18
2.2:1Fail
1.8:1Fail
1.4:1Fail
2
3.1:1AA18
1.4:1Fail
1.7:1Fail
4.2:1AA18
3
2.2:1Fail
1.4:1Fail
1.2:1Fail
3:1Fail
4
1.8:1Fail
1.7:1Fail
1.2:1Fail
2.5:1Fail
5
1.4:1Fail
4.2:1AA18
3:1Fail
2.5:1Fail

Similar palettes

More like Victory Field

View all vibrant