将CSS OKLCH颜色转换为十六进制HEX颜色和十六进制整数格式

我查找了全网都查不到OKLCH()方法是颜色转换方法,那今天小编就给大家分享我的方法,可能会有点点误差,但是大体不影响。

程序员必备宝典https://tmxkj.top/#/示例:oklch(0.253267 0.015896 252.418)

得到HEX: #1b150c

十六进制整数:0x1b150c

好了,话不多说,直接上CssUtil代码!!

复制代码
/**
 * oklch 类型颜色转换
 * @param oklchColor oklch(0.253267 0.015896 252.418)
 * @returns {string}  #1b150c
 */
export function convertOklchToHex(oklchColor) {
    // 解析 oklch 颜色值
    const [luminance, chroma, hue] = oklchColor.match(/(\d+\.\d+)/g).map(parseFloat);
    let addNum = luminance*100 +0.01
    // 将 oklch 转换为 rgb
    const [r, g, b] = oklchToRgb(addNum, chroma, hue);
    // 将 rgb 转换为十六进制
    const hex = rgbToHex(r, g, b);
    return hex;
}

function oklchToRgb(luminance, chroma, hue) {
    const l = luminance / 100;
    const c = chroma;
    const h = hue;
    const a = Math.cos(h * Math.PI / 180);
    const b = Math.sin(h * Math.PI / 180);
    const x = c * a;
    const y = c * b;
    const z = l - 0.299 * x - 0.114 * y;
    const r = x + 0.436 * z;
    const g = y + 0.386 * z;
    const b_ = 0.177 * z;
    return [
        Math.round(255 * r),
        Math.round(255 * g),
        Math.round(255 * b_)
    ];
}

function rgbToHex(r, g, b) {
    const componentToHex = (c) => {
        const hex = c.toString(16);
        return hex.length === 1? "0" + hex : hex;
    };
    return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
}

/**
 * 十六进制格式(如#bec9d4)转换为十六进制整数格式(如0x26b9f2)
 * @param hexColor #1b150c
 * @returns {string} 如0x1b150c
 */
export function hexToHexInt(hexColor) {
    // 移除颜色字符串中的 '#' 符号
    const hex = hexColor.replace('#', '');
    // 将十六进制字符串转换为十进制整数
    const decimal = parseInt(hex, 16);
    // 返回十六进制整数格式的颜色值
    return (`0x${decimal.toString(16).toUpperCase()}`).toLowerCase();
}
相关推荐
烛阴27 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化41 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月41 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom