| 分类范畴 | 详细说明与概念解释 |
|---|---|
| 色彩模型 (Color Models) | RGB: 红、绿、蓝 – 屏幕显示所用的加色模型。 HEX: 十六进制颜色代码，例如 #FFFFFF。 HSL: 色相、饱和度、亮度 – 非常适合人眼直观调整色彩。 HSV: 色相、饱和度、明度 – 类似于 HSL，但亮度处理逻辑不同。 |
| 色彩术语 (Color Terminology) | 饱和度 (Saturation): 颜色的鲜艳度或纯度。 色相 (Hue): 颜色的类型（如红色、蓝色）。 亮度 (Lightness): 颜色的明暗程度。 不透明度 (Opacity): 颜色的透明度级别，在 RGBA 中定义为 Alpha 通道。 |
| 颜色表示格式 (Formats) | HEX: #RRGGBB 或 #RRGGBBAA (含透明度)。RGB: rgb(255, 255, 255) RGBA: rgba(255, 255, 255, 0.5) HSL: hsl(120, 100%, 50%) HSLA: hsla(120, 100%, 50%, 0.5) |
| 框架/技术 | 颜色表示法 / 语法示例 | 详细描述 | 官方文档链接 |
|---|---|---|---|
| CSS | color: red; color: #ff0000; color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.5); color: hsl(0, 100%, 50%); color: hsla(0, 100%, 50%, 0.5); |
标准 CSS 颜色属性与表现格式。 | CSS 颜色官方文档 |
| SASS/SCSS | $color: #ff0000; color: $color; |
颜色变量定义，可以使用与 CSS 相同的格式。 | SASS 颜色文档 |
| Tailwind CSS | class="bg-red-500" class="text-green-300" |
带有预定义颜色深浅梯度的原子类。 | Tailwind CSS 颜色指南 |
| Bootstrap | class="text-primary" class="bg-success" |
用于快速设置样式的语义化颜色类。 | Bootstrap 颜色文档 |
| Material UI | style={{ color: 'primary' }} 或主题调色板 |
使用主题调色板，亦可使用特定颜色代码覆盖。 | Material UI 颜色指南 |
Select a color to see its details
background: linear-gradient(to right, #ff7e5f, #8000ff);
| 参数 | 含义说明 | 示例代码 |
|---|---|---|
| to right | 渐变方向从左至右 | linear-gradient(to right, #ff7e5f, #feb47b) |
| to left | 渐变方向从右至左 | linear-gradient(to left, #ff7e5f, #feb47b) |
| to bottom | 渐变方向从上至下 | linear-gradient(to bottom, #ff7e5f, #feb47b) |
| to top | 渐变方向从下至上 | linear-gradient(to top, #ff7e5f, #feb47b) |
| deg | 指定渐变角度（单位：度） | linear-gradient(45deg, ...) |