Color Palette Generator

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Pick a base color above and select a harmony mode to generate your palette.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Color Palette Generator

由一种基础色生成互补、邻近、三分、四分、分裂互补和单色配色方案。

How it works

基础十六进制色会被转换为 HSL，方案通过旋转色相、保持饱和度和亮度不变而生成。互补旋转 180°，邻近取 ±30°，三分取 120° 和 240°，四分取 90°、180° 和 270°，分裂互补取 150° 和 210°——即互补色两侧的两个色相，它能带来互补配对的对比感，却没有那份刺目。单色是例外：它保持色相和饱和度不变，让亮度沿 20%、35%、50%、65% 和 80% 的固定阶梯变化。

When to use it

  • 由单一品牌色推导出第一组强调色和辅助色
  • 用互补或分裂互补模式，找出一个能在你已经定下的背景上跳出来的颜色
  • 为表面、悬停和边框色阶生成五级单色梯度
  • 在花时间手工微调配色之前，先快速探索各种备选方案

Watch out for

  • HSL 中的色相旋转在感知上并不均匀。从亮黄出发旋转 120°，在名义饱和度和亮度相同的情况下会落到一个暗得多的颜色上，因此三分配色常常需要手工修正亮度。
  • 一套配色完全说明不了可读性。请把你打算使用的每一组文字与背景搭配都放进对比度检查器——和谐的颜色经常达不到 4.5:1。
  • 单色模式会丢弃基础色的亮度。它用固定阶梯取而代之，因此你输入的那个颜色可能并不出现在它自己的配色中。
  • 基础色只接受 6 位和 3 位的十六进制；rgb()、hsl() 和颜色名称都不接受。

Frequently Asked Questions

什么是互补配色方案？

互补色在色轮上正好相对（相隔 180°）。它们能形成最大对比和视觉振动。例如：蓝色（#0000FF）和橙色（#FF8000）。适合用在需要从背景中跳出来的行动号召按钮上。

什么是邻近配色方案？

邻近色在色轮上彼此相邻（±30°）。它们和谐且低对比——非常适合背景、渐变和需要平静感的界面。蓝—青—绿的组合就是邻近配色，常见于健康与养生类品牌。

如何从一套配色中生成无障碍的颜色搭配？

生成配色之后，用 WCAG 对比度检查工具逐一检查每一组前景/背景搭配。要符合 AA，正文的对比度至少要达到 4.5:1——许多生成的配色需要调整亮度才能通过。

How to Use Color Palette Generator

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.