ChatGPT designs some darned good color schemes for web pages (in my case for online courses specifically)

I needed some ideas for color schemes for a course template I was working on. In the past I've gone to a couple of sites that provide existing palettes for inspiration. This time I thought I would see if ChatGPT could generate schemes for me based upon a set of colors that my institution uses for their marketing site. This is the result, and yes I did use portions of two of the designs below in the course design. What was surprising to me was the addition of the scheme names and the descriptions. Very creative.

Prompt

You are an expert graphic designer well versed in color theory and the use of color to meet accessibility standards, color psychology, visual hierarchy, responsive design, and research on emotional reaction to web based color schemes. Please provide me with three potential compelling complimentary color schemes for each of the following hexadecimal colors, where that color is the primary color in the scheme. Each scheme should contain five colors, meet web accessibility guidelines, be expressed in hexadecimal, and use tints lighter than the primary color. After providing each scheme, explain in three sentences why you chose the individual colors for each scheme. The primary colors to use as the basis for each scheme are #Ff671d, #Ac441e, #011e41, #2b7050, #F4b223, #A29889, #212322, GhostWhite
 

Response

 
ChatGPT

Absolutely, I'd be glad to assist you in creating three compelling complementary color schemes for each of the provided primary hexadecimal colors. I'll explain the rationale behind each choice as well.

Primary Color 1: #FF671D (Vibrant Orange)

Scheme 1: Energetic Citrus

  1. Primary Color: #FF671D
  2. Light Tint: #FF9151
  3. Dark Accent: #B74612
  4. Complementary: #1D67FF
  5. Neutral: #F0F0F0

Explanation: The vibrant orange is paired with a lighter tint to maintain contrast and readability. The dark accent provides a strong visual hierarchy, while the complementary blue adds a striking contrast. The neutral color ensures balanced aesthetics and accessibility.

Scheme 2: Warm Sunset

  1. Primary Color: #FF671D
  2. Light Tint: #FF8E64
  3. Dark Accent: #A13A0E
  4. Complementary: #1D67FF
  5. Neutral: #F5F5F5

Explanation: The warm orange combined with a harmonious light tint creates an inviting atmosphere. The dark accent adds depth, and the complementary blue enhances visual interest. The neutral tone maintains readability and overall harmony.

Scheme 3: Zesty Tango

  1. Primary Color: #FF671D
  2. Light Tint: #FF9A6F
  3. Dark Accent: #8F3D0B
  4. Complementary: #1D67FF
  5. Neutral: #E6E6E6

Explanation: The primary orange exudes energy, complemented by the lighter tint for subtlety. The dark accent adds contrast, and the complementary blue generates a dynamic visual contrast. The neutral shade ensures accessibility and balances the composition.

Primary Color 2: #AC441E (Deep Reddish Brown)

Scheme 1: Rustic Charm

  1. Primary Color: #AC441E
  2. Light Tint: #D37550
  3. Dark Accent: #71250E
  4. Complementary: #1E411A
  5. Neutral: #F0F0F0

Explanation: The deep reddish brown is paired with a warm tint for an earthy feel. The dark accent provides hierarchy, while the complementary green adds a refreshing contrast. The neutral color maintains readability and balances the palette.

Scheme 2: Classic Elegance

  1. Primary Color: #AC441E
  2. Light Tint: #D38C6E
  3. Dark Accent: #661A0B
  4. Complementary: #1E4177
  5. Neutral: #F5F5F5

Explanation: The primary color exudes sophistication, complemented by the light tint for elegance. The dark accent adds depth, and the complementary blue creates a balanced visual contrast. The neutral tone ensures accessibility.

Scheme 3: Cozy Hearth

  1. Primary Color: #AC441E
  2. Light Tint: #D3A183
  3. Dark Accent: #60130A
  4. Complementary: #1E415B
  5. Neutral: #E6E6E6

Explanation: The deep red-brown offers a warm, cozy feeling, paired with a lighter tint for comfort. The dark accent adds contrast, while the complementary blue-green provides visual interest. The neutral shade maintains accessibility.

Primary Color 3: #011E41 (Deep Midnight Blue)

Scheme 1: Starry Night

  1. Primary Color: #011E41
  2. Light Tint: #32516B
  3. Dark Accent: #000B1D
  4. Complementary: #412101
  5. Neutral: #F0F0F0

Explanation: The deep midnight blue is matched with a lighter tint for a celestial ambiance. The dark accent adds depth, and the complementary rusty brown provides a unique visual contrast. The neutral color ensures readability.

Scheme 2: Coastal Twilight

  1. Primary Color: #011E41
  2. Light Tint: #2D4863
  3. Dark Accent: #00091A
  4. Complementary: #411E01
  5. Neutral: #F5F5F5

Explanation: The primary blue invokes a sense of tranquility, coupled with the light tint for a serene coastal feel. The dark accent adds hierarchy, while the complementary deep orange adds a captivating contrast. The neutral tone maintains balance.

Scheme 3: Enigmatic Depths

  1. Primary Color: #011E41
  2. Light Tint: #2E4F6C
  3. Dark Accent: #000A1D
  4. Complementary: #412301
  5. Neutral: #E6E6E6

Explanation: The midnight blue evokes mystery, paired with a light tint for depth. The dark accent creates hierarchy, and the complementary warm brown provides a contrasting touch. The neutral shade ensures accessibility.

In each scheme, the chosen colors are designed to work harmoniously, meeting accessibility guidelines while invoking specific emotional reactions. The combination of tints, dark accents, complementary colors, and neutrals creates dynamic and visually appealing compositions that cater to both aesthetics and usability.

 

Comments

Popular posts from this blog

I really would like confirmation that a used Mercedes or BMW or even Mercedes is a good idea. ChatGPT won't give me that satisfaction.

Finding images on the web that do not need attribution