以下术语按字母顺序排列,涵盖了图片配色提取过程中涉及的色彩科学基础概念、算法原理和技术术语。理解这些术语将帮助您更好地使用图片配色提取器,并深入理解工具背后的色彩处理逻辑。
色彩空间(Color Space)
色彩空间是一种用于描述和表示颜色的数学模型,它定义了颜色的坐标系统和取值范围。常见的色彩空间包括RGB(基于红、绿、蓝三原色的加色模型)、HSL(基于色相、饱和度、亮度的感知模型)和CMYK(基于青、品红、黄、黑的减色模型,用于印刷)。图片配色提取器主要在RGB色彩空间中进行像素分析和颜色计算,同时支持HSL格式的输出,方便用户从不同维度理解和使用提取出的颜色。
中位切分法(Median Cut)
中位切分法是一种经典的颜色量化算法,由Paul Heckbert于1982年提出。该算法的核心思想是将图片中的所有像素按照颜色空间进行递归分割:首先将所有像素放入同一个桶中,然后找到像素颜色范围最大的通道(R/G/B),按照该通道的中位数将像素桶一分为二,不断递归直到桶的数量达到目标颜色数。每个桶的平均颜色即为提取的代表色。中位切分法在计算效率和提取质量之间取得了良好平衡,是图片配色提取器的核心算法。
颜色量化(Color Quantization)
颜色量化是将图片中数百万种可能的颜色减少为有限数量代表色的过程。一张24位真彩色图片最多可以包含约1677万种颜色(256 x 256 x 256),而人眼能够感知的颜色远少于这个数量。颜色量化算法通过智能地选择最具代表性的颜色来近似表示原始图片的色彩,图片配色提取器正是利用这一技术从图片中提取出用户指定数量的主色调。
Canvas API
Canvas API是HTML5提供的一套用于在网页上进行图形绘制的JavaScript接口。图片配色提取器使用Canvas API将上传的图片绘制到画布上,然后通过getImageData方法获取图片的像素数据(RGBA值),进而对每个像素的颜色进行分析和统计。Canvas API的像素级操作能力使得完全在浏览器端进行图片颜色分析成为可能,无需依赖服务器端的图像处理库。
HEX颜色格式
HEX(十六进制)颜色格式是网页设计中最常用的颜色表示方式,采用井号后跟六位十六进制数的形式,如#FF6B6B。前两位表示红色通道(00-FF),中间两位表示绿色通道(00-FF),最后两位表示蓝色通道(00-FF)。HEX格式可以直接用于CSS样式表中的颜色属性,是前端开发者最熟悉和常用的颜色表示方式。图片配色提取器提取的每个颜色都提供HEX格式输出。
RGB颜色格式
RGB(红绿蓝)颜色格式通过三个通道的数值(每个通道0-255)定义颜色,如rgb(255,107,107)。RGB模型基于加色原理,即不同比例的红、绿、蓝光混合可以产生各种颜色。当三个通道值相等时产生灰度色,值越大颜色越亮。RGB格式在设计软件(如Photoshop、Sketch、Figma)中使用广泛,是设计师进行颜色选取和调整时最常接触的格式。
HSL颜色格式
HSL(色相、饱和度、亮度)颜色格式从人类视觉感知的角度描述颜色,如hsl(0,80%,71%)。色相(Hue)用角度表示(0-360度),对应色轮上的位置;饱和度(Saturation)表示颜色的鲜艳程度(0%-100%);亮度(Lightness)表示颜色的明暗程度(0%-100%)。HSL格式的优势在于符合人类对色彩的直觉认知,调整单一通道即可实现颜色的变体(如加深、变浅、变鲜艳),在颜色微调和创建同色系变体时非常方便。
CSS自定义属性(CSS Variables)
CSS自定义属性(也称为CSS变量)是CSS3引入的一项特性,允许在样式表中定义可复用的值。格式为--变量名: 值,通过var(--变量名)函数引用。图片配色提取器的"复制CSS变量"功能会自动生成一组以--color-1、--color-2等命名的CSS自定义属性,用户粘贴到样式文件后即可在整个样式表中引用这些颜色变量。当需要修改主题颜色时,只需在变量定义处修改一次,所有引用该变量的地方都会自动更新。
主色调与辅助色
主色调是图片中占据面积最大或视觉权重最高的颜色,通常代表图片的整体色彩倾向。辅助色是图片中除主色调外的其他重要颜色,它们与主色调共同构成了图片的完整配色方案。图片配色提取器提取的颜色按照像素数量从多到少排列,排在前面的颜色通常为主色调,后面的颜色为辅助色。在设计应用中,主色调常用于大面积背景或主体元素,辅助色则用于点缀、强调或装饰。
UD5工具箱