RGB 到 HEX 转换 JavaScript [重复]

Posted 2023-02-23

【中文标题】RGB 到 HEX 转换 JavaScript [重复]

【英文标题】：RGB to HEX Conversion JavaScript [duplicate]

【发布时间】：2013-03-28 20:18:06

【问题描述】：

我制作了一个 HEX 到 RGB 转换的 JSFiddle，但我想知道如何以另一种方式进行（RGB 到 HEX）。

$('#hex').bind('blur keydown', function (event) 
  setTimeout(function () 
    var rgb = [],
        broken = false,
        value = $("#hex").val(),
        hex = (value+'').replace(/#/, '');

    if (value.length === 1 && value !== '#') 
      $("#hex").val(value);
    

    if (hex.length == 3) hex = hex + hex;
    for (var i = 0; i < 6; i+=2) 
      rgb.push(parseInt(hex.substr(i,2),16));
      broken = broken || rgb[rgb.length - 1].toString() === 'NaN';
    

    $('#rgb').val(broken ? '' : 'rgb(' + rgb.join(',') + ')');   
  , 13);
);

'#hex' 和 '#rgb' 只是输入：

<input type="text" id="hex" placeholder="hex">
<input type="text" id="rgb" placeholder="rgb">

Here's the JSFiddle.

我也想知道为什么如果我用false 替换broken，我得到一个错误。你知道为什么我不能删除var broken = false 而是用false 替换吗？

【问题讨论】：

备注：你的逻辑目前是错误的。 #abc 不是 #abcabc 而是 #aabbcc。

哦，是吗？我该如何解决？抱歉，我是 javascript 新手。

见***.com/q/5623838/989121

我不懂 JavaScript，所以它并没有真正的帮助：/

@user2203362：如果您是 JavaScript 新手并且不了解某些内容，请搜索它。通常您会获得指向developer.mozilla.org 的链接，这对于初学者来说是一个很好的资源。

【参考方案1】：

这是一个将 RGB 转换为 HEX 的代码：

$(function()
  var $hex = $('#hex');
  $('#rgb').on('keyup blur', function() 
    var value = this.value,
        rgb,
        hex = '',
        component,
        i;
    try 
      if(value && value.indexOf('rgb(') === 0 && value[value.length-1] === ')') 
        rgb = value.slice(4,-1).split(',');
        if(rgb.length === 3) 
          for(i=0;i<3;i++) 
            if(rgb[i] <= 0xFF) 
              component = parseInt(rgb[i],10);
              if(isNaN(component)) 
                throw new SyntaxError();
              
              component = component.toString(16);
              if(component.length === 1) 
                component = '0'+component;
              
              hex += component;
             else 
              throw new RangeError();
            
          
          $hex.val('#'+hex);
         else 
          throw new SyntaxError();
        
      
     catch(e) 
      $hex.val('');
    
  );
);

这里是一个工作示例http://jsbin.com/amisen/3/edit

【讨论】：

完美运行，谢谢！你知道我的 HEX 转 RGB 有什么问题吗？显然逻辑是错误的。

@user2203362 你应该用if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];替换if (hex.length == 3) hex = hex + hex;

啊，我明白了。太棒了，谢谢！

在 RGB 到 HEX 中，有没有办法可以显示较短的版本，例如#444 而不是 #444444 或者那不可能？