Analysis of Ant Design Color Palette Generation Algorithms Across Versions 1.x, 2.x, and 3.x

Introduction

While updating an internal design system, the author studied Ant Design's three major color‑palette generation algorithms (1.x, 2.x, 3.x) to understand the "deterministic" design philosophy that improves maintainability and reduces visual uncertainty.

What Is a Palette?

A palette is a finite set of colors (or a color table) used for UI design. In Ant Design it consists of a primary color and its nine derived shades.

Ant Design 1.x Palette Algorithm

The 1.x version uses a simple tint/shade system: the primary color (index 5) is mixed with white to create lighter shades (indices 1‑4) and with black to create darker shades (indices 6‑9). The mixing is performed by a Sass mix function.

// 变亮
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}
// 变暗
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}
.useage { background-color: tint(#2db7f5, 80%); }

Pros: simple and easy to understand. Cons: relies on pure white/black, which can produce unrealistic intermediate colors and uneven contrast for extreme shades.

Ant Design 2.x Palette Algorithm

The 2.x version replaces the simple tint/shade system with a more sophisticated approach that combines white mixing, Bézier‑easing, and hue rotation based on warm/cold classification. The algorithm uses the tinycolor library and a custom colorEasing function.

var primaryEasing = colorEasing(0.6);
this.colorPalette = function(color, index) {
  var currentEasing = colorEasing(index * 0.1);
  if (index <= 6) {
    return tinycolor.mix('#ffffff', color, currentEasing * 100 / primaryEasing).toHexString();
  }
  // warm/cold handling omitted for brevity
};

The algorithm distinguishes warm and cold colors (using RGB r vs b) and applies different darkening factors and hue rotations (e.g., warmRotate = -26°, coldRotate = 10°) to achieve smoother transitions.

Ant Design 3.x Palette Algorithm

Version 3.x abandons mixing with fixed white/black and adopts an HSV‑based method. It calculates hue, saturation, and value adjustments directly from the primary color using step constants (e.g., hueStep = 2 , saturationStep = 16 , brightnessStep1 = 5 ).

function main(color, index) {
  var isLight = index <= 6;
  var hsv = tinycolor(color).toHsv();
  var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
  var hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
  var saturation = isLight
    ? Math.round(hsv.s * 100) - saturationStep * i
    : (i === darkColorCount)
      ? Math.round(hsv.s * 100) + saturationStep
      : Math.round(hsv.s * 100) + saturationStep2 * i;
  var value = isLight
    ? Math.round(hsv.v * 100) + brightnessStep1 * i
    : Math.round(hsv.v * 100) - brightnessStep2 * i;
  return tinycolor({ h: hue, s: saturation / 100, v: value / 100 }).toHexString();
}

This approach yields smoother gradients and easier maintenance but requires the primary color to have relatively high saturation and brightness; otherwise, the generated palette may suffer from low contrast or overly similar extreme shades.

Evaluation and Issues

All three versions aim to satisfy WCAG 2.0 AA contrast (4.5:1) for the 6th shade, yet real‑world testing shows some primary colors (e.g., deep purple vs bright yellow) fail this rule. Additionally, large hue or brightness differences between same‑index colors can make them unsuitable for paired use.

Key observations:

Using pure white/black in 1.x creates unrealistic transitions.

2.x improves smoothness with Bézier curves and warm/cold adjustments but introduces complexity.

3.x simplifies the code and improves readability, yet heavily depends on a well‑chosen primary color.

Conclusion

Ant Design’s palette generation has progressively become more sophisticated, moving from simple linear mixes to mathematically driven HSV adjustments. The evolution reflects a growing emphasis on scientific design, maintainability, and user experience, while still leaving room for further refinement, especially regarding contrast compliance and handling of low‑saturation primary colors.