Colors with VueJS

by edgardleal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<div id="app">
<table border="1">
  <tr><td colspan="5" v-bind:style="{'background': color.color}">&nbsp;</td></tr>
  <tr>
    <td :style="{background: color.lighten['5%']}">&nbsp;</td>
    <td :style="{background: color.lighten['10%']}">&nbsp;</td>
    <td :style="{background: color.lighten['15%']}">&nbsp;</td>
    <td :style="{background: color.lighten['20%']}">&nbsp;</td>
    <td :style="{background: color.lighten['25%']}">&nbsp;</td>
  </tr>
  <tr>
    <td :style="{background: color.darken['5%']}">&nbsp;</td>
    <td :style="{background: color.darken['10%']}">&nbsp;</td>
    <td :style="{background: color.darken['15%']}">&nbsp;</td>
    <td :style="{background: color.darken['20%']}">&nbsp;</td>
    <td :style="{background: color.darken['25%']}">&nbsp;</td>
  </tr>
  
</table>
  <input type="text" v-model="text" />
  <br />
  <span>{{text}}</span>
</div>

JavaScript

var color = {
  "color": "#5362b5",
  "lighten": {
    "5%": "#6572bd",
    "10%": "#8893cc",
    "15%": "#bec4e3",
    "20%": "#ffffff",
    "25%": "#ffffff"
  },
  "darken": {
    "5%": "#4856a7",
    "10%": "#384483",
    "15%": "#21284e",
    "20%": "#030306",
    "25%": "#000000"
  }
};
new Vue({
            el: "#app",
            data: {
              text: "Ok",
              color: color
            }
});