Color Theory - Explore the fundamentals of color relationships and their emotional impact

[frail mesa]

Color theory involves understanding the relationships between colors and the effects different color combinations can have on the viewer. Here are some examples of how color impacts the viewer:

• Evoke specific emotions with different colors to set a mood or tell a story.
• Use seasonal colors (e.g., Autumn’s yellows and oranges) to suggest a particular feeling.
• Evoke nostalgia with certain color palettes.
• Use color contrast to highlight differences between elements and guide the viewer's focus.
• Use lack of color or monochromism with gradations of single color can modulate emotion.

• two images of the same scene side by side, with one using a palette of blue and white and the other using a palette of pink, green, and yellow. This illustrates the contrast and effect of different color palettes on user impact.
• whimsical variation of a minimalist portrait of the traditional Green Man. The stone figure features playful green touches of moss and an enigmatic smile, adding a fanciful and whimsical element while maintaining the overall minimalist aesthetic.
• a luminous rainbow over a dark, stormy cityscape. The rainbow is the only colored object, symbolizing a sign of hope.

This week's Technique Tuesday celebrates the first anniversary of its launch on May 23, 2023, which began with the topic of "Color Theory." Shortly thereafter, we started the Curators Corner to collect art education tips. Here’s the first post: https://discord.com/channels/974519864045756446/1113104460055576698

Color Theory - Explore the fundamentals of color relationships and their emotional impact

[knotty jasper]

Color Inversion
Color inversion refers to the process of reversing colors to their opposites on the color wheel. For example, black becomes white, blue becomes orange, etc. This can create striking and often surreal visual effects.

Landscape split into normal and inverted colors. The left half depicts the natural colors of a vibrant landscape, while the right half displays the similar scene with inverted colors, highlighting the contrast and surreal effect of color inversion.

[somber pendant]

Limited Color Palette in UI Design
Using a limited color palette in user interface (UI) design is a strategic choice that can greatly enhance the usability, aesthetics, and overall effectiveness of digital products, with a clean, professional appearance that represents a strong brand identity.

My hypothetical project was to create a UI design for a traditional Japanese inn, which promotes close relationship to nature, tranquility and self-discovery. Instead of writing detailed prompts, I used ChatGPT 4o as a sounding board to develop my design idea, starting with a discussion of color theory and the effects of limited color palette. When I asked for the brand color palette, it was able to take my brief description and suggest a color palette that accurately reflects the brand identity.

• Earthy Green and Soft Brown: Reflect the natural surroundings and traditional wooden architecture.
• Warm Beige: Offers a calming and neutral background that emphasizes simplicity.
• Deep Red and Soft Gold: Add touches of traditional Japanese elegance and highlight important elements.
• Charcoal and White: Ensure readability and maintain a clean look while complementing the natural tones.

I asked 4o to design webpages with this color palette, and after a few iterations, we arrived at the attached image, which closely matched my vision. Prompt by ChatGPT 4o: "A home screen UI design for a traditional Japanese inn, designed in a style analogous to the 'About Us' page. The design features a smaller rustic farmhouse-style building surrounded by a lush, tranquil garden, and incorporates the brand color palette: Earthy Green (#556B2F), Soft Brown (#8B4513), Warm Beige (#F5F5DC), Muted Gray (#A9A9A9), Deep Red (#8B0000), Soft Gold (#DAA520), White (#FFFFFF), and Charcoal (#2F4F4F). The layout includes a welcoming header, navigation menu, and key visuals of the rustic inn and garden to emphasize tranquility and a close relationship with nature."

[frail mesa]

In the past, DALL-E was never able to accurately handle color hex codes, but the 4o model seems to show improvement. In your prompt, the model may have been reacting to the color descriptions rather than the hex codes alone, but this test prompt done in 4o isolates the hex codes specifically. This may point to a need to keep track of which model is being used, just as we had to deal with the jump from DALL-E 2 to DALL-E 3.

