Vue

by ken3desu

HTML

<div id="app" class="flex-column">
<div class="d-flex" style="margin-bottom:2em">
  <div class="flex-column">
    <div class="input-box">
        <label for="hue">色相（Hue）:</label>
        <input type="range" v-model="hue" id="hue" min=0 max=360>
    </div>
    <div class="input-box">
        <label for="saturation">彩度（Saturation）:</label>
        <input type="range" v-model="saturation"  id="saturation" min=0 max=100>
    </div>
    <div class="input-box">
        <label for="lightness">輝度（Lightness）</label>
        <input type="range" v-model="lightness" id="lightness" min=0 max=100>
    </div>
  </div>
  <div 
  :style="{
    background: 'hsl('+hue+','+saturation+'%,'+lightness+'%)',
    border: 'solid',
    height: '5em',
    width: '5em',
    marginLeft: '1em',
  }"
  >
    &nbsp;
  </div>
</div>
<div class="d-flex">
  <div class="flex-column">
    <div class="input-box">
        <label for="hue">赤（Red）:</label>
        <input type="range" v-model="red" id="red" min=0 max=255>
    </div>
    <div class="input-box">
        <label for="lightness">緑（Green）</label>
        <input type="range" v-model="green" id="green" min=0 max=255>
    </div>
    <div class="input-box">
        <label for="saturation">青（Blue）:</label>
        <input type="range" v-model="blue"  id="blue" min=0 max=255>
    </div>
  </div>
  <div 
  :style="{
    background: 'rgb('+red+','+green+','+blue+')',
    border: 'solid',
    height: '5em',
    width: '5em',
    marginLeft: '1em',
  }"
  >
    &nbsp;
  </div>
</div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.d-flex {
  display:flex;
}

.flex-column {
  display:flex;
  flex-direction:column;
}

.input-box {
    display: flex;
    justify-content: space-between;
}

Vue

new Vue({
  el: "#app",
  data: {
    hue : 0,
    saturation : 50,
    lightness : 50,
    red : 191,
    green : 64,
    blue : 64,
  },
})