Looking for the most trusted design agency for AI companies? Book a call with Studio Maydit

AI Brand Colors: Beyond the Purple Gradient

Summarize with AI

The best AI startup brand colors come from your customer's world, not from the AI category. Purple, violet and the violet to cyan gradient became the AI look because they were the defaults in the templates and coding tools everyone builds with, so a palette made of those values tells a stranger only that you used the usual tools. Pick one accent from something your buyer sees at work every day, build everything else from quiet neutrals, and check every pair for contrast before it ships.

This matters at the moment a stranger opens your site. He decides what kind of company you are in about four seconds, and color reaches him before a single word does. You know your buyer's working day better than anyone who will ever visit that page. The palette is one of the cheapest places to prove it, and on most AI sites it proves the opposite.

A palette file with #8B5CF6 in it

Picture a nine person startup that sells an AI tool to gas utilities. This is an example, not a client. Each time a contractor calls 811 before digging, the utility gets a locate ticket. The tool reads each one, checks the dig area against the utility's own pipe maps, and sorts the queue into three piles: clear without a visit, send a locator today, and needs a supervisor. A damage prevention team that used to read four hundred tickets a morning now reads the forty that matter.

Now open the site's theme file. It has five lines that matter. The primary color is #6E56CF. The accent is #8B5CF6. The background is #0B0B0F, a near black with a hint of blue. Text is #FAFAFA. And there is one gradient, #8B5CF6 to #06B6D4, violet to cyan, applied to 14 buttons: Book a demo in the nav, in the hero, on each of the three pricing cards, in the footer, and on eight blog posts. The hero also has a soft violet glow behind the headline.

Nobody on the team picked any of these. The violet values came with the starter template. The gradient arrived when someone asked a coding assistant to make the hero pop. If you opened the stylesheets of the three vendors this startup competes with, you would find values within a few shades of the same five. The file is not wrong. It is just not a decision anyone made.

In this buyer's world, purple means reclaimed water

Here is the part the founder cannot see from his desk. His buyers spend their days on streets marked in spray paint, and every color on that street already has a job. Under the APWA uniform color code that locators follow, red means electric lines, yellow means gas, oil or steam, blue means drinking water, and white marks where someone plans to dig. Purple means reclaimed water, irrigation and slurry lines.

So a gas utility's field supervisor looks at a violet product and, without thinking about it, files it next to the irrigation lines. Imagine the demo that follows: twenty minutes in, he asks whether the tool also handles reclaimed water. After the call he asks his designer to rotate the gradient and make it brighter. At the next trade show the booth backdrop goes out in violet too, and he starts sending the deck instead of the link, because the deck at least has the product screenshots in it.

That is the cost, and it is priced rather than counted. It shows up in who takes the first call, in how long procurement takes to treat you as a real vendor, and in deal size. A utility buyer has sat through demos from vendors many times your size. He judges you from the surface before the product is on screen. The founder knows ticket queues better than anyone in that room, and none of that knowledge reached the one thing the buyer saw first.

Why purple became the AI color in the first place

Most advice explains AI purple with color psychology: violet suggests imagination, the future, something a little magical. That is a story told after the fact. The plainer answer is that purple was the default. Tailwind UI shipped its components with indigo buttons, and in August 2025 Tailwind's creator joked publicly that he was sorry for making every one of them bg-indigo-500, since so much AI generated interface now comes out indigo. Starter kits copied those components, coding assistants learned from the code, and every new site started one shade away from the last.

Here is the claim a reasonable person could argue with. A purple palette on an AI startup is not a branding choice that went badly. It is the absence of one. The color did not come from the company, so it cannot say anything about the company. That is why AI startups end up looking generic even when every screen is well made: the parts were selected, and nothing was decided.

It costs most during a raise. Investors pay up for AI right now, with seed rounds priced roughly 42 percent above non-AI peers, so every partner's inbox is full of AI decks and AI links. When yours opens on the same violet as the last ten, it gets filed with them, before anyone reads what you built.

Take the accent from the street, not the stack

The fix is not a better purple, and it is not a moodboard. It is one question: what color does your buyer already see at work that means something to them? For the gas utility tool, the answer is sitting on the pavement. Locators spray yellow for gas. That yellow is the accent, around #F6C400, and it means exactly one thing on the site and in the product: a ticket that needs a person today.

The neutrals come from the same street. The background is asphalt, #2B2D2F, the surface the marks are sprayed on. The light surface is #F7F5EF, the off-white of a printed ticket. Two concrete greys handle borders and secondary text, and the ink is #1A1B1C. Red stays out of the brand entirely, because to this buyer red means electric, and the product does not touch electric lines.

