HSL 色环是什么

色环（Color Wheel）把光谱上的颜色按环形排列：红色在一个位置，顺着圆环依次经过橙、黄、绿、青、蓝、紫，最后回到红。它把抽象的「颜色关系」变成了一张能直接看、直接点的圆盘。这个工具用 HSL 模型画色环：角度代表色相（Hue），从圆心向外半径越长饱和度（Saturation）越高，圆心附近接近灰白。

三个配色概念

  • 互补色：色环上正对面的两个颜色（相差 180°），对比最强烈，适合做强调色、撞色设计；
  • 邻近色：色相环上相邻约 30° 内的颜色，比如红和橙红，放一起很和谐、不刺眼；
  • 类似色：在邻近色基础上放宽一点（约 15°~45°），既有变化又保持统一感，是最常用的配色套路。

怎么用

在左边的色环上点击你想要的位置：越靠外圈颜色越鲜艳，越靠近圆心越偏灰白。点中后右侧主色块会立刻变成你选的颜色，下面同时给出 HEX、RGB、HSL 三种色值，点任意一个色块即可复制到剪贴板。再往下是自动生成的互补色和类似色排，点哪个色块就复制哪个颜色的 HEX 值。

常见问题

HEX 和 RGB 有什么区别？只是同一种颜色的两种写法，HEX 用在网页 CSS 里最方便，RGB 常用在设计软件里。我点出来的颜色想在 PS 里用怎么办？复制对应的 HSL 或 RGB 数值填进去即可。这个工具收费吗？完全免费，所有取色和配色计算都在你的浏览器本地完成。