[somber pendant]

I was pleasantly surprised when 4o generated prompts with HEX#s on its own. In response to your pt re: specifying the model used, I bolded ChatGPT 4o in my post.

[frail mesa]

Yes, I appreciated that, and wanted to note it!

[somber pendant]

Complementary vs. Analogous Color Schemes
Complementary and analogous color schemes both play crucial roles in design and art, influencing the viewer's perception and emotional response.

• Complementary colors are pairs of colors that are opposite each other on the color wheel, which create a strong visual contrast, making each color appear more vibrant. This high contrast can make elements stand out, drawing attention to key parts of a design. The opposing nature of complementary colors can create visual tension. This tension can be used effectively to create a bold, dramatic effect but can also be overwhelming if not balanced properly.

• Analogous colors are groups of three colors that are next to each other on the color wheel, which create a sense of harmony and unity, as the colors naturally blend well together. This results in a cohesive and pleasing aesthetic. The similarity between analogous colors produces a calming and soothing effect, making them ideal for designs that aim to relax or comfort the viewer.

Four Impressionist oil paintings depicting a pastoral scene in Japanese countryside showcase the contrasting effects of these two color schemes with different primary colors: 1) analogous/lime green, 2) complementary/lime green, 3) analogous/pale blue, 4) complementary/pale blue.

[gusty summit]

Simultaneous contrast in color theory is the term for contrasting colors appearing in the same space, making them appear notably different from how they would appear alone.

For example, a neutral gray on a darker backdrop will appear darker, perceptually, than the same neutral gray will on a lighter backdrop.

Simultaneous contrast has been explored on record for many hundreds of years, and it's a good vocab word to use in DALL·E. These are three images inspired by Leonardo da Vinci's explorations of the concept:A detailed painting inspired by Leonardo da Vinci's exploration into simultaneous contrast. The scene shows a vibrant red object placed against a green background, making the red appear more vivid. Nearby, there is a section illustrating light and shadow, where the colors of the illuminated objects influence the shadows, creating a realistic effect. The painting includes a figure with dynamic shading techniques, with shadows reflecting the colors of nearby objects and light sources. The overall composition is lifelike, with rich and contrasting hues demonstrating the interaction of colors as observed by da Vinci.

[haughty monolith]

The colors of emotion

Warm Colors: Reds, oranges, and yellows. These colors are associated with warmth, energy, and excitement.

Cool Colors: Blues, greens, and purples. These colors are associated with calmness, serenity, and sadness

Psychological effects of Color

•    Red: Can evoke feelings of passion, excitement, or urgency.
•    Blue: Often associated with calmness, trust, and stability.
•    Yellow: Conveys happiness, energy, and attention.
•    Green: Symbolizes nature, growth, and tranquility.
•    Purple: Represents luxury, creativity, and mystery.
•    Orange: Evokes enthusiasm, warmth, and adventure.
•    Black: Can be sophisticated, elegant, or somber.
•    White: Associated with purity, simplicity, and cleanliness.

Understanding these principles allows artists to make informed choices about color combinations to enhance their work’s emotional and visual impact.

Here is how color choices can affect the mood of an image. The only change I made to the basic topic of a person in a room reading a letter was to convey completely different moods, using a warm pallet and a cool pallet. Just one of many choices that help define the mood of an image.

[ivory galleon]

Black, in the context of color, is often described as the absence of light. Unlike other colors that result from specific wavelengths of light being reflected, black is what we see when no light is reflected to our eyes. True black doesn't exist as a color in the traditional sense because it is the complete absorption of light rather than a reflection of specific wavelengths. This concept extends to shadows, which are not truly black but are areas with reduced light. Shadows can appear to have an inverse or complementary color to the object casting them due to the way our eyes and brain perceive the surrounding light and color contrast. For example, a red object in bright sunlight might cast a shadow with a slight blue tint, an effect known as color constancy, where our visual system compensates for the lighting conditions, creating the perception of the shadow as having an opposite hue.

