Color颜色主题

2024-06-19 00:12:34首发，3周前更新

本框架的颜色主要分三大类：主色系，通用色系，文本色系；通用色系和文本色系通常不会变，如果要修改网页的主题风格，主要是调整主色系；本框架通过_c-*来独立设置文本颜色，支持以上三大类颜色，特别的可使用_c-stage来使用网页背景色（白色）。

色系

框架颜色采用HSLA的色值模式。HSLA其中的H表示色轮度数（取值范围0~360），S表示饱和度（取值范围0%~100%），L为亮度（取值范围0%~100%），A为透明度（取值范围0~1），目前框架默认主色值为HSLA(210,100%,55%,1)。

本框架颜色主要划分为4类：

• 主色系：prim（任意颜色）
• 状态颜色系：error（红色，表示错误或失败），warn（黄色，表示警告或提醒），succ（绿色，表示正确或成功），info（蓝色，表示提示或告知），issue（橙色，表示问题或疑惑）
• 文本颜色系：text（常规是深灰色，dark模式为白色，表示标题或正文），brief（常规是中灰色，表示内容简介），caption（浅灰色，表示内容辅助），disable（类似caption浅灰色，表示禁用）
• 特殊色系：stage（主舞台body背景色，默认白色）,divide（分隔线颜色，带透明度，看上去像浅色边框色）

颜色模式

表达颜色的模式有很多种，传统的有RGB/RGBA和HEX(十六进制)，本框架使用HSLA模式。

HSLA其中的H表示色轮度数（取值范围0~360），S表示饱和度（取值范围0%~100%），L为亮度（取值范围0%~100%），A为透明度（取值范围0~1），目前框架默认主色值为HSLA(210,100%,55%,1)。

HSLA颜色模式的一个明显优点则是可以通过准确控制颜色通道轻松改变色系。

在css中，主色变量--_c-prim由以下几个值构成：

• --_h-prim:定义了主色色轮值，默认为210
• --_s-prim:定义了主色的饱和度，默认为100%
• --_l-prim:定义了主色的亮度，默认为55%
• --_a-prim:定义了主色透明度，默认为1

我们可以通过修改通道值改变颜色。

命名规则

一个色系需要表达多种意思自然需要多种配套颜色，配套颜色需要通过改变其颜色通道值来实现。我们对配套颜色命名规则如下：

• *-bg：表示浅色背景色，带透明度0.04左右（bg=background）
• *-bs：表示浅色背景色，不透明
• *-bd：表示浅色边框色（bd=border）
• *-fc：表示浅色焦点色（fc=focus）
• *-ht：表示中性半调色（ht=halftone）
• *-aj：表示相似色，色轮值+50（aj=adjacent）
• *-sg：表示深色但是有较高饱和度（sg=sunglass）
• *-dp：表示加深色（dp=deepen）
• *-gy：表示中灰色（gy=grey）
• *-dk：表示深灰色（dk=dark）
• *-ct：表示对比色，色轮值+180左右（ct=contrast）
• *-tp：表示透明色，透明度为0（tp=transparent）
• *-ac：表示亚克力色，带透明度0.08左右（ac=acylic）
• *-sd：表示阴影，带透明度0.2左右（sd=shadow）
• *-tl：表示半透明色，带透明度0.6左右（tl=translucent）
• *-fg：表示毛玻璃色，带透明度0.8左右（fg=frosted glass）

prim色包含了全套命名。

自定义按钮

我们已经了解色系和命名规则，借助以上prim色系中的所有颜色，可以自定义一组按钮。

text色系

无-gy、-dk和-sg后缀。

• --_h-text：正文色色轮值
• --_s-text：正文色饱和度
• --_l-text：正文色亮度
• --_a-text：正文色透明度
• --_c-text：正文色
• --_c-text-bg：正文色浅色背景色
• --_c-text-bs：正文色浅色背景色，不透明
• --_c-text-bd：正文色浅色边框色
• --_c-text-fc：正文色焦点色
• --_c-text-ht：正文色半调色
• --_c-text-lt：正文色变浅色
• --_c-text-dp：正文色加深色
• --_c-text-aj：正文色相似色
• --_c-text-ct：正文色对比色
• --_c-text-tp：正文色全透明色
• --_c-text-ac：正文色亚克力色
• --_c-text-sd：正文色阴影色
• --_c-text-tl：正文色半透明色
• --_c-text-fg：正文色毛玻璃色

brief色系

