Vue color picker

index.pug

#app
   picker

script.babel

const COLORS = {
   OPEN: {
      red: ['FFF5F5', 'FFE3E3', 'FFC9C9', 'FFA8A8', 'FF8787', 'FF6B6B', 'FA5252', 'F03E3E', 'E03131', 'C92A2A'],
      pink: ['FFF0F6', 'FFDEEB', 'FCC2D7', 'FAA2C1', 'F783AC', 'F06595', 'E64980', 'D6336C', 'C2255C', 'A61E4D'],
      grape: ['F8F0FC', 'F3D9FA', 'EEBEFA', 'E599F7', 'DA77F2', 'CC5DE8', 'BE4BDB', 'AE3EC9', '9C36B5', '862E9C'],
      violet: ['F3F0FF', 'E5DBFF', 'D0BFFF', 'B197FC', '9775FA', '845EF7', '7950F2', '7048E8', '6741D9', '5F3DC4'],
      indigo: ['EDF2FF', 'DBE4FF', 'BAC8FF', '91A7FF', '748FFC', '5C7CFA', '4C6EF5', '4263EB', '3B5BDB', '364FC7'],
      blue: ['E8F7FF', 'CCEDFF', 'A3DAFF', '72C3FC', '4DADF7', '329AF0', '228AE6', '1C7CD6', '1B6EC2', '1862AB'],
      cyan: ['E3FAFC', 'C5F6FA', '99E9F2', '66D9E8', '3BC9DB', '22B8CF', '15AABF', '1098AD', '0C8599', '0B7285'],
      teal: ['E6FCF5', 'C3FAE8', '96F2D7', '63E6BE', '38D9A9', '20C997', '12B886', '0CA678', '099268', '087F5B'],
      green: ['EBFBEE', 'D3F9D8', 'B2F2BB', '8CE99A', '69DB7C', '51CF66', '40C057', '37B24D', '2F9E44', '2B8A3E'],
      lime: ['F4FCE3', 'E9FAC8', 'D8F5A2', 'C0EB75', 'A9E34B', '94D82D', '82C91E', '74B816', '66A80F', '5C940D'],
      yellow: ['FFF9DB', 'FFF3BF', 'FFEC99', 'FFE066', 'FFD43B', 'FCC419', 'FAB005', 'F59F00', 'F08C00', 'E67700'],
      orange: ['FFF4E6', 'FFE8CC', 'FFD8A8', 'FFC078', 'FFA94D', 'FF922B', 'FD7E14', 'F76707', 'E8590C', 'D9480F'],
      gray: ['F8F9FA', 'F1F3F5', 'E9ECEF', 'DEE2E6', 'CED4DA', 'ADB5BD', '868E96', '495057', '343A40', '212529']
      }
}

const Picker = Vue.component('picker', {
   template: `
      <div class="picker">
         <header class="header">
            <div class="options">
               <div class="option" v-for="(value, key) in colors.OPEN"
               v-bind:style="{
                  'background-color': key
               }"
               v-on:click="setPallette(key)"
               v-bind:class="pallette === key ? 'active' : ''"
               ></div>
            </div>
            <div class="pallette-name">
                  <label>Palette:</label>&nbsp;{{pallette}}
            </div>
            <div class="chosen">
               <label>Chosen color:</label>&nbsp;{{chosenBoxColor === null ? '' : '#' + chosenBoxColor}}&nbsp;
               <span v-bind:style="{'background-color': '#' + chosenBoxColor}"></span>
            </div>
         </header>
         <div class="picker-palette">
            <div class="color">
               <div 
                  class="color-bar" 
                  v-for="shade in shades" 
                  v-bind:model="shade"
                  v-bind:id="'color-#' + shade"
                  v-bind:style="{
                     'background-color': '#' + shade}"
                  v-on:click="getColor(shade)"
                  v-bind:class="shade === chosenBoxColor ? 'active' : ''">
                  {{shade}}
               </div>
            </div>
            
         </div>
      </div>
   `,
   data() {
      return {
         colors: COLORS,
         shades: COLORS.OPEN.red,
         chosenBox: false,
         chosenBoxColor: 'FFF5F5',
         pallette: 'red'
      }
   },
   methods: {
      getColor: function(color) {
         this.chosenBox = true;
         this.chosenBoxColor = color;
      },
      setPallette: function(k) {
         this.shades = eval('COLORS.OPEN.' + k);
         this.pallette = k;
      }
   }
})

new Vue({
   el: '#app',
   components: {
      'picker': Picker
   }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body {
   * {
      box-sizing: border-box;
      transition: 200ms all ease-in-out;
      font-family: 'Roboto', sans-serif;
   }
}

.picker {
   width: 100%;
   min-height: 99vh;
}

.picker-palette {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   flex-direction: column;
}

.color {
   width: 100%;
   height: inherit;
   padding-top: 60px;
}

.color-bar {
   width: 100%;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   // margin: 6px 0;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
   &:hover {
      cursor: pointer;
   }
}

.header {
   flex-direction: row;
   position: fixed;
   background-color: white;
   z-index: 10;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   min-height: 60px;
   box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23);
   display: flex;
   align-items: center;
   justify-content: flex-start;
   @media only screen and (max-width: 1120px) {
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding: 10px;
   }
}

.options {
   flex-direction: row;
   background-color: white;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 60px;
   box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: space-around;
   box-shadow: none;
   max-width: 700px;
   z-index: 0;
}

.option {
   display: flex;
   width: 50px;
   height: 50px;
   transition: 100ms all ease-in-out;
   border-radius: 2px;
   &:hover {
      cursor: pointer;
   }
}

.chosen {
   min-width: 200px;
   max-width: 300px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 0 6px;
}

label {
   font-weight: bold;
}

.pallette-name {
   min-width: 150px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-left: 10px;
}

.active {
   transition: 100ms all ease-in-out;
   border: 2px solid black;
}

span {
   width: 40px;
   height: 40px;
   border-radius: 2px;
}

vue-color-picker.markdown

Vue color picker

Simple color picker written in Vue, that uses Open palette: https://yeun.github.io/open-color/

A Pen by Jakub A. on CodePen.

License.