Flat colors versus gradients in UI branding
Case study of Google: how gradients were integrated into the system without destroying the brand
In 2025 year, Google changed its logo for the first time in ten years, adding gradient transitions between letters. The decision caused controversy, but it was technically sound: the company did not create a chaos of ten shades, but carefully blended the official blue, red, yellow, and green so that the transition was perceived as a single dynamic form — a metaphor for the «AI era», where everything is in motion. An important detail: the gradient was applied only to the logo and a few accent elements, while Google Workspace and Android interfaces remained mostly flat. This is the correct logic: gradients are a point accent of identity, not a color system for the entire product.
Decision matrix: what to use for a specific UI element
There is no universal rule that «gradients are bad» or «gradients are stylish». The decision is made on a per-element and context basis.
| Element | Flat color | Gradient |
|---|---|---|
| Call-to-action button | Dashboards, forms, repetitive actions | Onboarding, landing, rare «premium» actions |
| Application background | Almost always — does not interfere with content | Only for splash screens, promo blocks |
| Icon/logo | Enterprise, B2B, fintech for institutions | Consumer brands, media, social networks (Instagram, Spotify) |
| Data cards | Always, if there is text and numbers inside | Practically never |
| Hero section of the website | Strict B2B-products | Products with emotional positioning |
Why gradients kill text readability
The main technical mistake of designers is to check text contrast only at one point of the gradient. A white caption is well readable on the green transition area and almost disappears on the adjacent lavender tone. WCAG requires at least 4.5:1 for main text, but this rule works for solid colors. With a gradient, you need to check contrast at the lightest (or most 'problematic') point of the transition, otherwise part of the caption will become unreadable on real devices under different screen brightness.
- Check contrast at three points of the gradient: start, middle, end
- For long text, do not use gradient backgrounds at all — only for short accent captions
- Add a semi-transparent tile under the text if the gradient is decorative and not semantic
OKLCH instead of sRGB: why gradients from 2026 year look cleaner
Classic sRGB gradients often 'go bad' in the middle — the transition between two saturated colors produces a dirty gray or murky brown zone. This is a mathematical property of the color space, not a designer's mistake. OKLCH and Oklab build interpolation based on a perceptually uniform model: the brain sees a smooth transition of brightness and saturation without dips. That's why modern interface gradients and trendy mesh gradients look noticeably 'cleaner' — they are increasingly defined in CSS via oklch() instead of linear-gradient with hex values.
Flat 2.0: a hybrid, not a choice of one style
Excessive flat minimalism sometimes worsens the experience — the user does not understand what is clickable and what is just text. Hence the emergence of semi-flat, or Flat 2.0: the base palette remains flat, but shadows, subtle highlights, hover animations, and spot micro-gradients on 5-10% of interface elements — usually on action buttons and status indicators — are added. This is not a rollback to skeuomorphism, but a reasonable compromise: the system is readable quickly, but does not look sterile.
A separate headache is adapting to dark theme. A gradient that works perfectly on a light background often burns or loses depth in dark theme. A working approach is not to recalculate the gradient manually, but to store it in HSL/OKLCH and change only lightness (L), preserving hue and saturation — then the transition between themes looks consistent, not like two different brands.
Logo on a gradient: the rule of two-three colors
Sberbank applies a gradient with blue, yellow and green, Spotify remains loyal to the monochrome brand green. The coincidence is not accidental: more than three-four colors in a logo create visual chaos and poorly predictable behavior when scaling. To ensure a gradient logo survives real-world use, not just on a presentation slide, you need to plan three versions from the start:
- Color — the gradient itself, for digital media and large formats
- Monochrome — flat fill with one of the base colors of the gradient, for small print, engraving, faxing invoices
- Single-color negative — for dark backgrounds and packaging where the gradient is technically unavailable
If the logo does not withstand these three versions without losing recognizability, then the gradient was chosen poorly — and this should be clarified at the sketch stage, not after the print run has started.
Enterprise versus consumer: different physics of trust
In SaaS, admin panels and banking dashboards, flat color remains the standard not due to conservatism, but for functional reasons: users make decisions based on numbers and statuses, orientation speed matters more than expressiveness, and text lies on almost every background. In consumer products — social networks, media, entertainment apps — the task is different: to hold emotional attention, and gradients here work as a visual hook. Mixing these logics is a common mistake: a banking app with gradient transaction cards looks impressive on a screenshot but is inconvenient in daily use.
Case study of Google: how gradients were integrated into the system without destroying the brand
In 2025 year, Google changed its logo for the first time in ten years, adding gradient transitions between letters. The decision caused controversy, but it was technically sound: the company did not create a chaos of ten shades, but carefully blended the official blue, red, yellow, and green so that the transition was perceived as a single dynamic form — a metaphor for the «AI era», where everything is in motion. An important detail: the gradient was applied only to the logo and a few accent elements, while Google Workspace and Android interfaces remained mostly flat. This is the correct logic: gradients are a point accent of identity, not a color system for the entire product.
Decision matrix: what to use for a specific UI element
There is no universal rule that «gradients are bad» or «gradients are stylish». The decision is made on a per-element and context basis.
| Element | Flat color | Gradient |
|---|---|---|
| Call-to-action button | Dashboards, forms, repetitive actions | Onboarding, landing, rare «premium» actions |
| Application background | Almost always — does not interfere with content | Only for splash screens, promo blocks |
| Icon/logo | Enterprise, B2B, fintech for institutions | Consumer brands, media, social networks (Instagram, Spotify) |
| Data cards | Always, if there is text and numbers inside | Practically never |
| Hero section of the website | Strict B2B-products | Products with emotional positioning |
Why gradients kill text readability
The main technical mistake of designers is to check text contrast only at one point of the gradient. A white caption is well readable on the green transition area and almost disappears on the adjacent lavender tone. WCAG requires at least 4.5:1 for main text, but this rule works for solid colors. With a gradient, you need to check contrast at the lightest (or most 'problematic') point of the transition, otherwise part of the caption will become unreadable on real devices under different screen brightness.
- Check contrast at three points of the gradient: start, middle, end
- For long text, do not use gradient backgrounds at all — only for short accent captions
- Add a semi-transparent tile under the text if the gradient is decorative and not semantic
OKLCH instead of sRGB: why gradients from 2026 year look cleaner
Classic sRGB gradients often 'go bad' in the middle — the transition between two saturated colors produces a dirty gray or murky brown zone. This is a mathematical property of the color space, not a designer's mistake. OKLCH and Oklab build interpolation based on a perceptually uniform model: the brain sees a smooth transition of brightness and saturation without dips. That's why modern interface gradients and trendy mesh gradients look noticeably 'cleaner' — they are increasingly defined in CSS via oklch() instead of linear-gradient with hex values.
Flat 2.0: a hybrid, not a choice of one style
Excessive flat minimalism sometimes worsens the experience — the user does not understand what is clickable and what is just text. Hence the emergence of semi-flat, or Flat 2.0: the base palette remains flat, but shadows, subtle highlights, hover animations, and spot micro-gradients on 5-10% of interface elements — usually on action buttons and status indicators — are added. This is not a rollback to skeuomorphism, but a reasonable compromise: the system is readable quickly, but does not look sterile.
A separate headache is adapting to dark theme. A gradient that works perfectly on a light background often burns or loses depth in dark theme. A working approach is not to recalculate the gradient manually, but to store it in HSL/OKLCH and change only lightness (L), preserving hue and saturation — then the transition between themes looks consistent, not like two different brands.
Logo on a gradient: the rule of two-three colors
Sberbank applies a gradient with blue, yellow and green, Spotify remains loyal to the monochrome brand green. The coincidence is not accidental: more than three-four colors in a logo create visual chaos and poorly predictable behavior when scaling. To ensure a gradient logo survives real-world use, not just on a presentation slide, you need to plan three versions from the start:
- Color — the gradient itself, for digital media and large formats
- Monochrome — flat fill with one of the base colors of the gradient, for small print, engraving, faxing invoices
- Single-color negative — for dark backgrounds and packaging where the gradient is technically unavailable
If the logo does not withstand these three versions without losing recognizability, then the gradient was chosen poorly — and this should be clarified at the sketch stage, not after the print run has started.
Enterprise versus consumer: different physics of trust
In SaaS, admin panels and banking dashboards, flat color remains the standard not due to conservatism, but for functional reasons: users make decisions based on numbers and statuses, orientation speed matters more than expressiveness, and text lies on almost every background. In consumer products — social networks, media, entertainment apps — the task is different: to hold emotional attention, and gradients here work as a visual hook. Mixing these logics is a common mistake: a banking app with gradient transaction cards looks impressive on a screenshot but is inconvenient in daily use.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
