CODEWITHSUNDEEP
javascriptp5.js
MJNiessen
MJNiessen

Reputation: 1

Is there a way to change Hex values into RGB values when given a p5.js color element

I'm rewriting a project of mine after finding out I had to use p5.js instead of jquery. The script should take the input of a HTML colour picker which I believe is either a hex or a color element and turn it into the rgb values to change the stroke and fill values. I've debugged to the point where I know either this.setColour or this.colourAlpha is returning 255 255 255 despite getting a different hex value. Thanks a bunch.

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(); });
};```

Upvotes: 0

Views: 754

Answers (2)

Emy
Emy

Reputation: 639

I discovered this cute solution while trying to solve a problem :)

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="" />

Upvotes: 0

user13912051
user13912051

Reputation:

You can work out the conversion from Hex to RGB without any code:

Take the first 2 digits and convert them from hex value to decimal value, that gives you the R value of the RGB

Take the 2 middle numbers of hex code and convert to decimal, this gives the G value

Take the last to numbers, convert to decimal, and you get the B value

E.g. Hex #578955

0x57 in decimal = 87 (R)

0x89 in decimal = 137 (G)

0x55 in decimal = 85 (B)

so #578955 in RGB is rgb(87, 137, 85)

Upvotes: 1

Related Questions