Palette

Art Studio Chaos

A playful explosion of primary colors, inspired by the energetic mess of an artist's studio.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Art Studio Chaos 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 Art Studio Chaos.

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

Data visualization

#F1C40F#E67E22#C0392B#8E44AD#2980B9

Palette guide

How to use Art Studio Chaos

Overview

The Art Studio Chaos palette is a vibrant explosion of primary colors, capturing the energetic and playful essence of an artist's workspace. Featuring bright hues like #F1C40F, #E67E22, #C0392B, #8E44AD, and #2980B9, this collection is designed to make a bold statement. It's ideal for projects that aim to convey creativity, excitement, and a sense of unbridled artistic expression. Designers can use these colors to create dynamic interfaces, captivating marketing materials, and designs that truly pop.

Best used for

Children's brands and educational platforms
Creative agency websites and portfolios
Event posters and promotional materials
Playful app interfaces and game design
Artistic and craft-related branding
Social media graphics requiring high impact

Suggested color roles

primary

Utilize #F1C40F as a main energetic highlight, drawing immediate attention to key elements or calls to action.

secondary

Employ #2980B9 for strong visual contrast or to define distinct sections, balancing the warmth with a cool primary blue.

accent

Apply #C0392B for bold, attention-grabbing accents, perfect for buttons, alerts, or critical information.

background

For backgrounds, it's often best to pair these vibrant colors with a neutral like pure white or a light grey. If using a palette color, #F1C40F can create an impactful, but visually demanding, full-page background.

text

Use a deep charcoal or black for body text on light backgrounds to ensure maximum readability. For text on darker palette colors, white or a light grey is essential.

Accessibility notes

High contrast is crucial; always test color combinations for readability, especially for text.
Avoid using similar vibrant hues for text and background in close proximity.
Ensure sufficient contrast for all interactive elements to meet accessibility standards.
Pair these bold colors with neutral backgrounds (e.g., white, light grey) for optimal text legibility.

Recommended combinations

Energetic Contrast

A dynamic trio for calls to action, headers, or interactive elements, offering high energy and visual separation.

#F1C40F · #2980B9 · #E67E22

Warm Boldness

Ideal for conveying warmth and urgency, such as alerts, sale banners, or playful warnings.

#E67E22 · #C0392B · #F1C40F

Creative Spectrum

Great for showcasing variety or creating a playful, artistic gradient in illustrations or data visualizations.

#8E44AD · #2980B9 · #C0392B

CSS variables

:root {
  --art-studio-chaos-1: #F1C40F;
  --art-studio-chaos-2: #E67E22;
  --art-studio-chaos-3: #C0392B;
  --art-studio-chaos-4: #8E44AD;
  --art-studio-chaos-5: #2980B9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-studio-chaos": {
        1: "#F1C40F",
        2: "#E67E22",
        3: "#C0392B",
        4: "#8E44AD",
        5: "#2980B9",
      }
    }
  }
}

Hex values

Color 1#F1C40F

Color 2#E67E22

Color 3#C0392B

Color 4#8E44AD

Color 5#2980B9

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

3.5:1AA18

2.6:1Fail

1.7:1Fail

1.9:1Fail

2.1:1Fail

1.5:1Fail

3.3:1AA18

1.9:1Fail

1.1:1Fail

1.3:1Fail

3.5:1AA18

2.1:1Fail

1.1:1Fail

1.4:1Fail

2.6:1Fail

1.5:1Fail

1.3:1Fail

1.4:1Fail

Similar palettes

More like Art Studio Chaos

View all vibrant

Vivid Spectrum Play

Abstract Geometric Hue