TypeScript：如何将十六进制数字转换为CSS十六进制颜色字符串

你可以通过以下简洁方式实现转换：

基础24位颜色转换 #

利用Number.toString(16)将数字转为十六进制字符串，通过padStart确保长度为6位（不足补0），最后转大写并拼接#前缀：

const myNumber: number = 0xFFFFFF;
const cssHexColor = `#${myNumber.toString(16).padStart(6, '0').toUpperCase()}`;
console.log(cssHexColor); // 输出 '#FFFFFF'

支持32位带透明度的颜色 #

如果需要处理包含alpha通道的32位颜色值（比如0xFFFFFFFF），只需将padStart的长度改为8：

const myNumberWithAlpha: number = 0xFFFFFFFF;
const cssHexColorWithAlpha = `#${myNumberWithAlpha.toString(16).padStart(8, '0').toUpperCase()}`;
console.log(cssHexColorWithAlpha); // 输出 '#FFFFFFFF'

关键细节说明 #

• toString(16)：将数字转为小写的十六进制字符串
• padStart(6, '0')：确保结果始终是6位，避免短数字（比如0xFF）转为ff时长度不足，补0后变为0000ff
• toUpperCase()：转换为CSS常用的大写格式，也可根据需求去掉该方法保留小写

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