A visually appealing and educational painting that captures the intriguing notion of shadow and how its color can appear inversely related to the object. Central to the artwork is an apple. The focus is on the shadow this apple casts, and there is an evident color shift demonstrating this phenomenon. The setting is an art classroom, with the painting created on a canvas using oil paints. The image is suitable for all audiences, inspiring curiosity about light, color, and art.
via Dall-e bot

[steel brook]

A fun challenge to immerse yourself more deeply in color theory may be to create images using various color sets as chosen by an artistic color scheme. While some of these have been touched on already, there are many more! Experimenting with a variety of chosen schemes can help you capture the mood you want in your images. Note that DALL-E will often independently change the composition of your images based on colors provided to make a more aesthetically pleasing image. For the sake of this demonstration, all images use the same base prompt: "A beautiful abstracted Renaissance oil painting on canvas of a simple scene, including a couple of flowers blowing on a hill in the foreground. In the distance, a quaint medieval village is nestled in a valley. The image uses a [color sceme] emphasizing the colors: [list]."

1 - Split complementary schemes use a single color combined with, rather than the one color on the opposite of the color wheel, the two colors on either side of it (image 1: " sea green, rusty orange, and red").
2 - Triadic schemes pick three colors that are all equally spaced from each other in a ring around the color wheel (image 2: "red, navy blue, and olive green").
3 - Tetradic schemes combine any two complementary palettes, where the chosen values form a rectangle on the color wheel. These two palettes are often between 30° and 50° of each other (image 3: "medium blue, dusty purple, bright orange, and vibrant yellow").
4 - Square schemes are a specific kind of tetradic scheme where the two complimentary palettes are at a right angle from each other on the color wheel. (image 4: "avocado green, cobalt blue, dull magenta, and muted goldenrod").

[ivory galleon]

Additive color mixing refers to the process of creating colors by mixing light of different wavelengths. In this model, adding together different colors of light creates new colors. For example, mixing red and green light creates yellow. This is the principle behind how colors are displayed on screens and monitors, where red, green, and blue (RGB) light sources are used to create a wide range of colors.

Subtractive color mixing, on the other hand, is used in the physical world, such as in paints and dyes. It works by selectively absorbing certain wavelengths of light and reflecting others. When different colored paints are mixed together, each pigment absorbs certain wavelengths, leading to a subtractive color mixture. For instance, mixing blue and yellow paint creates green because the blue pigment absorbs red light, while the yellow pigment absorbs blue light, leaving green light to be reflected.

a paint pallet with various colors of wet paints, many mixed together, demonstrating subtractive color mixing.

three lamps, red light, green light, blue light, the light of the lamps is overlapping, the colors of the light mixing, dark environment
Via bing

[frail mesa]

Color theory in art takes on a unique perspective when considering color blindness. There are multiple kinds of color blindness, each presenting different accessibility issues that need to be addressed in design. For individuals with certain types of color blindness, blue and yellow are often more easily distinguishable than other colors. This makes blue and yellow a good choice for designing computer interfaces and artwork that are accessible to people with color vision issues. Standards have been developed for computer interface design that address these accessibility goals, which also cover contrast for readability.

Older people experience yellowing of the cornea as they age, which affects color perception. The yellowing of the cornea, along with other age-related changes in the eye such as lens yellowing, can make it harder for older adults to distinguish between certain colors, particularly blues and greens. This can impact their ability to perceive contrast and see colors clearly, making it important to consider high contrast and distinct color choices in design to enhance accessibility for older individuals. Prompt: "Split screen image of a minimalist still life. On the left side, the still life uses mostly shades of grey and pale green and pale blue, representing muted vision. On the right side, the same still life is shown with high contrast colors such as red, green, blue, orange, and yellow, representing full color vision. This emphasizes the difference in color contrast between muted and full color vision."