色彩空间

色彩空间是什么

色彩空间是一个配色方案数据库，主打色彩组合的检索与调用。数据来源为人工筛选的精选配色集。

每条配色记录带十六进制色值、RGB数值。色块可单独提取。

页面按色相、明度、饱和度做分类归档。一般情况，一个色系下的方案数量在几十到上百条之间。

色彩空间主要功能

• 配色方案检索：按色相、明度、饱和度三个维度筛选，输入目标色值后返回相近方案，输出为色块列表加色值文本。
• 色值提取：从任意配色方案中单独取出某个色块的HEX、RGB、HSL三种格式，直接复制到剪贴板，单次提取1个色值。
• 色系分类浏览：按红、橙、黄、绿、蓝、紫、中性色等色系归档，每个色系下按明度从高到低排列，单页展示20-40条方案。
• 配色预览：将选中方案应用到模拟界面模板上，模板设有卡片、按钮、背景三种元素，用来做快速视觉验证。
• 色值转换：HEX、RGB、HSL三种格式互转，输入任一格式输出另外两种，精度保留到整数位。
• 方案收藏：将选中的配色方案存入本地列表，单次最多收藏200条，数据存在浏览器localStorage中。

这里有个细节：色值转换的精度是整数级，不做小数点后保留。

色彩空间使用要求

浏览器需支持CSS Grid和localStorage。Chrome 80以上、Firefox 75以上、Safari 13以上可正常使用。

收藏数据存在本地。清理浏览器缓存会丢失收藏记录。

配色预览的模板渲染依赖Canvas。禁用Canvas的浏览器环境下预览功能不可用。

色彩空间核心优势

分类粒度细。色相分类下再按明度和饱和度二级切分，检索路径比单一色相列表短。

色值输出直接。每条方案直接给出HEX、RGB、HSL三种格式，不用二次转换。实际使用时会有差异——部分老方案只带HEX值。

色彩空间如何使用

在检索框输入目标色值，选HEX或RGB格式。系统返回相近配色方案列表。

点选任意色块，弹出该色值的三种格式。点复制按钮写入剪贴板。

切换色系标签浏览分类结果。每个色系下按明度排序。

选中方案后点预览，进入模拟界面查看效果。模板可在卡片、按钮、背景之间切换。

点收藏按钮存入本地列表。收藏列表在页面侧栏可查看。

色彩空间同类竞品对比

色彩空间应用场景

UI设计阶段做配色选型。从色系分类里找基础色调，再用预览功能验证在按钮和卡片上的效果。

前端开发时提取色值。选中方案后直接复制HEX或RGB，

首页截图