IWIW
  • Guide
  • 布局
  • 前端架构
  • 特效
  • 组件
⌘ K
Light mode
组件
未读消息
黑胶播放器
数据录入
颜色拾取
树形组件
数据展示
轮播图
瀑布流
步骤条
图片预览
最后更新时间:
Copyright © 2026 | Powered by dumi
‌
‌
‌
‌

使用场景

拾取颜色。

代码演示

API

参数说明类型默认值
defaultValue颜色默认值,支持 RGB,HSB,HEX--
方法说明参数返回值
onChange颜色变化时的回调函数mode: 颜色模型(RGB/HSB/HEX), color: 颜色编码void

实现原理

使用的是<input type = "color"/>实现的

RGB、HSB、HEX 这三种颜色模型,它们的设计目的不同:RGB 是 “给机器用的显示标准”,HEX 是 “给代码用的 RGB 简化格式”,而 HSB 是 “给人用的视觉直觉模型”。因此,HSB 最能帮助人类理解颜色。

维度含义范围人类感知对应示例(以红色为例)
Hue(色相)颜色的 “种类”0°~360°红、黄、绿、蓝等 “基础色”0°= 纯红,60°= 黄,120°= 绿
Saturation颜色的 “纯度 / 鲜艳度”0%~100%鲜艳(100%)→ 灰暗(0%)100%= 纯红,50%= 淡红,0%= 灰
Brightness颜色的 “明暗程度”0%~100%明亮(100%)→ 黑暗(0%)100%= 亮红,50%= 暗红,0%= 黑
#128702