Wie konvertiert man Farben im RGB-Format in das Hex-Format und umgekehrt?
Konvertieren Sie zum Beispiel '#0080C0' a (0, 128, 192) .
Antworten
Zu viele Anzeigen?
Yugi Oh
Punkte
43
HTML-Konverter :)
<!DOCTYPE html>
<html>
<body>
<p id="res"></p>
<script>
function hexToRgb(hex) {
var res = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return "(" + parseInt(res[1], 16) + "," + parseInt(res[2], 16) + "," + parseInt(res[3], 16) + ")";
};
document.getElementById("res").innerHTML = hexToRgb('#0080C0');
</script>
</body>
</html>
Johannes
Punkte
159
Umwandlung von HEX in RGB, wobei RGB Fließkommazahlen im Bereich von 0 und 1 sind:
#FFAA22 {r: 0.5, g: 0, b:1}
Ich habe die Antwort von @Tim Down übernommen:
function convertRange(value,oldMin,oldMax,newMin,newMax) {
return (Math.round(((((value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin) * 10000)/10000)
}
function hexToRgbFloat(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: convertRange(parseInt(result[1],16), 0, 255, 0, 1),
g: convertRange(parseInt(result[2],16), 0, 255, 0, 1),
b: convertRange(parseInt(result[3],16), 0, 255, 0, 1)
} : null;
}
console.log(hexToRgbFloat("#FFAA22")) // {r: 1, g: 0.6667, b: 0.1333}
marcobiedermann
Punkte
2837
Unveränderliche und menschlich verständliche Version ohne bitweise Magie:
- Schleife über Array
- Wert normalisieren, wenn
value < 0ovalue > 255使ってMath.min()yMath.max() - Zahl umwandeln in
hexNotation mitString.toString() - Führende Null anhängen und Wert auf zwei Zeichen kürzen
-
gemappte Werte zu String verbinden
function rgbToHex(r, g, b) { return [r, g, b] .map(color => { const normalizedColor = Math.max(0, Math.min(255, color)); const hexColor = normalizedColor.toString(16);
return `0${hexColor}`.slice(-2); }) .join("");}
Ja, es wird nicht so leistungsfähig sein wie bitweise Operatoren, aber viel besser lesbar und unveränderlich, so dass es keine Eingaben ändern wird
Wolden
Punkte
185
Wenn man in einer 3D-Umgebung (webGL, ThreeJS) arbeitet, muss man manchmal 3 Werte für die verschiedenen Flächen von Meshes erstellen, die Grundfarbe (Hauptfarbe), eine hellere und eine dunklere:
material.color.set( 0x660000, 0xff0000, 0xff6666 ); // red cubeWir können diese 3 Werte aus der RBG-Hauptfarbe erzeugen: 255,0,0
function rgbToHex(rgb) {
var hex = Number(rgb).toString(16);
if (hex.length < 2) {
hex = "0" + hex;
}
return hex;
};
function convertToHex(r,g,b) {
var fact = 100; // contrast
var code = '0x';
// main color
var r_hexa = rgbToHex(r);
var g_hexa = rgbToHex(g);
var b_hexa = rgbToHex(b);
// lighter
var r_light = rgbToHex(Math.floor(r+((1-(r/255))*fact)));
var g_light = rgbToHex(Math.floor(g+((1-(g/255))*fact)));
var b_light = rgbToHex(Math.floor(b+((1-(b/255))*fact)));
// darker
var r_dark = rgbToHex(Math.floor(r-((r/255)*(fact*1.5)))); // increase contrast
var g_dark = rgbToHex(Math.floor(g-((g/255)*(fact*1.5))));
var b_dark = rgbToHex(Math.floor(b-((b/255)*(fact*1.5))));
var hexa = code+r_hexa+g_hexa+b_hexa;
var light = code+r_light+g_light+b_light;
var dark = code+r_dark+g_dark+b_dark;
console.log('HEXs -> '+dark+" + "+hexa+" + "+light)
var colors = [dark, hexa, light];
return colors;
}Schreibe einfach in deinen ThreeJS-Code:
var material = new THREE.MeshLambertMaterial();
var c = convertToHex(255,0,0); // red cube needed
material.color.set( Number(c[0]), Number(c[1]), Number(c[2]) );Ergebnisse:
// dark normal light
convertToHex(255,255,255) HEXs -> 0x696969 + 0xffffff + 0xffffff
convertToHex(255,0,0) HEXs -> 0x690000 + 0xff0000 + 0xff6464
convertToHex(255,127,0) HEXs -> 0x690000 + 0xff0000 + 0xff6464
convertToHex(100,100,100) HEXs -> 0x292929 + 0x646464 + 0xa0a0a0
convertToHex(10,10,10) HEXs -> 0x040404 + 0x0a0a0a + 0x6a6a6a
user3237573
Punkte
89
function getRGB(color){
if(color.length == 7){
var r = parseInt(color.substr(1,2),16);
var g = parseInt(color.substr(3,2),16);
var b = parseInt(color.substr(5,2),16);
return 'rgb('+r+','+g+','+b+')' ;
}
else
console.log('Enter correct value');
}
var a = getRGB('#f0f0f0');
if(!a){
a = 'Enter correct value';
}
a;
