javascript对任意颜色获取更亮或更暗的颜色值

zzzmh 发布于2019-08-29 12:58 / 780人阅读

摘要：预处理，比如和可以通过设定一个特定值，让任何颜色变得更亮或者更暗。下面这个方法能在中得到一个更亮或者更暗的值，通过一个给定的十六进制颜色值比如或者没有原文来自轮子工厂一个分享优秀组件的网站

预处理CSS，比如Sass和less可以通过设定一个特定值，让任何颜色变得更亮或者更暗。但是在javascript中却没有这种方法。下面这个方法能在javascript中得到一个更亮或者更暗的值，通过一个给定的十六进制颜色值（比如#F06D06,或者没有#）

function LightenDarkenColor(col, amt) {
  
    var usePound = false;
  
    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }
 
    var num = parseInt(col,16);
 
    var r = (num >> 16) + amt;
 
    if (r > 255) r = 255;
    else if  (r < 0) r = 0;
 
    var b = ((num >> 8) & 0x00FF) + amt;
 
    if (b > 255) b = 255;
    else if  (b < 0) b = 0;
 
    var g = (num & 0x0000FF) + amt;
 
    if (g > 255) g = 255;
    else if (g < 0) g = 0;
 
    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
  
}

// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20); 

// Darken
var NewColor = LightenDarkenColor("#F06D06", -20);

原文来自css-tricks
轮子工厂--一个分享vue,angular优秀组件的网站

混合云私有云颜色值所有颜色值不同颜色值得到颜色值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112279.html

javascript对任意颜色获取更亮或更暗的颜色值

摘要：预处理，比如和可以通过设定一个特定值，让任何颜色变得更亮或者更暗。下面这个方法能在中得到一个更亮或者更暗的值，通过一个给定的十六进制颜色值比如或者没有原文来自轮子工厂一个分享优秀组件的网站预处理CSS，比如Sass和less可以通过设定一个特定值，让任何颜色变得更亮或者更暗。但是在javascript中却没有这种方法。下面这个方法能在javascript中得到一个更亮或者更暗的值，通...

Freeman 2019-08-20 18:12 评论0 收藏0
JavaScript写一个简单的Ps滤镜效果

摘要：给图像设置一个阴影效果。一值设定图像会被调整的色环角度值。的价值是完全反转。超过的值是允许的，则有更高的饱和度。值为则完全是深褐色的，值为图像无变化。效果预览 showImg(https://segmentfault.com/img/bVbpSTz?w=648&h=729); 思路其实非常非常赶单~CSS3多了一个filter的属性，非常强大（兼容性一般）！我们只要根据输入的值/滑...

王陆宽 2019-08-23 15:57 评论0 收藏0
JavaScript写一个简单的Ps滤镜效果

摘要：给图像设置一个阴影效果。一值设定图像会被调整的色环角度值。的价值是完全反转。超过的值是允许的，则有更高的饱和度。值为则完全是深褐色的，值为图像无变化。效果预览 showImg(https://segmentfault.com/img/bVbpSTz?w=648&h=729); 思路其实非常非常赶单~CSS3多了一个filter的属性，非常强大（兼容性一般）！我们只要根据输入的值/滑...

voyagelab 2019-08-02 14:30 评论0 收藏0
CSS中filter属性的使用

摘要：属性定义了元素的可视效果给图像设置高斯模糊。值为图像全黑值超过图像更亮调整图像的对比度。一值设定图像会被调整的色环角度值。的价值是完全反转。超过的值是允许的，则有更高的饱和度。值为则完全是深褐色的，值为图像无变化。 filter 属性定义了元素的可视效果 blur 给图像设置高斯模糊。radius一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果没有...

Darkgel 2019-08-29 16:59 评论0 收藏0
CSS中filter属性的使用

摘要：属性定义了元素的可视效果给图像设置高斯模糊。值为图像全黑值超过图像更亮调整图像的对比度。一值设定图像会被调整的色环角度值。的价值是完全反转。超过的值是允许的，则有更高的饱和度。值为则完全是深褐色的，值为图像无变化。 filter 属性定义了元素的可视效果 blur 给图像设置高斯模糊。radius一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果没有...

EsgynChina 2019-08-02 11:42 评论0 收藏0