JSFiddle - React, Tailwind, and code Playground

by nullice

HTML

<script src="http://77we48.com1.z0.glb.clouddn.com//jscdn/ichi-color&amp;0001.js"></script>


<script src="http://77we48.com1.z0.glb.clouddn.com//jscdn/ichi-color&0001.js"></script>


<div style="width: 100px; height: 20px; background: {{scolor1.hex}};"></div>

<div id="colorboard">

    R:<input v-model="scolor1.r" type="text" class="exmo_input_text">
    G:<input v-model="scolor1.g" type="text" class="exmo_input_text">
    B:<input v-model="scolor1.b" type="text" class="exmo_input_text">
    <br>
    int:<input v-model="scolor1.int" type="text" class="exmo_input_text">
    hex:<input v-model="scolor1.hex" type="text" class="exmo_input_text">

    <br> <br>
    H:<input  max="360" min="0"  v-model="scolor1.hsv.h" type="range" class="exmo_range" >{{scolor1.hsv.h}}
    <br>
    S:<input  max="100" min="0"  v-model="scolor1.hsv.s" type="range" class="exmo_range" >{{scolor1.hsv.s}}
    <br>
    V:<input  max="100" min="0"  v-model="scolor1.hsv.v" type="range" class="exmo_range" >{{scolor1.hsv.v}}

    <br> <br>
    H:<input  max="360" min="0"  v-model="scolor1.hsl.h" type="range" class="exmo_range" >{{scolor1.hsl.h}}
    <br>
    S:<input  max="100" min="0"  v-model="scolor1.hsl.s" type="range" class="exmo_range" >{{scolor1.hsl.s}}
    <br>
    L:<input  max="100" min="0"  v-model="scolor1.hsl.l" type="range" class="exmo_range" >{{scolor1.hsl.l}}

    <br> <br>
    H:<input  max="360" min="0"  v-model="scolor1.hwb.h" type="range" class="exmo_range" >{{scolor1.hwb.h}}
    <br>
    W:<input  max="100" min="0"  v-model="scolor1.hwb.w" type="range" class="exmo_range" >{{scolor1.hwb.w}}
    <br>
    B:<input  max="100" min="0"  v-model="scolor1.hwb.b" type="range" class="exmo_range" >{{scolor1.hwb.b}}
</div>

JavaScript

new Vue({
    el: '#colorboard',
    data: {
        scolor1: IchiColor("#FFF"),
    }
})