# JavaScript製作HTML Palette調色盤

###### tags: `jQuery` `JavaScript` `jQuery Mobile`

---

function set_color(){
    var red = $("#red").val();
    var green = $("#green").val();
    var blue = $("#blue").val();
    var color = "RGB("+red+","+green+","+blue+")";
    $("div").css("background-color",color);
};

<!-- palette page -->
<div data-role="page" id="palette">
    <!-- HEADER -->
    <div data-role="header" data-theme="b">
        <h1>Palette調色盤</h1>
    </div><!-- /HEADER -->
    <!-- CONTENT -->
    <div role="main" class="ui-content">
        <div data-role="fieldcontain">
            <label for="red">紅色</label>
            <input type="range" name="red" id="red" min="0" max="255" step="1" value="0" onchange="set_color();">
        </div>
        <div data-role="fieldcontain">
            <label for="green">綠色</label>
            <input type="range" name="green" id="green" min="0" max="255" step="1" value="0" onchange="set_color();">
        </div>
        <div data-role="fieldcontain">
            <label for="blue">藍色</label>
            <input type="range" name="blue" id="blue" min="0" max="255" step="1" value="0" onchange="set_color();">
        </div>
    </div><!-- /CONTENT -->
</div><!-- /HOME page -->

---
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>