javascript - 使用 CSS 或 JavaScript 从原色动态获取强调色

标签 javascript css sass colors

我正在制作一个小型颜色转换器应用程序,它可以根据转换后的颜色动态更改背景颜色。问题是,我无法定义用于 UI 元素(如字体、输入边框等)的颜色。如果用户选择相同的颜色进行转换 - 所有 UI 都将完全消失。

我有过使用 css 过滤器属性的想法,亮度会很好。但是,我无法处理边框等。

当前的 bg-color 存储在 css-variable 中。

问题是,如何使用 CSS 或 JS 从任何颜色中获取强调色?

最佳答案

我找到了一个解决方案,我想把它留在这里。

  1. 通过使用 SASS,使用此类 SASS 颜色函数可以很容易地解决问题。对于我的问题,mix($color1, $color2, $weight: 50%) 函数将是完美的选择。唉,我只能使用纯 CSS。

  2. 尝试做类似的事情,我编写了一个函数,根据颜色亮度将颜色与一定量的白色或黑色混合。亮度由RGB值计算;使用相同颜色的十六进制值进行混合。

const accentColour = (rgb, hex) => {

  const rgbLightness = (r, g, b) => 0.2126 * r + 0.587 * g + 0.114 * b;

  const blendColours = (hex1, hex2, amount) => {
    // remove "#"
    [ hex1, hex2 ] = [ parseInt(hex1.slice(1), 16), parseInt(hex2.slice(1), 16) ];
    const [ hex1_12 , hex2_12 ] = [ hex1 >> 16 , hex2 >> 16 ];
    const [ hex1_34, hex2_34 ] = [ hex1 >> 8 & 255, hex2 >> 8 & 255 ];
    const [ hex1_56, hex2_56 ] = [ 255 & hex1, 255 & hex2 ];
    // return "#" + (16777216 + 65536 * (Math.round((hex2_12 - hex1_12) * amount) + hex1_12) + 256 * (Math.round((hex2_34 - hex1_34) * amount) + hex1_34) + (Math.round((hex2_56 - hex1_56) * amount) + hex1_56)).toString(16).slice(1);

    return "#" + [
      16777216,
      65536 * (Math.round((hex2_12 - hex1_12) * amount) + hex1_12),
      256 * (Math.round((hex2_34 - hex1_34) * amount) + hex1_34),
      (Math.round((hex2_56 - hex1_56) * amount) + hex1_56),
    ]
      .reduce((a, b) => a + b, 0)
      .toString(16)
      .slice(1);
  };

  return (
    (rgbLightness(...rgb) < 180)
      ? blendColours(hex, "#FFFFFF", 0.75)
      : blendColours(hex, "#000000", 0.5)
  );  
};

关于javascript - 使用 CSS 或 JavaScript 从原色动态获取强调色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57869604/

相关文章:

javascript - Json数据中某个字段的最大数字

javascript - dojo.exists 在 IE11 上失败

javascript - 实现 magnific lightbox to tumblr 问题

css - 为什么 Tomcat 6 找不到我的 styles.css

css - 使 CSS 更多 SCSS 以避免重复

javascript - 如何使用 scss 根据隐藏属性更改样式?

javascript - 云函数 - 像对象值一样访问 json

html - 为什么 Hover 不能处理嵌套在另一个列表下的列表

html - 防止 HTML 表格溢出包含的 div

javascript - 如何分离不同页面的 CSS,以便仅在特定页面上加载所需的 css 属性?