中间色计算器

计算两种颜色之间的过渡色，生成平滑颜色序列

起始颜色

#FF0000

结束颜色

#0000FF

共生成 5 个颜色（包含起始和结束颜色）

渐变预览

颜色列表

起始
#FF0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)
#1
#BF0040
rgb(191, 0, 64)
hsl(340, 100%, 37%)
#2
#800080
rgb(128, 0, 128)
hsl(300, 100%, 25%)
#3
#4000BF
rgb(64, 0, 191)
hsl(260, 100%, 37%)
结束
#0000FF
rgb(0, 0, 255)
hsl(240, 100%, 50%)
CSS 渐变代码
background: linear-gradient(to right, #FF0000, #BF0040, #800080, #4000BF, #0000FF);

更多推荐

颜色选择器
颜色格式转换器
配色方案生成器
色盲模拟器
品牌颜色查询
Pantone 色卡查询
CSS 颜色变量生成器
Material Design 配色生成器
屏幕颜色拾取
颜色混合器
颜色匹配度计算器
相反颜色计算器
中国传统色彩
日本传统色彩
Web安全色大全
渐变色大全

工具概述

中间色计算器可以帮助您计算两种颜色之间的过渡色。只需选择起始颜色和结束颜色，设置中间色数量，即可自动生成平滑过渡的颜色序列，非常适合用于渐变设计、调色板制作等场景。

计算模式

1. RGB 插值

在 RGB 颜色空间中进行线性插值，计算速度快，适合大多数网页设计场景。

2. LAB 插值

在 LAB 颜色空间中进行插值，更符合人眼感知特性，生成的过渡色更加自然平滑。特别适合饱和度较高的颜色之间的过渡。

使用方法

  1. 选择起始颜色和结束颜色
  2. 选择计算模式（RGB 或 LAB）
  3. 设置中间色数量（1-20）
  4. 查看生成的颜色序列
  5. 点击颜色可复制 HEX 值
  6. 使用"复制全部HEX"或"复制JS数组"批量复制

应用场景

  • UI 渐变设计：为按钮、背景等元素生成平滑渐变
  • 数据可视化：为图表、热力图生成颜色区间
  • 调色板制作：快速生成主题配色方案
  • CSS 渐变：直接复制生成的 CSS 渐变代码