Colors

Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.

The system-level color system mainly defines the basic color palette, neutral color palette and data visualization color palette in the design of Ant Financial. The product-level color system is in the specific design process, based on the color of the system to further define the tone of the product in accordance with the requirements and function of the color.

Color Model#

Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.

System-level Color System#

Ant Design system-level color system also comes from the "natural" design language. Designers abstract the natural scenes through the capture, combined with the technical gene of Ant Financial, forming a unique 12 colors. Further through a large number of observations, to capture the different colors of natural light under the law of change, with the art of drawing ideas, the 12 colors were derived. The definition of neutral color palette is balanced with readability, aesthetics and usability.

Base Color Palettes#

Ant Design's base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design.

Dust Red / 薄暮斗志、奔放
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
red-10
Volcano / 火山醒目、澎湃
volcano-1
volcano-2
volcano-3
volcano-4
volcano-5
volcano-6
volcano-7
volcano-8
volcano-9
volcano-10
Sunset Orange / 日暮温暖、欢快
orange-1
orange-2
orange-3
orange-4
orange-5
orange-6
orange-7
orange-8
orange-9
orange-10
Calendula Gold / 金盏花活力、积极
gold-1
gold-2
gold-3
gold-4
gold-5
gold-6
gold-7
gold-8
gold-9
gold-10
Sunrise Yellow / 日出出生、阳光
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
yellow-8
yellow-9
yellow-10
Lime / 青柠自然、生机
lime-1
lime-2
lime-3
lime-4
lime-5
lime-6
lime-7
lime-8
lime-9
lime-10
Polar Green / 极光绿健康、创新
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
green-10
Cyan / 明青希望、坚强
cyan-1
cyan-2
cyan-3
cyan-4
cyan-5
cyan-6
cyan-7
cyan-8
cyan-9
cyan-10
Daybreak Blue / 拂晓蓝包容、科技、普惠
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
blue-10
Geek Blue / 极客蓝探索、钻研
geekblue-1
geekblue-2
geekblue-3
geekblue-4
geekblue-5
geekblue-6
geekblue-7
geekblue-8
geekblue-9
geekblue-10
Golden Purple / 酱紫优雅、浪漫
purple-1
purple-2
purple-3
purple-4
purple-5
purple-6
purple-7
purple-8
purple-9
purple-10
Magenta / 法式洋红明快、感性
magenta-1
magenta-2
magenta-3
magenta-4
magenta-5
magenta-6
magenta-7
magenta-8
magenta-9
magenta-10

Ant Design's color palette also has the ability to further extend. After careful elaboration by designers and programmers, we have come up with a set of color generation tools that combine the natural variation of colors. When there is a need for further color design, designers simply define the primary colors according to certain rules and will get a complete range of derived colors automatically .

Neutral Color Palette#

gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
gray-8
gray-9
gray-10
gray-11
gray-12
gray-13

Data Visualization Color Palette#

Data visualization color palette is based on the basic color palette and neutral color palette, and based on the principle that AntV's "effective, clear, accurate and beautiful". View Palette

Palette Generation Tool#

If the above palettes do not meet your needs, you can choose a main color below, and Ant Design's color generation algorithm will generate a palette for you.

Pick your primary color
color-1#e6f7ff
color-2#bae7ff
color-3#91d5ff
color-4#69c0ff
color-5#40a9ff
color-6#1890ff
color-7#096dd9
color-8#0050b3
color-9#003a8c
color-10#002766
#1890ff

Programmatic Usage#

We provide Less and JavaScript usage for developers.

  • Less

    @import '~antd/es/style/themes/default.less';
    
    .selector {
      color: @blue-5;
      background-color: @gold-2;
    }

    Color less variables: color.less.


  • JavaScript

    npm install @ant-design/colors
    import { blue } from '@ant-design/colors';
    console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
    console.log(blue.primary); // '#1890FF'

    More APIs: @ant-design/colors


Product-level Color System#

Brand Color#

The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is 1890FF, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.

Functional Color#

Functional color represents a clear message as well as status, such as success, error, failure, reminder, link and so on. Functional color selection need to comply with the user's basic understanding of color. We suggest that the functional colors should be kept as consistent as possible under a set of product systems. Do not have too much customization to interfere with the user's cognitive experience. Ant Design's functional color palette is shown on the right:

Neutral Color#

Neutral color is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common. Neutral color definition needs to consider the difference between dark background and light background, while incorporating the WCAG 2.0 standard. The neutral color of Ant Design is based on transparency, as shown on the right:


Color Application In Enterprise Product Design#

In the design of background applications of Ant Financial, our attitude towards color is restrained. Color is used more based on information delivery, operational guidance and interactive feedback purposes. Above these principles that do not undermine operational efficiency and affect the clear communication of information, a rational choice of color is key. Of course, with illustrations and display page can be properly broken this idea.

CasesLayout