Color scheme

Visual cues to help users identify AI features of content

Overview:

How do you know if you are interacting with a person or a model? How can you distinguish between information returned via a prompt request from information that was manually entered?

Color has emerged as a helpful signal to help users identify AI products and features. There is by no means a set color scheme, and this pattern is likely to evolve more as high-performing products start to break free of the pack and differentiate. Where there is a degree of uniformity, two colors stand out: purple and green.

Purple is the more dominant of the two. It is present in a majority of products boasting AI features, which could be the result of many patterns converging at once: 

  • Trends in modern web design driven by the aesthetic style popularized by Linear, which heavily features the color purple
  • Early uses in design-centered AI tools like Diagram's Magician plugin for Figma
  • The need for a color that wasn't commonly used elsewhere in interfaces but still felt familiar (purple being a close cousin to the ubiquitous blue)

The other color, green, probably has more predictable roots since it is the dominant brand color of ChatGPT, the largest player in the space. Green and purple are also complementary to each other on the color wheel, so the pairing shouldn't be surprising.

Should you use purple or green, or something else? That's up in the air, and up to you.

Some companies are opting to rely on iconography over color, extending their brand color to AI applications instead. ReWord is an example of a company marching to the beat of their own drum. Grammarly benefits from their existing brand color, green, being in the popular palette. However unlike almost anyone else in their space, they rely on colorful iconography instead of the more common flat sparkles patterns, making the departure from the purple/green color palette feel striking.

Perhaps this is because these two companies are in a highly commodified space, where creative brand and aesthetics styles are necessary to stand apart. We will need to watch patterns emerge in other categories before we can draw a definitive conclusion.

It’s likely we’ll continue to see brands play around with balancing consistency and their own color schemes. Purple is probably not going away, but it may fade in the background. Brands whose entire product revolve around AI, or in competitive spaces might be the first to develop their own aesthetic.

Lesser patterns

There are some smaller trends emerging related to color. Gradients are used in many sites, though that may have as much to do with an interest in appearing modern as anything else (RIP Flat Design, and good riddance).

Google is one player to watch, for obvious reasons due to its size but they also are playing with color in ways that aren’t echoed by other sites as far as I can tell. In their AI-generated search results, conversations alternate between different hues of pastel for each response in the search window. This has the combined benefit of separating conversations from each other while still contrasting with the rest of the search results page.

Benefits:

Anti-patterns:

Accessibility
Color alone is not sufficient as an affordance due to differences in physical or cognitive ability such as colorblindness. Combine color with text-based or iconographic indicators to help users navigate information by source and type.

Grades of AI
Given how quickly this technology is moving, a single color may not be a sufficient affordance to differentiate between models and other factors that could impact the strength of the results. Consider a different visual treatment for results returned from a beta model, or a model trained on more sensitive data.

Over-saturation
With everyone using the same color, it can be difficult for consumers to recognize one product from the next. If you want to stand out, consider playing with other colors while relying on alternative indicators of AI presence.

Jasper's interface uses the dominant purple motif
The Copy.ai dashboard is another example of heavy use of people
Writer.com uses a less saturated purple combined with a deeply saturated cyan (plus a sprinkling of gradients). This gives the feeling of the site being different even though it's drawing from a common palette
Adobe is relying on purple as their primary signifying color for their PDF AI features. Note the gradient in the button that reads as a deliberate "different" choice
Grammarly's primary brand color green fits in well with similar color palettes, while their icons stand apart
ReWord uses their brand color orange instead of purple or green
Various hues of pastels are used to add visual interest and contrast to Google results generated by AI
Copy.ai makes use of the purple/green color palette. Is this the standard across the use case? Or rather are copycats following the lead of the big players Copy.ai and Writer.com
Notion relies on a muted purple for all of its AI iconography
Purple features prominently as Figjam's indicator
Github relies on its signature blue to showcase its CoPilot features
Framer uses blue and purple gradients to signify its AI tools
Canva's purple and blue gradient is similar to Framer's
No items found.

What examples have you seen?

Share links or reach out with your thoughts?

Thanks for reaching out!
There was an error submitting your form. Please check that all required fields are complete.