Farben von kalt bis warm in CSS

OP #5208830 
Hallo

Für ein kleines lokales Webprojekt würde ich gerne Temperaturen in 
Farben darstellen.
Der Bereich liegt zwischen 10 und 90°C und die Farben sollen in ein Grad 
Schritten von blau nach rot laufen.

Mit dem CSS Gradient ist dies leider nicht umzusetzen:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_angles

Was ich jetzt suche ist eine Möglichkeit, jeder Temperatur eine Farbe 
zuzuordnen.
Dies muss nicht im Browser passieren, ich kann die Datenbank, welche die 
temperaturen enthält, auch über ein PHP Script um die Spalten mit den 
Farbwerten erweitern.

Eine feste Tabelle möchte ich nicht machen, das wäre ja zu einfach ;-)
Aber vor allem auch zu unflexibel, wenn mal andere Farben gewünscht 
sind.

Danke und Gruß Kolja
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Melden Danke
Persönliche Seite 
Geht ja auch JavaScript.  Ja ich weiß, das ist böse :-)

Hier z.B: ein Farbverlauf Blau - Weiß - Rot (circa) ja nach Maus:
1
<html>

2
<head>

3
<title>blau-rot</title>

4
<script>

5
window.onload = function()

6
{

7
  var text = document.getElementById ("text");

8
  var x_min = text.getBoundingClientRect().left;

9
  var x_max = text.getBoundingClientRect().right;

10
  var hue_min = 1 + 2/3;

11
  var hue_max = 1;

12


13
  text.onmousemove = function (e)

14
  {

15
    var x = e.clientX / (x_max - x_min);

16


17
    var hue = hue_min + x * (hue_max - hue_min);

18
    var lit = 4 * x * (1 - x);

19
    lit = 0.4  + (1 - 0.4) * lit;

20


21
    text.style.background = "hsl(" + (360*hue) + ", 100%, " + (100*lit) + "%)";

22
  };

23
}

24
</script>

25
</head>

26
<body>

27
<div id="text">Text Text Text Text Text Text Text Text Text Text Text Text Text </div>

28
</body>

29
</html>
Antwort Zitieren Bearbeiten Löschen Melden Danke 
Kolja L. schrieb:
> Der Bereich liegt zwischen 10 und 90°C und die Farben sollen in ein Grad
> Schritten von blau nach rot laufen.

Das ist eventuell im HSV Farbraum einfacher zu berechnen als in RGB, da 
ändert sich von Rot nach Blau nur ein Wert. Gibt IMHO sattere Farben 
verglichen zu einfacher Interpolation in RGB.
Antwort Zitieren Bearbeiten Löschen Melden Danke 
Es gibt eine einfache formel, die ich immer zur linearen Interpolation 
zwischen 2 werten mit mehreren Komponenten verwende, egal ob es farben, 
punkte im raum, oder sonstwas sind:
a und b können vektoren oder scalare sein, t ist ein scalar zwischen 0 
und 1. t=0 ist das selbe wie a, t=1 das selbe wie b, t=0.5 ist (a+b)/2, 
usw.

Ungetestete javascript funktion:
1
function interpolate(a,b,t){

2
  if(a.length != b.length)

3
    throw new Error("Dimension error");

4
  var r = [];

5
  for( var i=a.length; i--; )

6
    r[i] = a[i]*(1-t) + b[i]*t;

7
  return r;

8
}

9
// verwendungsbeipeiel: interpolate([1,2,3],[3,2,1],0.5); // [2,2,2]


Ich finde es erspart viel rechnerei, wenn man nur t auf den bereich 0 
bis 1 normalisieren muss.
Antwort Zitieren Bearbeiten Löschen Melden Danke
Thread beobachten

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 8 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.