Irodori彩り

调色板编辑器

从一个基色生成、锁定、排序并导出调色板，全部在浏览器本地完成。

和谐模式
浅葱
藍
群青
紅
สีทอง

点 HEX 复制 · 拖动色条可重排 · 锁定的颜色在重新生成时保持不变。

颜色详情

#191ADD

最接近的传统色 群青
RGBrgb(25, 26, 221)
HSLhsl(240 80% 48%)
OKLCH—
对比白底—
对比黑底—

导出

把色板复制为 CSS 变量、Tailwind 主题键或 JSON。

CSS 
:root {
  --palette-1: #16C2C1;
  --palette-2: #104E8B;
  --palette-3: #191ADD;
  --palette-4: #E83838;
  --palette-5: #B0AF14;
}
Tailwind 
theme: {
  extend: {
    colors: {
      palette: {
        100: '#16C2C1',
        200: '#104E8B',
        300: '#191ADD',
        400: '#E83838',
        500: '#B0AF14',
      },
    },
  },
}
JSON 
[
  "#16C2C1",
  "#104E8B",
  "#191ADD",
  "#E83838",
  "#B0AF14"
]
Figma 
{
  "palette": {
    "100": {
      "$type": "color",
      "$value": "#16C2C1"
    },
    "200": {
      "$type": "color",
      "$value": "#104E8B"
    },
    "300": {
      "$type": "color",
      "$value": "#191ADD"
    },
    "400": {
      "$type": "color",
      "$value": "#E83838"
    },
    "500": {
      "$type": "color",
      "$value": "#B0AF14"
    }
  }
}
SVG 
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="144" viewBox="0 0 600 144">
  <rect x="0" y="0" width="120" height="120" fill="#16C2C1"/>
  <rect x="120" y="0" width="120" height="120" fill="#104E8B"/>
  <rect x="240" y="0" width="120" height="120" fill="#191ADD"/>
  <rect x="360" y="0" width="120" height="120" fill="#E83838"/>
  <rect x="480" y="0" width="120" height="120" fill="#B0AF14"/>
  <text x="60" y="137" font-family="monospace" font-size="11" text-anchor="middle" fill="#444">#16C2C1</text>
  <text x="180" y="137" font-family="monospace" font-size="11" text-anchor="middle" fill="#444">#104E8B</text>
  <text x="300" y="137" font-family="monospace" font-size="11" text-anchor="middle" fill="#444">#191ADD</text>
  <text x="420" y="137" font-family="monospace" font-size="11" text-anchor="middle" fill="#444">#E83838</text>
  <text x="540" y="137" font-family="monospace" font-size="11" text-anchor="middle" fill="#444">#B0AF14</text>
</svg>

Figma Variables 可导入 DTCG 格式的 JSON；SVG 是可直接拖入设计文件的独立色卡。

使用方法

  1. 选一个起始色输入 HEX，或点「随机」换一个。
  2. 生成和谐色板选择和谐规则后点「生成」，已锁定的色条不会被改动。
  3. 导出复制 CSS 变量、Tailwind 键或 JSON，也可以保存为 PNG。

常见问题

什么是调色板生成器？
从一个起始色出发，按类似色、互补色、三角色等和谐规则，生成一组彼此协调的颜色。
这些和谐模式分别是什么意思？
类似色取色轮相邻的颜色，互补色取正对面，三角色与四角色把色相均匀分布，单色只改变明度。
重新生成时能保留部分颜色吗？
可以。用锁按钮锁定某条色带，生成时会原样保留。
怎么导出色板？
「导出」区块提供 CSS 变量、Tailwind 主题键和 JSON；「保存 PNG」把色条渲染成图片。