moodColor Scheme

Creative Artistic

An artistic palette with expressive color choices and creative tension. Designed for portfolios and brands that celebrate creativity.

#ffffff
#f9fafb
#d946ef
#6366f1
#f59e0b

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Gray 50

Hex

#f9fafb

Tailwind

bg-gray-50

Role

primary

Name

Fuchsia 500

Hex

#d946ef

Tailwind

text-fuchsia-500

Role

secondary

Name

Indigo 500

Hex

#6366f1

Tailwind

text-indigo-500

Role

accent

Name

Amber 500

Hex

#f59e0b

Tailwind

bg-amber-500

Live Preview

Welcome Back

This is a live preview of the Creative Artistic color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Fuchsia and indigo create an expressive, artistically bold combination. Amber adds a warm counterpoint that grounds the creative energy.

Use Cases

Artist portfoliosDesign studiosCreative agency sites

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #f9fafb;
  --primary: #d946ef;
  --secondary: #6366f1;
  --accent: #f59e0b;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'creative-artistic': {
  'background': '#ffffff',  // bg-white
  'surface': '#f9fafb',  // bg-gray-50
  'primary': '#d946ef',  // text-fuchsia-500
  'secondary': '#6366f1',  // text-indigo-500
  'accent': '#f59e0b',  // bg-amber-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

How do you choose colors for creative brands?
Creative brands can take more color risks, using unexpected combinations to demonstrate the artistic thinking they offer clients.