Ant Design Colors

Ant Design Colors is the small TypeScript utility that powers Ant Design’s color palette generation. Given any base color, it computes a complete 10-step palette (lighter tints through the base to darker shades) by walking hue, saturation, and brightness in carefully tuned steps, matching the same visual scale used throughout the Ant Design component library. It also ships the full set of Ant Design’s preset palettes (red, volcano, gold, blue, purple, and more) plus dark-theme variants so consumers don’t need to regenerate colors that are already standardized.

Because it depends only on @ant-design/fast-color for color math, the package stays tiny and framework-agnostic — it exports plain arrays of hex strings, so any design system, theming layer, or CSS-in-JS solution can consume its output without pulling in React or any UI runtime.

What You Get

• A generate() function that turns any base color into a 10-step light-to-dark palette using hue/saturation/brightness stepping rules
• Dark-theme palette generation via a theme: 'dark' option that blends steps against a background color instead of just lightening/darkening
• Pre-built presetPalettes and presetDarkPalettes objects covering all of Ant Design’s standard named colors (red, blue, green, gold, purple, etc.)
• Each named color array also exposes a .primary property pointing at its canonical mid-tone shade
• Zero UI framework dependency — output is plain hex strings usable in CSS variables, Tailwind config, or any styling system

Common Use Cases

• Building a custom design system that needs Ant Design-style tonal palettes from brand colors
• Generating light and dark theme variants of a single accent color for a themeable UI
• Reusing Ant Design’s exact preset color scales in a non-Ant Design project for visual consistency
• Programmatically deriving hover/active/disabled shades from a single primary color at build time

Under The Hood

Architecture - The package is a thin, pure-function core: src/generate.ts implements the palette algorithm, src/index.ts re-exports generate alongside presetPalettes/presetDarkPalettes (built by generate-presets.ts at prepare-time from a fixed list of Ant Design brand colors) and the Palette/PalettesProps types from src/types.ts. There is no class hierarchy or internal state — generate(color, opts) converts the input to HSV via @ant-design/fast-color, walks 5 lighter and 4 darker steps using fixed hue/saturation/brightness deltas (hueStep, saturationStep, brightnessStep1/2), and for dark themes blends each computed step against a background color using a hardcoded darkColorMap of index/amount pairs instead of just adjusting lightness. Tech Stack - TypeScript compiled via father (an Umi-maintained library bundler) to both CJS (lib) and ESM (es) outputs; the only runtime dependency is @ant-design/fast-color for HSV/hex color math, keeping the published bundle very small. Dev tooling uses Jest (with ts-jest) for unit tests and Vitest for benchmarking (bench/), plus @umijs/fabric ESLint config and Prettier. Code Quality - Test coverage is solid for a package this size: tests/index.test.ts snapshot-checks generated palettes for a known ‘blue’ input against Ant Design’s own published hex values (light and dark theme), tests/presets.test.ts snapshot-tests every preset palette, and tests/export.test.ts checks the public export surface. Functions are small, single-purpose, and use plain numeric constants with Chinese-language inline comments explaining the color-theory reasoning (hue rotation direction, saturation clamping bounds) — there’s no runtime error handling since inputs are simple color strings validated by the underlying color library. API Design - The public surface is deliberately minimal: one function (generate) and two data exports (presetPalettes, presetDarkPalettes), each returning plain string arrays (with a bolted-on .primary property) rather than custom classes, so consumers can drop the output straight into CSS variables, Tailwind config, or any styling system with zero framework coupling.