CSS Farben

Wenm man mit CSS Farben arbeitet, ist es häufig erforderlich, die Farben von RGB nach Hex oder HSL umzuwandeln. Dazu kann man folgende Hilfsfunktionen nutzen.

Die folgenden Funktionen kann man sich hier runterladen download color.js

RGBA to HEX

Diese Funktion erwartet einen CSS rgb() oder rgba() Wert und wandelt diesen in einen HEX Wert um.

        function rgbaToHex(color) {
        // Extrahiert Zahlen und Dezimalpunkte
        var values = color.match(/[\d\.]+/g);
        if (!values || values.length < 3) return "#000000" ; // R, G, B umwandeln var hex="#" + values.slice(0,
          3).map(function(x) { x=parseInt(x).toString(16); return x.length===1 ? "0" + x : x; }).join(""); // Prüfen, ob
          der vierte Wert (Alpha) existiert if (values[3] !==undefined) { // Alpha von 0-1 auf 0-255 skalieren var
          alpha=Math.round(parseFloat(values[3]) * 255).toString(16); hex +=alpha.length===1 ? "0" + alpha : alpha; }
          return hex; } // Test document.write(rgbaToHex("rgba(52, 152, 219, 0.5)")); // Ergebnis: #3498db7f

hexToRgba

Die Funktion erwartet einen Hexwert er kann mit und ohne Alpha definiert sein. Es kann mit und ohne Rautezeichen sein. Er kann 3- oder 6-stellig sein.

            function hexToRgba(hex) {
            // Entferne '#' und wandle Kurzform (3/4 Stellen) in Langform (6/8 Stellen) um
            hex = hex.replace('#', '');
            if (hex.length === 3 || hex.length === 4) {
            hex = hex.split('').map(char => char + char).join('');
            }

            // Extrahiere die Farbkanäle
            const r = parseInt(hex.substring(0, 2), 16);
            const g = parseInt(hex.substring(2, 4), 16);
            const b = parseInt(hex.substring(4, 6), 16);

            // Prüfe, ob ein Alpha-Kanal vorhanden ist (8 Stellen)
            if (hex.length === 8) {
            const aHex = parseInt(hex.substring(6, 8), 16);
            const a = (aHex / 255).toFixed(2); // Umrechnung auf 0.00 bis 1.00
            return `rgba(${r}, ${g}, ${b}, ${a})`;
            }

            // Rückgabe als normales RGB, falls kein Alpha vorhanden ist
            return `rgb(${r}, ${g}, ${b})`;
            }

            // Testläufe:
            console.log(hexToRgba("#3498db")); // "rgb(52, 152, 219)"
            console.log(hexToRgba("#3498db80")); // "rgba(52, 152, 219, 0.50)" (50% Transparenz)
            console.log(hexToRgba("#F00A")); // "rgba(255, 0, 0, 0.67)" (Kurzform mit Alpha)

RGB to HSL

In der folgenden Funktion können die HSL Werte auf 2 Arten ausgegeben werden. Standardmäßig werden Sie als CSS hsl() Wert ausgegeben, wenn man als zweites Argument, true eingibt, wird ein Array ausgegeben, mit den 3 Werten für h, s und l.


            function rgbToHsl(rgb, ar = false) {
            console.log(rgb);
            // RGB String parsen
            const rgbValues = rgb.match(/\d+/g);
            if (!rgbValues) return null;

            let r = parseInt(rgbValues[0]) / 255;
            let g = parseInt(rgbValues[1]) / 255;
            let b = parseInt(rgbValues[2]) / 255;

            let max = Math.max(r, g, b),
            min = Math.min(r, g, b);
            let h,
            s,
            l = (max + min) / 2;

            if (max === min) {
            h = s = 0; // achromatisch
            } else {
            let d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
            case r:
            h = (g - b) / d + (g < b ? 6 : 0); break; case g: h=(b - r) / d + 2; break; case b: h=(r - g) / d + 4;
              break; } h /=6; } if (ar) { // Werte in HSL Format umwandeln (360 Grad, 100%, 100%) //ein Array wird
              erstellt und zurück gegeben return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]; } else
              { return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`; } }

HSL to HEX

Siehe auch eine Schritt für Schritt Anleitung wie man HSL Werte in RGB Werte umwandel: HSL to RGB

Hier werden die 3 Werte für h-Farbton, s=Säattigung, l=Lightness erwartet. Das vierte Argument, der Alphawert von 0 bis 1 ist optional.

                function hslToHex(h, s, l, a = 1) {
                l /= 100;
                const a_inner = (s * Math.min(l, 1 - l)) / 100;

                // Hilfsfunktion zur Berechnung der RGB-Kanäle
                const f = n => {
                const k = (n + h / 30) % 12;
                const color = l - a_inner * Math.max(Math.min(k - 3, 9 - k, 1), -1);
                return Math.round(255 * color).toString(16).padStart(2, '0');
                };

                let hex = `#${f(0)}${f(8)}${f(4)}`;

                // Alpha nur anhängen, wenn es kleiner als 1 ist
                if (a < 1) { const alphaHex=Math.round(a * 255).toString(16).padStart(2, '0' ); hex +=alphaHex; } return
                  hex; } // Beispiele: console.log(hslToHex(200, 70, 50)); // "#269dd9" (Standard: 100% Deckkraft)
                  console.log(hslToHex(200, 70, 50, 0.5)); // "#269dd980" (50% Transparenz)

