Question

Technologies:

javascript

Tolerim

13 days ago

What is the process to transform HEX colors into AARRGGBB format for utilization in FFMPEG?

I am struggling to correctly convert hex colors in JavaScript. Despite trying multiple solutions, I always seem to get the wrong code output. Here are two methods I have attempted:

const bgColorHex = '#FFBA08'; 
const bgColorFFmpeg = `&H${tinycolor(bgColorHex).toHex8().substr(2)}`;

And an alternative method:

const hexColor = "EF233C";
const alpha = 1.0;

const r = parseInt(hexColor.slice(0, 2), 16);
const g = parseInt(hexColor.slice(2, 4), 16);
const b = parseInt(hexColor.slice(4, 6), 16);
const a = Math.round(alpha * 255);

const argbColor = (a << 24) | (r << 16) | (g << 8) | b;

console.log(argbColor.toString(16));

However, despite trying both methods, I still cannot achieve the desired outcome, as I am only able to produce black and white output on FFMPEG. Any assistance would be greatly appreciated.

Answers(2)

Tolerim

13 days ago

The first method you tried seems to be using the tinycolor library. You need to make sure that you have imported this library in your code before using it. Regarding the second method you've tried, it is converting a hex color to an ARGB color, which is a different format than what you need for FFMPEG. To convert a hex color to a numeric representation that FFMPEG can recognize, you can use the following code:

const hexColor = "FFBA08"; // your input hex color
const numericColor = parseInt(hexColor, 16); // convert hex to number
const ffmpegColor = numericColor.toString(16); // convert number to FFMPEG format (no 0x prefix)

console.log(ffmpegColor); // should output "ffba08" (without quotes)

This code will first convert the hex color to a numeric representation using parseInt with a radix of 16 (which means hex). Then, it will convert the numeric representation to a string in the format that FFMPEG recognizes (without the 0x prefix). Note that FFMPEG expects the color to be in lowercase, so we use .toString(16) without passing any argument to ensure that the output is the correct format.

Accepted Answer

I'm sorry to hear that you are struggling with converting hex colors in JavaScript. I found a solution that might help you. You can use the following code snippet to convert hex colors to RGB colors in JavaScript:

const hexToRgb = (hex) => {
  const r = parseInt(hex.substring(1, 3), 16);
  const g = parseInt(hex.substring(3, 5), 16);
  const b = parseInt(hex.substring(5, 7), 16);

  return [r, g, b];
};

You can then use the following code snippet to convert RGB colors to an ARGB color format:

const rgbToArgb = (rgb) => {
  const alpha = 255;
  const argbColor = (alpha << 24) | (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];

  return argbColor;
};

You can then use the following code snippet to convert the ARGB color format to a hexadecimal color format:

const argbToHex = (argb) => {
  const hexColor = argb.toString(16).substring(2);
  
  return hexColor;
};

I hope this helps you achieve the desired outcome. Let me know if you have any further questions or concerns. Here is a link to a Stack Overflow thread that might also be helpful.

Sources

Convert RGB to Hex color codes in JavaScript - DEV Community Diving into JavaScript: How to Create a Hex2RGB Color Converter javascript - How to get hex color value rather than RGB value? - Stack ...javascript - Programmatically Lighten or Darken a hex color (or rgb ...Create a hexadecimal colour based on a string with JavaScript ffmpeg: How to handle color range conversions - Super User