So, in a game I am working on, I use mainly two colors with shades… Since I was looking into it I decided to implement a feature that you insert the HEX of a color (hexInputVar) and a hue difference value (hueDiff) and it provides 6 variables with RGB values ready for the color tint in gdevelop…
mainC (main color),
mainL (lighter version of the main color),
mainD (darker version of the main color),
secC (secondary color that is the hue of the main color + the hue difference value)
secL (lighter version of the secondary color),
secD (darker version of the secondary color).
That way I can also implement a feature where I have a few set colours and the player can choose the ui colour (for color blind people) and only add one value.
If you think it fits any of your projects, feel free to use it. I will insert the code below but you can also see it in action in codepen here:
// Input hex color code
var hexInputVar = “#26d0ff”; // Replace this with your hex color code
var hueDiff = 180;
// Function to convert hex to RGB
function hexToRgb(hex) {
// Remove the hash sign (#) if present
hex = hex.replace(/^#/, ‘’);
// Parse the hex string to integers
var bigint = parseInt(hex, 16);
// Extract the RGB values
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return { r: r, g: g, b: b };
}
// Function to calculate HSB values from RGB
function rgbToHsb(rgb) {
var r = rgb.r / 255;
var g = rgb.g / 255;
var b = rgb.b / 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, br;
if (max === min) {
h = 0; // achromatic
} else {
var d = max - min;
switch (max) {
case r:
h = (60 * ((g - b) / d + (g < b ? 6 : 0))) % 360;
break;
case g:
h = (60 * ((b - r) / d + 2)) % 360;
break;
case b:
h = (60 * ((r - g) / d + 4)) % 360;
break;
}
}
s = max === 0 ? 0 : (d / max) * 100;
br = (max) * 100;
return { h: h, s: s, br: br };
}
// Convert hex to RGB
var rgbColor = hexToRgb(hexInputVar);
// Calculate HSB values from RGB
var hsbColor = rgbToHsb(rgbColor);
// Extract HSB values
var mainH = Math.round(hsbColor.h);
var mainS = Math.round(hsbColor.s);
var mainBr = Math.round(hsbColor.br);
// Print the results
document.write("Hue (degrees): " + mainH + “
”);
document.write("Saturation (percentage): " + mainS + “%” + “
”);
document.write("Brightness (percentage): " + mainBr + “%” + “
”);
// Function to convert HSB to RGB
function hsbToRgb(h, s, b) {
var hNormalized = h / 60;
var sNormalized = s / 100;
var bNormalized = b / 100;
var c = bNormalized * sNormalized;
var x = c * (1 - Math.abs((hNormalized % 2) - 1));
var m = bNormalized - c;
var r, g, b;
if (hNormalized >= 0 && hNormalized < 1) {
r = c;
g = x;
b = 0;
} else if (hNormalized >= 1 && hNormalized < 2) {
r = x;
g = c;
b = 0;
} else if (hNormalized >= 2 && hNormalized < 3) {
r = 0;
g = c;
b = x;
} else if (hNormalized >= 3 && hNormalized < 4) {
r = 0;
g = x;
b = c;
} else if (hNormalized >= 4 && hNormalized < 5) {
r = x;
g = 0;
b = c;
} else {
r = c;
g = 0;
b = x;
}
r = (r + m) * 255;
g = (g + m) * 255;
b = (b + m) * 255;
return { r: Math.round(r), g: Math.round(g), b: Math.round(b) };
}
//Set Light and Dark Saturation and Brightness
sL = mainS - ((mainS)/3);
brL = mainBr + ((100-mainBr)/2);
brD = mainBr - (mainBr/2);
//Set Secondary Hue
var secH = mainH + hueDiff;
if (secH > 360) {
secH -= 360;
}
// Main
var rgbColor = hsbToRgb(mainH, mainS, mainBr);
var mainC = (rgbColor.r + “;” + rgbColor.g + “;” + rgbColor.b);
//Main Light
var rgbColor = hsbToRgb(mainH, sL, brL);
var mainL = (rgbColor.r + “;” + rgbColor.g + “;” + rgbColor.b);
//Main Dark
var rgbColor = hsbToRgb(mainH, mainS, brD);
var mainD = (rgbColor.r + “;” + rgbColor.g + “;” + rgbColor.b);
//Secondary
var rgbColor = hsbToRgb(secH, mainS, mainBr);
var secC = (rgbColor.r + “;” + rgbColor.g + “;” + rgbColor.b);
//Secondary Light
var rgbColor = hsbToRgb(secH, sL, brL);
var secL = (rgbColor.r + “;” + rgbColor.g + “;” + rgbColor.b);
//Secondary Dark
var rgbColor = hsbToRgb(secH, mainS, brD);
var secD = (rgbColor.r + “;” + rgbColor.g + “;” + rgbColor.b);