Hintergrundfarbe ändern

Hier stelle ich Schritt für Schritt ein paar Möglichkeiten vor, wie man mit Textfeldern und Buttons in Formularen die Hintergrundfarbe ändert. Ich habe hier im Großen und Ganzen auf Erklärungen verzichtet, da alle Themen zuvor abgehandelt wurden. Zu jedem Beispiel habe ich den Javascript Quelltext nochmal extra beigefügt. Die Funktionen, zwischen den Script Tags aus dem Head Bereich erscheinen jeweils oberhalb des Formulars. Der Quelltext des Formulars steht darunter.

Die Hintergrundfarbe wird in Javascript mit folgendem Befehl geändert:
document.getElementsByTagName("body")[0].style.backgroundColor="00ff00";
Die Angabe erfolgt in Hexadezimal Werten, allerdings ohne das Gatterzeichen (#).
Der Wert muß in jedem Fall in Anführungszeichen stehen. In einigen Beispielen tut er das nicht, weil es sich um Zeichenketten handelt, die dynamisch konstruiert werden oder aus Textfeldern stammen.

Der Eingabewert eines Textfeldes namens meintextfeld aus dem Formular namens meinformular kann folgendermaßen zugewiesen werden:
document.meinformular.meintextfeld.value


Beispiel 1

function farbegreen() {
document.bgColor = "#E3DABB";
document.getElementsByTagName("body")[0].style.backgroundColor = document.bgColor;
document.form1.bgfarbe.value = document.bgColor;
}

Buttonklick ändert die Farbe, dann erscheint sie im Textfeld als Hexadezimalwert.

<form name="form1">
<input type="text" name="bgfarbe" size="10">
<input type="button" value="Farbe beige" onClick="farbegreen()">
</form>

Beispiel 2

function eingabefarbe() {
document.getElementsByTagName("body")[0].style.backgroundColor=document.form2.farbfeld.value;
document.form1.bgfarbe.value=document.getElementsByTagName("body")[0].style.backgroundColor;
}

Gebe hier einen Hexadezimalwert für die Hintergrundfarbe ein, z.B.: #C0FFEE #BACAD1 #CACCA0 #5AEFDE
Beachte, dass oben im ersten Textfeld die Farbe angezeigt wird.

<form name="form2">
<input type="text" name="farbfeld" size="10">
<input type="button" value="Hexwert eingeben" onClick="eingabefarbe()">
</form>

Beispiel 3

function graustufen() {
var grau = document.form3.graufeld.value;
document.getElementsByTagName("body")[0].style.backgroundColor = "rgb("+ grau +"%,"+ grau +"%, " +grau+"%)";
}

Gebe hier eine Graustufe von 1 bis 100 ein.

<form name="form3">
<input type="text" name="graufeld" size="5">
<input type="button" value="Graustufe eingeben" onClick="graustufen()">
</form>

Erklärung:
Dieses Beispiel war vor kurzem noch eine sehr komplizierte Angelegenheit. Auch das Eingeben mittels RGB Werten oder HSB Werten setzte ?u?erst komplizierte Berechnungen voraus. Dank der CSS3 Farbwerte ist das nun kein Problem mehr, auch Transparenzwerte kann man hier einsetzen.

Beispiel 4

function rgbfarben() {
var rot= document.form4.rfeld.value;
var gruen = document.form4.gfeld.value;
var blau = document.form4.bfeld.value;
document.getElementsByTagName("body")[0].style.backgroundColor = "rgb("+ rot +"%,"+ gruen +"%, " +blau+"%)";
}

Erkl?rung:

So sah die Programmierung aus, bevor mit der CSS3 Farbwertzuweisung mittels rgb eine Farbe bestimmen konnte.

function rgbfarben() {
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var r1 = 0, r2 = 0, g1 = 0, g2 = 0, b1 = 0, b2 = 0;

for(r = 0; r < document.form4.rfeld.value; r++){
r2 = r2 + 1;
if(r2 % 16 == 0) {
r2 = 0;
r1 = r1 + 1;
}
}

for(g = 0; g < document.form4.gfeld.value; g++){
g2 = g2 + 1;
if(g2 % 16 == 0) {
g2 = 0;
g1 = g1 + 1;
}
}


for(b = 0; b < document.form4.bfeld.value; b++){
b2 = b2 + 1;
if(b2 % 16 == 0) {
b2 = 0;
b1 = b1 + 1;
}
}

document.getElementsByTagName("body")[0].style.backgroundColor = X[r1] + X[r2] + X[g1] + X[g2] + X[b1] + X[b2];
}

Gebe hier in die Farbfelder jeweils RGB-Werte von 0 bis 255 ein.

 Rot    Grün    Blau

<form name="form4">
<input type="text" name="rfeld" size="5">
<input type="text" name="gfeld" size="5">
<input type="text" name="bfeld" size="5">
<input type="button" value="RGB eingeben" onClick="rgbfarben()">
</form>

es folgt ein Linkmenue mit einer Formular Auswahlliste

 

Javascript Tipps