术语表:核心概念详解
理解以下术语将帮助您更好地使用在线颜色混合器,并深入掌握CSS渐变和色彩处理技术。这些术语涵盖了色彩理论、CSS技术、设计工具等多个方面。
色彩基础术语
- HEX
-
十六进制颜色码,使用6位十六进制数字表示颜色。前两位表示红色,中间两位表示绿色,最后两位表示蓝色。例如#FF5733表示红色分量为255,绿色分量为87,蓝色分量为51。
示例:#3498db(蓝色)、#e74c3c(红色)
- RGB
-
红绿蓝颜色模型,使用三个0-255的数值表示颜色。这是数字设备中最常用的颜色表示方式,每个颜色通道有256个级别,可组合出约1677万种颜色。
示例:rgb(52, 152, 219)、rgb(231, 76, 60)
- HSL
-
色相、饱和度、亮度颜色模型。色相(Hue)表示颜色类型(0-360度),饱和度(Saturation)表示颜色纯度(0%-100%),亮度(Lightness)表示明暗程度(0%-100%)。
示例:hsl(204, 70%, 53%)、hsl(6, 78%, 57%)
- 色相
-
颜色的基本属性,表示颜色的类型。在HSL模型中,色相用0-360度表示,0度为红色,120度为绿色,240度为蓝色。色相环是色相的可视化表示。
应用:在颜色选择器中,色相通常用圆形色轮表示。
- 饱和度
-
颜色的纯度或鲜艳程度。高饱和度颜色鲜艳明亮,低饱和度颜色趋向灰色。在HSL模型中,饱和度用百分比表示,0%为完全无彩色,100%为最鲜艳的颜色。
应用:调节饱和度可以创建柔和或强烈的视觉效果。
- 亮度
-
颜色的明暗程度。在HSL模型中,亮度用百分比表示,0%为黑色,100%为白色,50%为正常亮度。调节亮度可以创建从深色到浅色的颜色变化。
应用:亮度调节常用于创建颜色层次和深度感。
CSS渐变术语
- linear-gradient
-
CSS线性渐变函数,创建沿直线方向的颜色渐变。可以指定渐变方向(角度)和多个颜色停止点。是网页设计中最常用的渐变类型。
语法:linear-gradient(方向, 颜色1, 颜色2, ...)
- radial-gradient
-
CSS径向渐变函数,创建从中心向外扩散的圆形或椭圆形渐变。可以指定形状、大小和位置。适合创建球体、光晕等效果。
语法:radial-gradient(形状 大小 位置, 颜色1, 颜色2, ...)
- 颜色停止点
-
渐变中的颜色变化点。每个停止点包含颜色值和位置(可选)。位置可以用百分比或长度单位指定,控制颜色过渡的节奏。
示例:linear-gradient(to right, red 0%, blue 50%, green 100%)
- 渐变中点
-
两个颜色停止点之间的过渡中心点。默认中点是50%,调整中点可以改变颜色过渡的速率,创造更自然或更戏剧性的效果。
应用:通过调整中点,可以控制渐变的视觉重心。
- 重复渐变
-
repeating-linear-gradient和repeating-radial-gradient函数,创建重复的渐变图案。适合创建条纹、网格等重复纹理效果。
应用:创建背景条纹、装饰图案等。
混合模式术语
- 混合模式
-
定义两个图层或颜色如何相互作用的算法。不同的混合模式产生不同的视觉效果,如变暗、变亮、增强对比等。混合模式是数字图像处理和设计的核心概念。
常见模式:Normal、Multiply、Screen、Overlay等
- 正片叠底
-
Multiply混合模式,将两个颜色值相乘,产生更暗的结果。黑色保持黑色,白色保持原色。模拟颜料混合效果,适合创建阴影和深度感。
公式:结果色 = (底色 x 绘图色) / 255
- 滤色
-
Screen混合模式,将两个颜色的补色相乘,产生更亮的结果。白色保持白色,黑色保持原色。模拟光线叠加效果,适合创建发光和高光效果。
公式:结果色 = 255 - (255 - 底色) x (255 - 绘图色) / 255
- 叠加
-
Overlay混合模式,结合正片叠底和滤色,根据底层颜色选择混合方式。底层颜色暗于50%时使用正片叠底,亮于50%时使用滤色。增强对比度,适合创建丰富的纹理效果。
应用:增强背景纹理和细节。
- 颜色减淡
-
Color Dodge混合模式,通过降低对比度使颜色变亮。产生强烈的发光效果,适合创建戏剧性的视觉效果和高光。与滤色类似但效果更强烈。
应用:创建霓虹灯、光晕等特殊效果。
- 颜色加深
-
Color Burn混合模式,通过增加对比度使颜色变暗。产生强烈的阴影效果,适合创建深色纹理和戏剧性对比。与正片叠底类似但效果更强烈。
应用:创建深色阴影和强烈对比效果。
设计工具术语
- 色轮
-
颜色的圆形排列,展示色相之间的关系。色轮是色彩理论的基础工具,帮助理解互补色、类似色、三色组等配色方案。通常包含12-24种颜色。
应用:在颜色选择器中,色轮帮助用户直观选择颜色。
- 配色方案
-
一组协调的颜色组合,基于色彩理论规则创建。常见的配色方案包括互补色、类似色、三色组、分裂互补等。好的配色方案能创造和谐的视觉效果。
应用:在品牌设计和界面设计中建立统一的色彩体系。
- 色彩对比度
-
两种颜色之间的视觉差异程度。高对比度提高可读性,低对比度创造柔和效果。WCAG标准要求文本与背景的对比度至少为4.5:1(普通文本)。
应用:确保界面元素的可访问性和可读性。
- 色彩温度
-
颜色给人的冷暖感觉。红色、橙色、黄色为暖色,蓝色、绿色、紫色为冷色。色彩温度影响情感表达和空间感知,暖色给人活力,冷色给人平静。
应用:在设计中传达不同的情感和氛围。
- 色彩和谐
-
颜色组合给人的舒适、协调感觉。和谐的配色基于色彩理论规则,如互补色、类似色等。色彩和谐是设计质量的重要指标,影响用户体验和情感反应。
应用:创建视觉舒适、专业感强的设计作品。
技术实现术语
- Canvas
-
HTML5 Canvas元素,提供JavaScript绘图API。在颜色混合器中,Canvas用于实时渲染渐变效果,提供高性能的图形处理能力。
应用:实时预览渐变效果和颜色混合。
- WebGL
-
Web Graphics Library,基于OpenGL的JavaScript API,提供硬件加速的3D图形渲染。在高级颜色工具中,WebGL可用于创建复杂的视觉效果。
应用:创建3D颜色空间可视化和高级特效。
- 色彩空间
-
颜色的数学表示模型,如RGB、HSL、CMYK等。不同色彩空间适用于不同场景,RGB用于屏幕显示,CMYK用于印刷。色彩空间转换是颜色处理的核心技术。
应用:在不同设备和媒介间准确传递颜色信息。
- 色彩配置文件
-
ICC配置文件,定义设备的色彩特性。确保颜色在不同设备上的一致性。常见的配置文件包括sRGB、Adobe RGB、ProPhoto RGB等。
应用:在专业设计流程中确保颜色准确性。
UD5工具箱