如何将HEX颜色转换为FFmpeg可用的AARRGGBB格式？

FFmpeg使用**BGR（不带透明）或BGRA（带透明）**的十六进制顺序（前缀&H），而常规HEX颜色是RGB/RGBA顺序，这就是你只有黑白能正常显示的原因——黑白的RGB分量相同，顺序颠倒后不影响，其他颜色则会完全错位。

错误原因分析 #

• 方法一：tinycolor.toHex8()返回的是RRGGBBAA格式，你截取后直接拼接成&H前缀，顺序和FFmpeg要求的BBGGRRAA完全相反，导致颜色错误。
• 方法二：计算得到的是ARGB数值，转十六进制后是AARRGGBB，同样不符合FFmpeg的BGR顺序要求。

正确实现方案 #

方案一：用tinycolor简化处理

const bgColorHex = '#FFBA08';
const color = tinycolor(bgColorHex);
const { r, g, b, a } = color.toRgb();

// 按B→G→R→A顺序转两位十六进制，不足补0
const bHex = b.toString(16).padStart(2, '0');
const gHex = g.toString(16).padStart(2, '0');
const rHex = r.toString(16).padStart(2, '0');
const aHex = Math.round(a * 255).toString(16).padStart(2, '0');

const bgColorFFmpeg = `&H${bHex}${gHex}${rHex}${aHex}`;
// 示例输出：&H08baffff

方案二：原生JS手动解析

const hexColor = "EF233C"; // 支持带#的格式，比如"#EF233C"
let alpha = 1.0;

// 移除#前缀
const cleanHex = hexColor.replace('#', '');
let r, g, b;

// 处理6位RGB或8位RGBA格式
if (cleanHex.length === 6) {
  r = parseInt(cleanHex.slice(0, 2), 16);
  g = parseInt(cleanHex.slice(2, 4), 16);
  b = parseInt(cleanHex.slice(4, 6), 16);
} else if (cleanHex.length === 8) {
  r = parseInt(cleanHex.slice(0, 2), 16);
  g = parseInt(cleanHex.slice(2, 4), 16);
  b = parseInt(cleanHex.slice(4, 6), 16);
  alpha = parseInt(cleanHex.slice(6, 8), 16) / 255;
}

const a = Math.round(alpha * 255);
// 按B→G→R→A顺序拼接
const ffmpegColor = `&H${
  b.toString(16).padStart(2, '0')
}${
  g.toString(16).padStart(2, '0')
}${
  r.toString(16).padStart(2, '0')
}${
  a.toString(16).padStart(2, '0')
}`;

console.log(ffmpegColor);
// 示例输出：&H3c23ffff

内容的提问来源于stack exchange，提问作者Youssef