farbmischer.php

Quell Code

<script src="/js/index.php?js=3.2.1-jquery.min.js"></script>
<h1>Rgb Farbmischer</h1>
<div id="ganzereihe" style="width:100%;background:black;">
<div id="slidecontainer">
  <input type="range" min="0" max="255" value="250" class="slider1 sliderall" id="myRangerot"><br>
    <input type="range" min="0" max="255" value="250" class="slider2 sliderall" id="myRangegrun">
    <input type="range" min="0" max="255" value="250" class="slider3 sliderall" id="myRangeblau"></div>
     <div id="ausgabe" class="ausgabe">
    <p class="rgbtext">
 </p> 
 </div>
</div>

<h1>hex Farbmischer</h1>
<div id="ganzereihe1" style="width:100%;background:black;">
<div id="slidecontainer1">
  <input type="range" min="0" max="255" value="250" class="slider11 sliderall1" id="myRangerot1"><br>
    <input type="range" min="0" max="255" value="250" class="slider21 sliderall1" id="myRangegrun1">
    <input type="range" min="0" max="255" value="250" class="slider31 sliderall1" id="myRangeblau1"></div>
     <div id="ausgabe1" class="ausgabe1">
    <p class="rgbtext1">
 </p> 
 </div>
</div>
<h1>Hsl Farbmischer</h1>
 <div id="hcontainer" class="hcontainer">
 <br>
    H <input type="range" min="0" max="360" value="350" class="hslider1 hsl1" id="hslh"><br>
    S <input type="range" min="0" max="100" value="100" class="hslider1 hsl2" id="hsls"><br>
   L <input type="range" min="0" max="100" value="80" class="hslider1 hsl3" id="hsll">
<div id="hslgabe"><p class="hsltext">
</p>
</div>
  </div>
<script>
wechselrgb()
function wechselrgb(){
var rgbrot=$("#myRangerot").val();
var rgbgrun=$("#myRangegrun").val();
var rgbblau=$("#myRangeblau").val();

$(".slider1").css("background","rgb("+rgbrot+",0,0)")
$(".slider2").css("background","rgb(0,"+rgbgrun+",0)")
$(".slider3").css("background","rgb(0,0,"+rgbblau+")")
$(".rgbtext").text("rgb("+rgbrot+","+rgbgrun+","+rgbblau+")")
$(".ausgabe").css("background","rgb("+rgbrot+","+rgbgrun+","+rgbblau+")")
}

myRangerot.onchange=wechselrgb
myRangegrun.onchange=wechselrgb
myRangeblau.onchange=wechselrgb

wechselrgb1()
function wechselrgb1(){
var rgbrot1=$("#myRangerot1").val();
var rgbgrun1=$("#myRangegrun1").val();
var rgbblau1=$("#myRangeblau1").val();

 var color1 = Math.round(rgbrot1).toString(16);
 var color2 = Math.round(rgbgrun1).toString(16);
 var color3 = Math.round(rgbblau1).toString(16);

if(rgbrot1<=16){
var color1='0'+color1;
}
if(rgbgrun1<=16){
var color2='0'+color2;
}
if(rgbblau1<=16){
var color3='0'+color3;
}

$(".slider11").css("background","#"+color1+"0000")
$(".slider21").css("background","#00"+color2+"00")
$(".slider31").css("background","#0000"+color3+"")
$(".rgbtext1").text("#"+color1+""+color2+""+color3+"")
$(".ausgabe1").css("background","#"+color1+""+color2+""+color3+"")
}

myRangerot1.onchange=wechselrgb1
myRangegrun1.onchange=wechselrgb1
myRangeblau1.onchange=wechselrgb1

hslwechsel()

function hslwechsel(){

var hrot=$("#hslh").val();
var hgrun=$("#hsls").val();
var hblau=$("#hsll").val();
$(".hsltext").text("hsl(" + hrot + ","+hgrun+"%," + hblau + "%)")
$("#hslgabe").css("background","hsl(" + hrot + ","+hgrun+"%," + hblau + "%)")
$(".hsl1").css("background","linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet,red");
$(".hsl2").css("background","linear-gradient(to right,hsl("+hrot+",0%,"+hblau+"%),hsl("+hrot+",100%,"+hblau+"%) ");
$(".hsl3").css("background","linear-gradient(to right,hsl("+hrot+","+hgrun+"%,0%),hsl("+hrot+","+hgrun+"%,100%) ");
}
hslh.onchange=hslwechsel
hsls.onchange=hslwechsel
hsll.onchange=hslwechsel
</script>