Farben von kalt bis warm in CSS

Kolja L. OP #5208830
Lesenswert?
• ▲
▼ 
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 Beitrag melden
Johann L. Persönliche Seite #5209015
Lesenswert?
• ▲
▼ 
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 Beitrag melden
Daniel A. #5209165
Lesenswert?
• ▲
▼ 
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 Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren