Happy Hues 提供 14 种调色盘组合，以範例网站展示配色效果

温馨提示：这篇文章已超过535天没有更新，请注意相关的内容是否还可用！

如果你和我一样不擅于配色，推荐可以从网站配色工具去寻找调色盘灵感，之前介绍过 Colorinspire 就是我很喜欢的色彩组合（可惜目前已经无法使用），其他像是 Veranda Colors、Adobe Color 也很有用，相较于随机产生的颜色代码来说我更倾向其他设计师精挑细选后的调色盘颜色，这有助于快速预览、将颜色带入专案计画，例如网页或简报设计，不过大多数配色工具只会给出颜色和色码，有没有教我们如何运用色彩的网站呢？

本文要介绍的「Happy Hues」是一个很有用的配色教程网站，收录 14 种调色盘组合，不同的是 Happy Hues 会在实际网站上示範套用颜色的效果，包括在不同区块、页面类型、排版或是功能上如何正确使用色彩，就能让整体效果看起来更一致、也更适合使用者浏览和阅读。

Happy Hues 会在每个区块下方显示各个部分用到的颜色，例如背景、标题、文字、按钮和按钮文字颜色，也有用到的插图、图示、资讯卡、电子报配色组合，事实上这些颜色更像是一个组合，看起来是独立个体但又能够配合得恰到好处，同时在 Happy Hues 网页内介绍各种颜色相关的术语、色彩心理学（不同颜色的特性、适合使用在那些类型的专案）。

网站开发者 Mackenzie Child 表示他喜欢建立各种有用、有趣甚至有点愚蠢的专案，Happy Hues 用意是试着消除使用者在遇到自己喜欢的调色盘、但不确定如何将它应用到设计或插图中的问题，这个网站不仅仅是提供色彩相关灵感，更重要的是直接把颜色套用到示例网站，真正示範要如何在专案中正确使用颜色。

Happy Hues
https://www.happyhues.co/

使用教程

STEP 1

开启 Happy Hues 会看到左边有一排调色盘，点选快速套用、带入右侧示例网页，右上角有两个选项包括有开关调色盘、显示各个区块颜色的功能。

STEP 2

虽然 Happy Hues 只有提供 14 个调色盘，看得出来都是精挑细选，无论是浅色或深色一应俱全，使用方式也很简单，直接点选调色盘的颜色就会快速套用在右侧示例网页（就连插图的颜色也会更新）。

STEP 3

从右上角点选「Toggle paletters」开启、关闭左侧调色盘，点选「Toggle section colors」会开启、关闭每个区块下方的颜色说明，建议选好配色后就先将左侧调色盘隐藏，这样示範网页就会显示于浏览器中间。

STEP 4

依照不同的内容类型 Happy Hues 会带入各种颜色，例如在最上方可做为首页的示例就有明确标示出背景、标题、小标题、按钮、按钮文字颜色，插图有外框、主色系、高亮色、第二和第三种颜色，点选每个颜色会自动将色彩代码复制到剪贴簿，最重要的是使用者也能依照 Happy Hues 提供的配色方式去设计自己的专案。