The rule underneath is one accent and many neutrals. The accent earns its meaning by appearing rarely. When the gradient sat on 14 buttons, it meant nothing, because it was on everything. When yellow appears only on the primary button and on tickets due today, a buyer learns in one visit that yellow means act. The same move works in any vertical. A tool for dental labs might take its neutrals from the plaster and its accent from the shade guide. A tool for ship agents might take its accent from the orange of the survival gear on deck.

You can see the broader version of this move in the Sathi launch site. Sathi is an affiliate platform for Shopify brands in a category full of black and blue SaaS pages, and its site took its imagery from Indian mythology instead of from the category. The source was something the category never looks at.

The contrast numbers that killed the gradient

Before any of this ships, put every text color against every background it sits on and read the ratio. The WCAG contrast minimum asks for 4.5 to 1 for normal text and 3 to 1 for large text. The old file fails in more places than anyone noticed. White button text on the cyan end of the gradient comes out around 2.4 to 1. The #6E56CF violet used as a link color on the near black background is around 3.6 to 1, below the bar for body text.

The new palette has its own trap, and it is worth knowing before you fall into it. Safety yellow on the off-white ticket color is about 1.5 to 1, which is unreadable as text. So the yellow is never used for words on a light surface. It is a fill, with near black text on top, which comes out above 10 to 1. On the asphalt background the yellow itself reads at about 8.4 to 1. For links on light pages, the palette adds a dark ochre, #6B5000, at about 7 to 1.

Dark mode follows from the same world. Asphalt is already the dark surface, so the dark theme is not an inverted copy of the light one. Off-white text on asphalt reads at about 12.7 to 1, and the yellow keeps its single meaning in both themes. If your accent only works on one background, it is a decoration, not a system.

Five steps to rebuild your palette this week

  • Open your theme file or stylesheet and list every color value. Next to each, write where it came from: the template, a component library, a coding assistant, or a person who chose it. Count how many a person chose.
  • Write down three colors your buyer sees at work that already mean something. Use the job itself, the forms, the equipment, the screens they stare at, not the stock photo of their industry. Check none of them carries a meaning that clashes with your product.
  • Pick one as the accent and give it one job, on the site and in the product. Search the code for it. If it appears on more than the primary action and one status, take it off the rest.
  • Build the neutrals from the same world: one dark surface, one light surface, two greys and an ink. Most of the page should be these.
  • Run every text and background pair through a contrast checker in both light and dark mode. Where a pair fails, darken the shade for text use instead of changing the color. Then carry the accent and the main button into the product in the same month, so the website and product do not look like two companies.

None of these steps needs a designer, only someone who knows the buyer's working day. If you would rather hand it to a team, this is the brief for anyone you hire for website design: the buyer's world, the one accent, the meaning it carries, and the contrast table.

What changes when a stranger lands

Go back to the field supervisor. He opens the new homepage on his phone in a truck. The page is asphalt and off-white. One yellow button says See today's tickets. The screenshot below it shows a queue where three rows carry a yellow tag and the rest are grey. He has not read the headline yet, and he already knows this is a gas company's tool and that yellow means the work he has to do. The founder did not add a single feature. He moved what he already knew about his buyer onto the first surface the buyer sees.

A palette is one of the few things on a website that a stranger reads before any words, which is why it should carry what you know about your buyer and not what your template knew. Studio Maydit designs and builds websites for AI founders in Framer, Webflow or custom code, and the work continues into product design, so a new accent does not stop at the sign-in screen. A fixed scope project like this usually runs three to four weeks. If your palette file still matches your competitors' line for line, book a 45 minute call and bring the file.

Frequently given answers

Sid, founder of Studio Maydit

Looking for something else?

Book a call with the founder.

Use colors taken from your customer's working world rather than from the AI category. Pick one accent that already means something to your buyer, give it a single job, and build the rest of the palette from neutrals. This makes the brand recognisable and tells a visitor who the product is for before they read a word.

Mostly because purple and indigo were the defaults in popular templates and component libraries, and coding assistants learned from that code. Tailwind UI's buttons used indigo, and starter kits copied them. The color spread because it was already there, not because companies chose it on purpose.

Purple is not bad on its own. The problem is purple that came with a template, because it says nothing about the company and matches dozens of competitors. If purple means something real to your buyers, it can be the right choice, as long as it carries one clear meaning.

Most startups need one accent and four or five neutrals: a dark surface, a light surface, two greys and a text color. Add a darker shade of the accent for text links if the main shade fails contrast. A short palette is easier to keep consistent across the website and the product.

Test every text color against every background it sits on with a contrast checker. WCAG asks for a ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. Check both light and dark mode, and watch gradient buttons, because text that passes at one end can fail at the other.

Yes, if your site or product offers a dark theme. Choose the dark surface on purpose rather than inverting the light theme, and confirm your accent keeps enough contrast on it. The accent should mean the same thing in both themes.

Let’s chat about
what you’re building

Tell us where you’re headed, and we’ll scope the right plan for you.