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.

To the extent there is a degree of uniformity, two colors currently stand out: purple and green, with gradients being used across the board.

Current trends

Purple is the most dominant color by far. 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 popular aesthetics
  • 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 common color, green, 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. Github has recently adopted a green, purple, blue palette for its AICopilot.

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.

Re-word uses its dominant orange color across the product, even for AI products.

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.

Details and variations

  • Purple is the most dominant color in use. This can help users, but hinder your brand differentiation
  • Green is also growing in popularity, as is the combination of green and purple, a forward part of Github's new visual style
  • Gradients are commonly used to represent AI
  • Some brands do their own thing, and rely on other identifiers to help their AI features stand out

Considerations

Positives

Pattern convergence
Since the entire market seems to be catching onto the purple trend, using it to distinguish your product or feature is a safe way to signal the technology you’re using. This is beneficial from a marketing perspective, but also helps consumers confidently navigate their options and identify when this technology is present.

Visual contrast as affordance
Color increases trust as users are able to identify which information was generated by them or other humans, and what was generated by the model. Using different colors in a similar palette, like Google's pastels, can help users distinguish between conversations while maintaining clarity of what is machine generated.

Potential risks

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.

Use when:
AI features could be missed in an interface, or you want to distinguish them from other offerings.

Examples

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
Green and purple make of the base of the color scheme of Github's landing page
No items found.