Loading...
色彩理论入门
不要被标题吓到,色彩理论其实非常有趣,而我们的交互式色轮让这一切变得轻而易举。色彩理论帮助我们理解不同颜色是如何协同工作的——可以把它看作是挑选视觉上令人愉悦的颜色组合的“作弊码”。
![Color Wheel: Color Harmonies (Small) [en]](https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=3840&q=60&auto=format,compress)
色轮——可追溯至 Isaac Newton 的著作 Opticks ——将各种色相排列成一个圆形,直观地展示了原色、次色和三级色之间的关系。
在进行设计时,对于未经训练的眼睛来说,找到视觉上协调的颜色组合可能相当困难,而这正是色彩和谐(即色轮上的颜色组合)大显身手的地方。
使用色轮
那么,如何生成这些和谐的配色呢?使用上方这种 RGB 色轮会让操作变得异常简单——首先从下拉菜单中选择一种和谐模式。
点击并拖动鼠标到任一白色圆圈(或色彩画布上的任意位置)都会改变色相;越靠近中心,颜色的饱和度就越低。
在主色区域周围使用明度轮可以使所选颜色变亮或变暗;你也可以粘贴一个初始的十六进制颜色代码来生成和谐配色。
色彩和谐
色彩和谐是指通过色轮上颜色之间的关系而产生的两种或多种颜色的特别协调组合,也称为色彩和弦,它们在探索可能的调色板时非常有用,或可作为独立的配色方案使用。
互补色
在色轮上,彼此正对的颜色称为互补色。互补色对比度高,当与较中性的调色板搭配时,能作为极佳的强调色。
![Color Wheel: Complementary Colors (Small) [en]](https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=3840&q=60&auto=format,compress)
分裂互补色
分裂互补和谐由一个基色以及位于其互补色两侧的相邻两种颜色构成。分裂互补色方案对比度较低,更适合用于品牌调色板。
![Color Wheel: Split-Complementary Colors (Small) [en]](https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=3840&q=60&auto=format,compress)
类似色
类似色是通过选择与某一指定颜色直接相邻的颜色来创建的。在网页设计中,类似色方案非常常见,当与互补色搭配以形成对比时,能够提供极大的灵活性。
![Color Wheel: Analogous Colors (Small) [en]](https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=3840&q=60&auto=format,compress)
三色和谐
三色和谐由色轮上彼此等距的三种颜色构成。与互补色类似,三色方案通常非常鲜明,对比度高,且在某一颜色占主导时效果最佳。
![Color Wheel: Triadic Colors (Small) [en]](https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=3840&q=60&auto=format,compress)
四色和谐
四色和谐由两组互补色构成,这两组颜色在色轮上相隔 60°。四色方案是创建调色板的绝佳起点;你可以通过调整颜色的阴影、色调和亮度进行微调。
![Color Wheel: Tetradic Colors (Small) [en]](https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=3840&q=60&auto=format,compress)
方形配色
类似于四色和谐,方形配色由四种颜色组成,并且在色轮上彼此等距排列。同样,方形和谐是构建品牌或网站调色板的绝佳起点。
![Color Wheel: Square Colors (Small) [en]](https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=3840&q=60&auto=format,compress)
颜色的阴影、色调和色相
颜色的阴影、色调和色相分别是通过向指定颜色中加入黑色、白色和灰色而产生的。它们在网页设计中对于背景和排版非常有用,且常常与互补色搭配以形成对比。
![Color Wheel: Color Shades, Tints and Tones (Small) [en]](https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=3840&q=60&auto=format,compress)
颜色阴影
向一种颜色中添加不同程度的黑色会逐渐产生更深的变体,即“阴影”。阴影适用于链接悬停效果或作为页眉和页脚的背景。
颜色色调
向颜色中添加白色会产生逐渐变浅的版本,即“色调”。色调同样适用于 CSS 悬停效果,并且作为模态框背景时效果理想。
颜色色相
向颜色中添加灰色会生成色相,根据灰色添加的程度,几乎可以得到无限种颜色变化。虽然在网页设计中较为少见,但色相可用于评论、引用或高亮等排版元素。
原色、次色和三级色
色轮由 12 种不同的颜色构成,随后分为以下三个组:原色(3种)、次色(3种)和三级色(6种)。
![Color Wheel: Primary, Secondary and Tertiary Colors (Small) [en]](https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=3840&q=60&auto=format,compress)
原色:红色、黄色和蓝色。这些是色轮的基础色,每一种其他颜色都至少包含一种原色。
次色:橙色、绿色和紫色。次色是由两种原色混合而成(例如红色和黄色混合生成橙色)。
三级色:朱砂红(红橙色)、琥珀色(黄橙色)、黄绿色、蓝绿色、蓝紫色和红紫色。三级色是由原色与次色混合而成。
创建你的配色方案
凭借色轮的强大功能,创建你自己的调色板比从零开始要容易得多。但如果你仍然感到无从下手,也许我们的其他工具能够帮你一臂之力。