## 色彩

## 品牌色的应用

品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。
在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 WakeData 的品牌色取自基础色板的橘黃色，
Hex 值为`#f0762b`，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。

## 功能色

功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。
我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。

## 中性色

中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，
同时结合 WCAG 2.0 标准。wakeApp 的中性色在落地的时候是按照透明度的方式实现的，

## 色板

```tsx
/**
 * inline: true
 */
import React from 'react';
import ColorWrapper from '@wakeapp/docs/docs/design/ColorWrapper';

export default () => {
  return <ColorWrapper />;
};
```

## 渐变

```tsx
/**
 * inline: true
 */
import React from 'react';

export default () => {
  return (
    <div>
      <div
        style={{
          width: 450,
          height: 70,
          borderRadius: 100,
          lineHeight: '70px',
          fontSize: '12px',
          textAlign: 'center',
          color: 'var(--gray-alpha-3)',
          background: 'linear-gradient(90deg, var(--secondary-color) 0%, var(--primary-color) 100%)',
        }}
      >
        linear-gradient(90deg, var(--secondary-color) 0%, var(--primary-color) 100%)
      </div>
    </div>
  );
};
```
