Product and UX/UI Designers: Color Isn't a Formula

The other day I was working on adding a light theme to my website and I decided to give AI a try.

I asked Grok (Elon Musk's xAI) to generate a light color palette from the base one using an algorithmic solution—a mathematical rule.

The results made me think—more than ever—that design cannot be fully automated.

Let’s review what I tried and the results.

Using Grok to Generate the Palette

This is the base color palette of this website—being dark its default theme.

:root {
--cmm-base-color-primary: #0e0f0f;
--cmm-base-color-secondary: #141514;
--cmm-base-color-tertiary: #bbbaa6;
--cmm-base-color-quaternary: #fefce1;
--cmm-text-color-one: rgba(187, 186, 166, 0.7);
--cmm-text-color-two: #fefce1;
--cmm-text-color-three: #bbbaa6;
--cmm-text-color-four: #141514;
--cmm-text-on-base-primary: var(--cmm-text-color-one);
--cmm-text-on-base-secondary: var(--cmm-text-color-one);
--cmm-text-on-base-tertiary: var(--cmm-text-color-four);
--cmm-text-on-base-quaternary: var(--cmm-text-color-four);
--cmm-text-color-heading: var(--cmm-text-color-two);
--cmm-text-color-heading-link: var(--cmm-text-color-two);
--cmm-link-color: var(--cmm-text-color-three);
--cmm-link-hover-color: var(--cmm-text-color-two);
--cmm-border-color-main: rgba(187, 186, 166, 0.2);
--cmm-btn-color: var(--cmm-text-color-four);
--cmm-btn-hover-color: var(--cmm-text-color-four);
--cmm-btn-border-color: var(--cmm-border-color-main);
--cmm-input-bg: #101111;
--cmm-input-color: var(--cmm-text-color-one);
--cmm-input-border-color: transparent;
--cmm-input-focus-border-color: #bbbaa6;
}

I provided Grok with a simple prompt:

Generate another block of light theme CSS variables while maintaining the look and feel of the dark one.

The output:

[data-theme="light"] {
--cmm-base-color-primary: #F0ECEC;
--cmm-base-color-secondary: #E5E8E5;
--cmm-base-color-tertiary: #454535;
--cmm-base-color-quaternary: #1C1E03;
--cmm-text-color-one: rgba(31, 31, 31, 0.7);
--cmm-text-color-two: #1C1E03;
--cmm-text-color-three: #454535;
--cmm-text-color-four: #F0ECEC;
--cmm-text-on-base-primary: var(--dtr-text-color-one);
--cmm-text-on-base-secondary: var(--dtr-text-color-one);
--cmm-text-on-base-tertiary: var(--dtr-text-color-four);
--cmm-text-on-base-quaternary: var(--dtr-text-color-two);
--cmm-text-color-heading: var(--dtr-text-color-two);
--cmm-text-color-heading-link: var(--dtr-text-color-two);
--cmm-link-color: var(--dtr-text-color-three);
--cmm-link-hover-color: var(--dtr-text-color-two);
--cmm-border-color-main: rgba(69, 69, 53, 0.2);
--cmm-btn-color: var(--dtr-text-color-four);
--cmm-btn-hover-color: var(--dtr-text-color-four);
--cmm-btn-border-color: var(--dtr-border-color-main);
--cmm-input-bg: #E8E5E5;
--cmm-input-color: var(--dtr-text-color-one);
--cmm-input-border-color: transparent;
--cmm-input-focus-border-color: #454535;
}

If you understand CSS, you can clearly see the rule it applied:

For example, for --cmm-base-color-secondary, it derived the HSL value—120°, 5%, 8%—and adjusted the lightness value (100% - 8% = ~90%) before converting it back to HEX.

How did it look?

As you can tell, this doesn't feel right because of a several reasons:

1. That greenish tint doesn't align with the website's main colors and identity.
2. It didn't respect the color relationships of the dark theme—adding contrast problems.
3. The background color clashes with the rest of the palette.

Overall, the palette lacks harmony.

After prompting Grok a couple of times more—without achieving an aesthetic and balanced color palette—I did what I should have done from the start: handpicked the colors using my design and color theory knowledge:

[data-theme="light"] {
--cmm-base-color-primary: #f8f8f8;
--cmm-base-color-secondary: #f0f0f0;
--cmm-base-color-tertiary: #6b6a5d;
--cmm-base-color-quaternary: #333322;
--cmm-text-color-one: rgba(107, 106, 93, 0.7);
--cmm-text-color-two: #333322;
--cmm-text-color-three: #6b6a5d;
--cmm-text-color-four: #f8f8f8;
--cmm-text-on-base-primary: var(--cmm-text-color-three);
--cmm-text-on-base-secondary: var(--cmm-text-color-three);
--cmm-text-on-base-tertiary: var(--cmm-text-color-four);
--cmm-text-on-base-quaternary: var(--cmm-text-color-four);
--cmm-text-color-heading: var(--cmm-text-color-two);
--cmm-text-color-heading-link: var(--cmm-text-color-two);
--cmm-link-color: var(--cmm-text-color-three);
--cmm-link-hover-color: var(--cmm-text-color-two);
--cmm-border-color-main: rgba(107, 106, 93, 0.2);
--cmm-input-bg: #ffffff;
--cmm-input-color: var(--cmm-text-color-one);
--cmm-input-focus-border-color: #6b6a5d;
--cmm-btn-color: var(--cmm-text-color-four);
--cmm-btn-hover-color: var(--cmm-text-color-four);
}

Here's the result:

Conclusion

AI is a powerful tool—it can streamline tedious and monotonous tasks that add little value—but it falls short when it comes to creativity and thinking outside the box, as it doesn't perceive designs and colors like humans do, instead interpreting them mathematically.

And there's a difference between mathematical harmony and design harmony.

Many founders and developers rely on these tools—without critical thought—to generate designs, color palettes and layouts instead of doing what's best: developing their design skills and taste.

What they don't seem to know is that real design is unique, bold and meets the user need for accessibility, usability and beauty. It empowers you to establish a bond with your customers by communicating your brand's identity and values—while delivering a pleasant and accesible experience.

To do so, you need to put yourself in the shoes of your users and experience your product they way they do.

There's no shortcuts and there's no mathematical rules.

Need help with planning, design, development, or even business strategy?

I’m your guy.

Let’s connect and talk about your project.