taralino

Farbton und Sättigung

Wie du bei der Chamäleon-Aufgabe vielleicht gemerkt hast, ist es gar nicht so einfach, einen passenden Farbton anhand der RGB-Werte zu finden. Alternativ kann daher auch der HSB-Farbraum gewählt werden. Darin sind nicht die Rot-, Grün- und Blau-Anteile direkt zu bestimmen, sondern folgende Werte:

H	Farbton	englisch hue
S	Sättigung	englisch saturation
B	Helligkeit	englisch brightness

Wird eine Farbe anhand von Farbton, Sättigung und Helligkeit bestimmt, so kann diese auch direkt als RGB-Wert umgerechnet werden. Hierzu kannst du die folgende Anwendung nutzen.

Anwendung

Nutze die Regler, um Farbton, Sättigung und Helligkeit einzustellen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

var HSB = [0,255,255];
var mouse = -1;

function check_color_vector(s) {
  return [Math.max(0, Math.min(Math.round(s[0]), 255)), Math.max(0, Math.min(Math.round(s[1]), 255)), Math.max(0, Math.min(Math.round(s[2]), 255))];
};

function check_color_number(s) {
  var t = 6 * Math.max(0, Math.min(s/256, 1));
  return check_color_vector([255*Math.max(2-t, t-4), 255*Math.min(t, 4-t), 255*Math.min(t-2, 6-t)]);
};

function color_gradient(k, t, s) {
  var b = k/255;
  var a = 1-b;
  var r = [a*t[0]+b*s[0],a*t[1]+b*s[1],a*t[2]+b*s[2]];
  return check_color_vector(r);
};

function redraw() {
  Canvas.clear();
  for (var k = 0; k < 256; k++) Canvas.rect(k+0.5, 50, 1, 10, {fill:check_color_number(k)});
  var H = check_color_number(HSB[0]);
  for (var k = 0; k < 256; k++) Canvas.rect(k+0.5, 30, 1, 10, {fill:color_gradient(k,[255,255,255],H)});
  var U = color_gradient(HSB[1],[255,255,255],H);
  for (var k = 0; k < 256; k++) Canvas.rect(k+0.5, 10, 1, 10, {fill:color_gradient(k,[0,0,0],U)});
  for (var i = 0; i < 3; i++) Canvas.rect(HSB[i]+0.5, 50-i*20, 1.5, 15, {fill:[0,0,0,255]});
  var RGB = color_gradient(HSB[2],[0,0,0],U);
  Canvas.rect(128, -22, 60, 30, {fill:RGB, stroke:[0,0,0]});
  var s = "[R, G, B]  =  [" + RGB[0].toFixed(0) + ", " + RGB[1].toFixed(0) + ", " + RGB[2].toFixed(0) + "]";
  Canvas.text(128, -46, s);
};

function setup() {
  Canvas.init([-15,256+15],[-65,70], {background:"lightgrey",width:512+60,scaling:"off"});
  redraw();
};

function on_mouse_move(x, y) {
  if (mouse == -1) return;
  var z = Math.max(0, Math.min(Math.round(x), 255));
  HSB[mouse] = z;
  redraw();
};

function on_mouse_down(x, y) {
  if ((y >= 50-8) && (y <= 50+8)) mouse = 0;
  if ((y >= 30-8) && (y <= 30+8)) mouse = 1;
  if ((y >= 10-8) && (y <= 10+8)) mouse = 2;
  on_mouse_move(x, y);
};

function on_mouse_up(x, y) {
  mouse = -1;
};

function on_mouse_leave() {
  mouse = -1;
};

</script>
</body>
</html>

Vorschau Download Kopie speichern