配色方案与调色板

成套配色系统、数据可视化色板与配色灵感

合集导语

配色最难的不是「挑一个好看的颜色」，而是「让一组颜色在一起有秩序、可访问、能扩展」。成套的配色系统（Radix、Tailwind、Open Color）解决的是这个问题：每个色相提供 9-12 个色阶，明暗过渡经过校准，直接取用就能撑起一个界面。数据可视化则另有讲究——分类色要能区分、色盲用户也能分辨，这正是 ColorBrewer 这类学术工具的价值。

怎么选

• 做产品界面：Radix Colors（每色 12 阶，语义清晰）或 Tailwind 调色板
• 做数据图表 / 地图：ColorBrewer（色盲友好、学术标准）
• 要现代感知均匀配色：oklch.com（亮度一致的调色体验）
• 找灵感：Color Hunt 与 Huemint（后者可用 AI 生成配色）

全部来源

Radix Colors

为界面设计的 12 阶色板，每一阶都有明确用途（背景/边框/悬浮/实心/文字），还提供深色模式对应值，是产品配色最省心的方案。

授权：MIT · 来源：github.com/radix-ui/colors · 访问 ↗

Open Color

13 个色相 × 10 个色阶，克制耐看，适合不想引入复杂体系的中小项目，直接复制 HEX 就能用。

授权：MIT · 来源：github.com/yeun/open-color · 访问 ↗

ColorBrewer

数据可视化的学术标准色板，明确标注是否色盲友好、是否适合打印、适合分类还是渐变，做图表时优先考虑。

授权：Apache-2.0 · 来源：github.com/axismaps/colorbrewer · 访问 ↗

OKLCH Color Picker

基于 OKLCH 色彩空间选色，调亮度时不会像 HSL 那样让颜色「变脏」，适合做现代 CSS 配色。

授权：MIT · 来源：github.com/evilmartians/oklch-picker · 访问 ↗

Tailwind 调色板

22 个色相各 11 阶，命名体系（50-950）已经被大量项目接受，即使不用 Tailwind 也可以直接抄数值。

授权：MIT · 来源：github.com/tailwindlabs/tailwindcss · 访问 ↗

UI Colors

输入一个品牌色，自动生成 50-900 全套色阶，还能直接看按钮/卡片的实际效果，快速定主色时很好用。

授权：免费使用（站点闭源） · 来源：uicolors.app · 访问 ↗

Color Hunt

四色配色灵感库，按热门/最新排序，适合做海报、Banner 时找组合；注意它是灵感参考而非授权素材库。

授权：免费浏览（配色可参考） · 来源：colorhunt.co · 访问 ↗

Huemint

用 ML 生成品牌配色，可以直接套在网页布局预览里看效果，适合快速探索不同配色方向。

授权：免费使用（站点闭源） · 来源：huemint.com · 访问 ↗

本站只做整理与外链，不镜像、不托管任何第三方素材。每条资源标注来源站点与授权方式，使用前请以原站授权条款为准。

← 返回资源库