四角配色(矩形配色)查找器
根据HEX颜色和可调的配对间隔角度,构造两组HSL互补色,给出四个色值及其构造角度。
色相角度基于由sRGB得出的数字HSL。饱和度和明度保持不变,随后各通道取整为最接近的8位整数。
这里给出的是色相环上的关系,并不是颜料混合意义上的互补色,也不保证视觉亮度相同或满足无障碍对比度要求。
色度很低以及8位取整,可能使不同的色相位置得到相同的HEX色值。
| 序号 | HEX | 色相偏移(°) | 色相(°) | 饱和度(%) | 明度(%) |
|---|---|---|---|---|---|
| 1 | #FF0000 | 0 | 0 | 100 | 50 |
| 2 | #FFFF00 | 60 | 60 | 100 | 50 |
| 3 | #00FFFF | 180 | 180 | 100 | 50 |
| 4 | #0000FF | 240 | 240 | 100 | 50 |
四角配色的调色板包含两组互补色。选择两组起始色相之间的角度,就能在数字HSL色相环上构成一个矩形;选择90度则得到特殊的正方形排布。结果会以固定顺序列出基准色和相关颜色,可直接复制到数字设计中。它描述的是HSL几何关系,而不是颜料或印刷模型。
使用方法
- 输入不透明的三位或六位HEX颜色,可带或不带开头的#号。
- 在表单所示范围内选择角度,允许使用小数角度。
- 把HEX色值列表和色相偏移表放在一起看。
- 把得到的颜色放到实际的前景、背景和周围版面中测试。
计算公式
hues = (h, h + a, h + 180, h + 180 + a) mod 360
色相在360度处循环回绕。保持原sRGB颜色的饱和度和明度,再把每个新的RGB通道取整到0至255之间最接近的整数。基准HEX保持原样。
示例
红色#FF0000配合60度的配对间隔角度,得到#FF0000、#FFFF00、#00FFFF和#0000FF。红与青、黄与蓝是两组相对的互补色。选择90度则构成正方形四角配色。
常见问题
为什么灰色的结果全都一样?
无彩色的饱和度为0,没有定义的色相。旋转色相不会产生颜色,所以灰、黑、白会得到重复的条目。
这些颜色一定有良好的对比度吗?
不能保证。HSL明度相同并不意味着视觉亮度相同,色相差也无法决定文字的对比度。请单独检查具体的前景色和背景色组合。
为什么两个不同的角度会得到相同的色值?
HEX每个通道只有256个取值。色度很低或角度变化很小时,取整可能会把几个色相位置合并成一个。“不同颜色数”会把这种情况显示出来,而不是悄悄删掉调色板中的条目。
资料来源
最后更新:
包含这些输入的页面地址: https://kakao.mobile/zh/tools/tetradic-color-finder/
引用此工具
kakaoCalc. (2026, November 8). 四角配色(矩形配色)查找器. https://kakao.mobile/zh/tools/tetradic-color-finder/
“四角配色(矩形配色)查找器.” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/tetradic-color-finder/.