当给定 p5.js 颜色元素时，有没有办法将十六进制值更改为 RGB 值

Question

在发现我必须使用 p5.js 而不是 jquery 之后，我正在重写我的一个项目。 该脚本应接受 HTML 颜色选择器的输入，我认为它是十六进制或颜色元素，并将其转换为 rgb 值以更改笔划和填充值。 我已经调试到我知道 this.setColour 或 this.colourAlpha 返回 255 255 255 尽管得到不同的十六进制值的地步。 谢谢一堆。

function ColourPalette() {
    //make the start colour be black
    this.selectedColour = "#000000";
    this.alpha = 1
    
    //load in the colours
    this.loadColours = function() {
        var aColour = document.getElementById("colourInput").value
        //set the selected colour to the colourInput calue with current alpha
        this.setColour(this.colourAlpha(aColour, this.alpha));
        console.log(aColour)
        console.log(this.colourAlpha(aColour, this.alpha))
        
    };
    
    this.setColour = function (color){
        this.selectedColour = color
        //set fill and stroke to selectedColour value
        fill(this.selectedColour);
        stroke(this.selectedColour);
        console.log(this.selectedColour);
        
        
        //Create hex colour string and pass it into the colourInput element
        //to make sure it is set to the currently selected colour
        var redHex = red(this.selectedColour).toString(16);
        if (redHex.length == 1) {
            redHex = "0" + redHex
        };
        
        var greenHex = green(this.selectedColour).toString(16);
        if (greenHex.length == 1) {
            greenHex = "0" + greenHex
        };
        
          var blueHex = blue(this.selectedColour).toString(16);
        if (blueHex.length == 1) {
            blueHex = "0" + blueHex
        };
        
        
        document.getElementById("colourInput").value = "#" + redHex + greenHex + blueHex;
        console.log(document.getElementById("colourInput").value)
    };
        
    // Creates a new colour with RGB values from a colour and a value from alpha
    this.colourAlpha = function(aColour, alpha){
        
        var c = color(aColour);
        console.log(c)
        return 'rgba(' + [red(c), green(c), blue(c), alpha].join('.') + ')';

    }
    //call the loadColours function now it is declared
    this.loadColours();
    
    
    //Load the colour everytime the colour input is changed
    const selectElement = document.querySelector('#colourInput');
    selectElement.addEventListener('change', (event) => { this.loadColours(); });
};```

Answer 1

您无需任何代码即可计算出从十六进制到 RGB 的转换：

取前 2 位数字并将它们从十六进制值转换为十进制值，从而为您提供 RGB 的 R 值

取十六进制代码的中间2个数字并转换为十进制，这给出了G值

取最后一个数字，转换为十进制，得到B值

例如十六进制 #578955

十进制的 0x57 = 87 (R)

十进制的 0x89 = 137 (G)

十进制的 0x55 = 85 (B)

所以 #578955 在 RGB 中是 rgb(87, 137, 85)

Answer 2

我在尝试解决问题时发现了这个可爱的解决方案:)

 function changeHexaToRgba() { h3.style.color = input1.value; input2.value = h3.style.color; } changeHexaToRgba();

 <h3 id="h3">Type Your Hexa Color and then click button</h3> <input type="text" id="input1" value="#080" /> <button onclick="changeHexaToRgba()">GO</button> <input type="text" id="input2" value="" />