• --_c-brief：简介色，同--_c-text-aj
• --_c-brief-bg：简介色浅色背景色，同--_c-text-bg
• --_c-brief-bd：简介色浅色边框色，同--_c-brief
• --_c-brief-sd：简介色阴影色，同--_c-text-sd

caption色系

• --_c-caption：忽略色
• --_c-caption-bg：忽略色浅色背景色，比--_c-text-bg略深
• --_c-caption-bd：忽略色浅色边框色，同--_c-caption
• --_c-caption-sd：忽略色阴影色，比--_c-text-sd略浅

disable色系

• --_c-disable：禁止色
• --_c-disable-bg：禁止色浅色背景色，比--_c-text-bg略深
• --_c-disable-bd：禁止色浅色边框色，同--_c-disable
• --_c-disable-sd：禁止色阴影色，比--_c-text-sd略浅

succ色系

无-gy、-dk、-ct和-sg后缀。

• --h-succ：色轮值
• --s-succ：饱和度
• --l-succ：亮度
• --a-succ：透明度
• --_c-succ：
• --_c-succ-bg：浅色背景色
• --_c-succ-bs：浅色背景色，不透明
• --_c-succ-bd：浅色边框色
• --_c-succ-fc：焦点色
• --_c-succ-ht：半调色
• --_c-succ-lt：变浅色
• --_c-succ-dp：加深色
• --_c-succ-aj：相似色
• --_c-succ-tp：全透明色
• --_c-succ-ac：亚克力色
• --_c-succ-sd：阴影色
• --_c-succ-tl：半透明色
• --_c-succ-fg：毛玻璃色

error色系

无-gy、-dk、-ct和-sg后缀。

• --h-error：色轮值
• --s-error：饱和度
• --l-error：亮度
• --a-error：透明度
• --_c-error：
• --_c-error-bg：浅色背景色
• --_c-error-bs：浅色背景色，不透明
• --_c-error-bd：浅色边框色
• --_c-error-fc：焦点色
• --_c-error-ht：半调色
• --_c-error-lt：变浅色
• --_c-error-dp：加深色
• --_c-error-aj：相似色
• --_c-error-tp：全透明色
• --_c-error-ac：亚克力色
• --_c-error-sd：阴影色
• --_c-error-tl：半透明色
• --_c-error-fg：毛玻璃色

info色系

无-gy、-dk、-ct和-sg后缀。

• --h-info：色轮值
• --s-info：饱和度
• --l-info：亮度
• --a-info：透明度
• --_c-info：
• --_c-info-bg：浅色背景色
• --_c-info-bs：浅色背景色，不透明
• --_c-info-bd：浅色边框色
• --_c-info-fc：焦点色
• --_c-info-ht：半调色
• --_c-info-lt：变浅色
• --_c-info-dp：加深色
• --_c-info-aj：相似色
• --_c-info-tp：全透明色
• --_c-info-ac：亚克力色
• --_c-info-sd：阴影色
• --_c-info-tl：半透明色
• --_c-info-fg：毛玻璃色

warn色系

无-gy、-dk、-ct和-sg后缀。

• --h-warn：色轮值
• --s-warn：饱和度
• --l-warn：亮度
• --a-warn：透明度
• --_c-warn：
• --_c-warn-bg：浅色背景色
• --_c-warn-bs：浅色背景色，不透明
• --_c-warn-bd：浅色边框色
• --_c-warn-fc：焦点色
• --_c-warn-ht：半调色
• --_c-warn-lt：变浅色
• --_c-warn-dp：加深色
• --_c-warn-aj：相似色
• --_c-warn-tp：全透明色
• --_c-warn-ac：亚克力色
• --_c-warn-sd：阴影色
• --_c-warn-tl：半透明色
• --_c-warn-fg：毛玻璃色

issue色系

无-gy、-dk、-ct和-sg后缀。

• --h-issue：色轮值
• --s-issue：饱和度
• --l-issue：亮度
• --a-issue：透明度
• --_c-issue：
• --_c-issue-bg：浅色背景色
• --_c-issue-bs：浅色背景色，不透明
• --_c-issue-bd：浅色边框色
• --_c-issue-fc：焦点色
• --_c-issue-ht：半调色
• --_c-issue-lt：变浅色
• --_c-issue-dp：加深色
• --_c-issue-aj：相似色
• --_c-issue-tp：全透明色
• --_c-issue-ac：亚克力色
• --_c-issue-sd：阴影色
• --_c-issue-tl：半透明色
• --_c-issue-fg：毛玻璃色