Color 颜色
文字颜色
本框架一共定义了11中文字颜色，分别是ax-color-primary，ax-color-secondary，ax-color-success，ax-color-danger，ax-color-warning，ax-color-info，ax-color-ad，ax-color-title，ax-color-des，ax-color-ignore，ax-color-white。详细说明和举例如下：
ax-color-primary首要主色
ax-color-secondary辅助色
ax-color-success操作成功
ax-color-danger危险警告
ax-color-warning注意安全
ax-color-info您有新消息
ax-color-ad这是一条广告
ax-color-title文章标题
ax-color-des文章简介或者描述
ax-color-ignore可忽略的无关紧要的
ax-color-white黑底白字
<p class="ax-color-primary">ax-color-primary首要主色</p>
<p class="ax-color-secondary">ax-color-secondary辅助色</p>
<p class="ax-color-success">ax-color-success操作成功</p>
<p class="ax-color-danger">ax-color-danger危险警告</p>
<p class="ax-color-warning">ax-color-warning注意安全</p>
<p class="ax-color-info">ax-color-info您有新消息</p>
<p class="ax-color-ad">ax-color-ad这是一条广告</p>
<p class="ax-color-title">ax-color-title文章标题</p>
<p class="ax-color-des">ax-color-des文章简介或者描述</p>
<p class="ax-color-ignore">ax-color-ignore可忽略的无关紧要的</p>
<p class="ax-color-white">ax-color-white黑底白字</p>
颜色区间对比
针对每一个常用颜色，需要充分定义好与之完美搭配的颜色，为了方便颜色扩展本框架举例了1个相似色，6个渐变色，1个边框色，1个背景色。注意：颜色模式中HSV等同于Photoshop中的HSB模式。
#198cff
RGB色值：rgb(25,140,255)
HSV色值：hsv(210,90,100)
#475b66
RGB色值：rgb(71,91,102)
HSV色值：hsv(201,30,40)
#ff8400
RGB色值：rgb(255,132,0)
HSV色值：hsv(31,100,100)
#333333
RGB色值：rgb(51,51,51)
HSV色值：hsv(0,0,20)
#41a358
RGB色值：rgb(65,163,88)
HSV色值：hsv(134,60,64)
#dc3545
RGB色值：rgb(220,53,69)
HSV色值：hsv(354,76,86)
#ffc107
RGB色值：rgb(255,193,7)
HSV色值：hsv(45,97,100)
#14ccc9
RGB色值：rgb(20,204,201)
HSV色值：hsv(179,90,80)
应用一：使用相似色可以创建有格调的渐变按钮。
应用二：使用渐变色可以风格统一的图表。
颜色组合对比
#198cff
#0b72da
#6dacea
#d7e7f5
#f0f7ff
#475b66
#383e42
#adc1cc
#dfe3e5
#f5f8fa
#ff8400
#c2690a
#ccbdad
#f5e7d7
#fff5eb
#333333
#000000
#cccccc
#ebebeb
#f5f5f5
#41a358
#3b7649
#adccb5
#e1f0e5
#edfaf0
#dc3545
#b22c39
#ccadb0
#f0dddf
#fff0f1
#ffc107
#b22c39
#ccc4ad
#f5edd7
#c8990b
#14ccc9
#189593
#adcccb
#cef0f0
#ebfaf9
背景色对比
同文字颜色一致，本框架一共定义了11中背景颜色，分别是ax-bg-primary，ax-bg-secondary，ax-bg-success，ax-bg-danger，ax-bg-warning，ax-bg-info，ax-bg-ad，ax-bg-title，ax-bg-des，ax-bg-ignore，ax-bg-white；如果需要使用浅色，则使用ax-bglit-*表示。详细说明和举例如下：
ax-bg-primary首要主色
#198cff
ax-bglit-primary浅色
#f0f7ff
ax-bg-secondary辅助色
#475b66
ax-bglit-secondary浅色
#f5f8fa
ax-bg-success操作成功
#41a358
ax-bglit-success浅色
#edfaf0
ax-bg-danger危险警告
#dc3545
ax-bglit-danger浅色
#fff0f1
ax-bg-warning注意安全
#ffc107
ax-bglit-warning浅色
#fffaeb
ax-bg-info您有新消息
#14ccc9
ax-bglit-info浅色
#ebfaf9
ax-bg-ad这是一条广告
#ff8400
ax-bglit-ad浅色
#fff5eb
ax-bg-des文章简介或者描述
#666666
ax-bg-ignore忽略或禁止
#b3b3b3
ax-bg-white白底黑字
#ffffff
主色表
| 中文名称 | 英文名称 | 颜色值 | 演示 | 用途 |
操作
|
|---|---|---|---|---|---|
| 首要主色 | primary | #198cff | ● | 增强，突出，主题 | |
| 辅助色 | secondary | #475b66 | ● | 辅助，配合，解释，描述 | |
| 操作成功 | success | #41a358 | ● | 成功，顺利 | |
| 危险警告 | danger | #dc3545 | ● | 危险，注意，错误，删除 | |
| 提醒注意 | warning | #ffc107 | ● | 提示，注意，通知 | |
| 信息 | info | #14ccc9 | ● | 新的，动态的，活跃的 | |
| 广告 | ad | #ff8400 | ● | 广告，推送 | |
| 标题 | title | #333333 | ● | 正文，标题，严肃 | |
| 简介 | des | #666666 | ● | 简介，描述，提示 | |
| 忽略 | ignore | #b3b3b3 | ● | 可忽略，无关紧要，提示 | |
| 白色 | white | #fff | ● | 深色底 |