Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                #app
  .wrapper
    header
      h1.site-title.title.is-3 Material Design Colors
      form()#search.search
        .search__input.field.has-addons
          p.control
            input#search-keyword.input.is-rounded(type="text", placeholder="hex", :class="{ 'is-danger': isNotFound }")
          p.control
            button.button.is-rounded(type="submit", :class="{ 'is-danger': isNotFound }")
              i.fas.fa-search
              
    .pallete
      -
        // 彩度
        var saturation = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];

        // 色
        var colors = [
          { name: 'red', hex: ['ffebee', 'ffcdd2', 'ef9a9a', 'e57373', 'ef5350', 'f44336', 'e53935', 'd32f2f', 'c62828', 'b71c1c', 'ff8a80', 'ff5252', 'ff1744', 'd50000'] },
          { name: 'pink', hex: ['fce4ec', 'f8bbd0', 'f48fb1', 'f06292', 'ec407a', 'e91e63', 'd81b60', 'c2185b', 'ad1457', '880e4f', 'ff80ab', 'ff4081', 'f50057', 'c51162'] },
          { name: 'purple', hex: ['f3e5f5', 'e1bee7', 'ce93d8', 'ba68c8', 'ab47bc', '9c27b0', '8e24aa', '7b1fa2', '6a1b9a', '4a148c', 'ea80fc', 'e040fb', 'd500f9', 'aa00ff'] },
          { name: 'deep purple', hex: ['ede7f6', 'd1c4e9', 'b39ddb', '9575cd', '7e57c2', '673ab7', '5e35b1', '512da8', '4527a0', '311b92', 'b388ff', '7c4dff', '651fff', '6200ea'] },
          { name: 'indigo', hex: ['e8eaf6', 'c5cae9', '9fa8da', '7986cb', '5c6bc0', '3f51b5', '3949ab', '303f9f', '283593', '1a237e', '8c9eff', '536dfe', '3d5afe', '304ffe'] },
          { name: 'blue', hex: ['e3f2fd', 'bbdefb', '90caf9', '64b5f6', '42a5f5', '2196f3', '1e88e5', '1976d2', '1565c0', '0d47a1', '82b1ff', '448aff', '2979ff', '2962ff'] },
          { name: 'light blue', hex: ['e1f5fe', 'b3e5fc', '81d4fa', '4fc3f7', '29b6f6', '03a9f4', '039be5', '0288d1', '0277bd', '01579b', '80d8ff', '40c4ff', '00b0ff', '0091ea'] },
          { name: 'cyan', hex: ['e0f7fa', 'b2ebf2', '80deea', '4dd0e1', '26c6da', '00bcd4', '00acc1', '0097a7', '00838f', '006064', '84ffff', '18ffff', '00e5ff', '00b8d4'] },
          { name: 'teal', hex: ['e0f2f1', 'b2dfdb', '80cbc4', '4db6ac', '26a69a', '009688', '00897b', '00796b', '00695c', '004d40', 'a7ffeb', '64ffda', '1de9b6', '00bfa5'] },
          { name: 'green', hex: ['e8f5e9', 'c8e6c9', 'a5d6a7', '81c784', '66bb6a', '4caf50', '43a047', '388e3c', '2e7d32', '1b5e20', 'b9f6ca', '69f0ae', '00e676', '00c853'] },
          { name: 'light green', hex: ['f1f8e9', 'dcedc8', 'c5e1a5', 'aed581', '9ccc65', '8bc34a', '7cb342', '689f38', '558b2f', '33691e', 'ccff90', 'b2ff59', '76ff03', '64dd17'] },
          { name: 'lime', hex: ['f9fbe7', 'f0f4c3', 'e6ee9c', 'dce775', 'd4e157', 'cddc39', 'c0ca33', 'afb42b', '9e9d24', '827717', 'f4ff81', 'eeff41', 'c6ff00', 'aeea00'] },
          { name: 'yellow', hex: ['fffde7', 'fff9c4', 'fff59d', 'fff176', 'ffee58', 'ffeb3b', 'fdd835', 'fbc02d', 'f9a825', 'f57f17', 'ffff8d', 'ffff00', 'ffea00', 'ffd600'] },
          { name: 'amber', hex: ['fff8e1', 'ffecb3', 'ffe082', 'ffd54f', 'ffca28', 'ffc107', 'ffb300', 'ffa000', 'ff8f00', 'ff6f00', 'ffe57f', 'ffd740', 'ffc400', 'ffab00'] },
          { name: 'orange', hex: ['fff3e0', 'ffe0b2', 'ffcc80', 'ffb74d', 'ffa726', 'ff9800', 'fb8c00', 'f57c00', 'ef6c00', 'e65100', 'ffd180', 'ffab40', 'ff9100', 'ff6d00'] },
          { name: 'deep orange', hex: ['fbe9e7', 'ffccbc', 'ffab91', 'ff8a65', 'ff7043', 'ff5722', 'f4511e', 'e64a19', 'd84315', 'bf360c', 'ff9e80', 'ff6e40', 'ff3d00', 'dd2c00'] },
          { name: 'brown', hex: ['efebe9', 'd7ccc8', 'bcaaa4', 'a1887f', '8d6e63', '795548', '6d4c41', '5d4037', '4e342e', '3e2723'] },
          { name: 'grey', hex: ['fafafa', 'f5f5f5', 'eeeeee', 'e0e0e0', 'bdbdbd', '9e9e9e', '757575', '616161', '424242', '212121'] },
          { name: 'blue grey', hex: ['eceff1', 'cfd8dc', 'b0bec5', '90a4ae', '78909c', '607d8b', '546e7a', '455a64', '37474f', '263238'] }
        ];


      table
        each color in colors
          -
            // HEXをRGBに変換する
            function hexToRGB(hex) {
              return [
                parseInt((hex).substring(0, 2), 16),
                parseInt((hex).substring(2, 4), 16),
                parseInt((hex).substring(4, 6), 16),
              ];
            }

            // hexから輝度を取得する
            function brightness(rgb) {
              const r = 0.298912;
              const g = 0.586611;
              const b = 0.114478;
              return Math.floor(r * rgb[0] + g * rgb[1] + b * rgb[2]);
            }

            // hexの色が明るいかを判定
            function isBright(hex, threshold) {
              return brightness(hexToRGB(hex)) >= threshold;
            }

          tr
            th
              .color__bar(style=`background-color: #${color.hex[4]};`)
              .color__name #{color.name}

            each hex, index in color.hex
              td(class= isBright(hex, 140) ? 'dark' : '')
                a.color__preview(@click.prevent=`selectColor('${hex}', '${color.name}|${saturation[index]}')`, style=`background-color: #${hex};`, data-hex=`${hex}`, data-name=`${color.name}|${saturation[index]}`, :class=`{ 'selected': this.hex === '${hex}' }`)
                  .color__variants(class= isBright(hex, 140) ? 'dark' : '') #{saturation[index]}

  .selected-detail(:class="{ show: isSelect, 'is-dark': isBright }", :style='{ backgroundColor: `#${hex}` }')
  
    .selected-detail__header
      h3.selected-color.title.is-3
        .selected-color__label(v-for="labelItem in this.label")
          span {{ labelItem }}
          
      a.selected-detail__close(@click.prevent="clear")
        svg(width="100", height="100", viewBox="0 0 100 100", xmlns="http://www.w3.org/2000/svg")
          path(d="m99.985 7.1-42.907 42.907 42.813 42.813-7.071 7.071-42.813-42.813-42.907 42.907-7.085-7.085 42.907-42.907-42.813-42.813 7.071-7.071 42.813 42.813 42.907-42.907z", fill-rule="evenodd")

    .selected-detail__content.dragscroll
      //- HEX
      a.color-code(:data-clipboard-text="this.hex | hexPrefix")
        label.color-code__label HEX
        p.color-code__value
          | {{ this.hex | hexPrefix }}
          i.far.fa-copy

      //- RGB
      a.color-code(:data-clipboard-text="this.rgb | commaSeparated")
        label.color-code__label RGB
        p.color-code__value
          | {{ this.rgb | commaSeparated }}
          i.far.fa-copy

      //- RGB (Percent-based)
      a.color-code(:data-clipboard-text="this.rgbPer | commaSeparated")
        label.color-code__label RGB (Percent-based)
        p.color-code__value
          | {{ this.rgbPer | commaSeparated }}
          i.far.fa-copy
          
      //- Swift UIColor RGB
      a.color-code(:data-clipboard-text="this.rgbPer | swiftUIColor")
        label.color-code__label Swift UIColor RGB
        p.color-code__value
          | {{ this.rgbPer | swiftUIColor }}
          i.far.fa-copy

      //- CMYK
      a.color-code(:data-clipboard-text="this.cmyk | cmyk")
        label.color-code__label CMYK
        p.color-code__value
          | {{ this.cmyk | cmyk }}
          i.far.fa-copy
          
          
          
          
              
            
!

CSS

              
                $grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);  // ブレイクポイント


html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: #f5f5f5;
}

.wrapper {
  display: block;
  padding-bottom: 20px;
}

header {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  
  @media screen and (max-width: map-get($grid-breakpoints, md) - 1px) {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }
}

.site-title {
  margin-bottom: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  @media screen and (max-width: map-get($grid-breakpoints, md) - 1px) {
    width: 100%;
    margin-bottom: 1rem !important;
    font-size: 1.2rem !important;
  }
}

.search {
  
  @media screen and (min-width: map-get($grid-breakpoints, md)) {
    margin-left: auto;
  }
  
  .button {
    color: #bdbdbd;
    
    &.is-danger {
      color: #fff !important;
    }
  }
}

// .search__input {
//   margin-bottom: 0;
// }

.pallete {
  
  table {
    width: 100%;
    
    // 色名
    th {
      position: relative;
      width: 60px;
      height: 60px;
      padding: 5px 5px 5px 9px;
      font-weight: bold;
      
      .color__bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 60px;
      }
      
      // 色名
      .color__name {
        opacity: 0.9;
        line-height: 1.2rem;
        color: #212121;
        font-size: 0.875rem;
        text-transform: capitalize;
      }
    }
    
    // 色
    td {
      width: 50px;  // 同じ幅にする
      height: 60px;
      
      &.dark {
        background-color: #212121;  // 選択時に囲う色
      }
    }
  }
}


// 色のプレビュー
.color__preview {
  display: block;
  width: 100%;
  height: 60px;
  padding: 5px;
  line-height: 1rem;
  transition: all 250ms ease-out;
  
  &.selected {
    $margin: 5px;
    
    width: calc(100% - #{$margin * 2});
    height: 60px - $margin * 2;
    margin-top: $margin;
    margin-left: $margin;
  }
}

.color__variants {
  opacity: 0.3;
  font-size: 0.875rem;
  color: #fafafa;
  transition: opacity 250ms ease-out;
  text-overflow: clip;
  overflow: hidden;
  
  // 色が明るいときに文字を暗くする
  &.dark {
    color: #212121;
  }
  
  @media screen and (max-width: 480px) {
    display: none;
  }
  
  @media screen and (min-width: 480px + 1px) and (max-width: map-get($grid-breakpoints, sm)) {
    width: 15px;
  }
  
  @media screen and (min-width: map-get($grid-breakpoints, sm) + 1px) and (max-width: map-get($grid-breakpoints, md) - 1px) {
    width: 25px;
  }
}


// 選択中の色の詳細
.selected-detail {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.4);
  overflow: hidden; // height: 0 で非表示にするため
  transition:
    background-color 200ms ease-out,
    height 200ms ease-out;
  
  // 表示
  &.show {
    height: auto;
  }
  
  // 暗いモード
  // 選択した色が明るい色の場合、白文字だと見えなくなるので 
  &.is-dark {
    .selected-detail__close {
      svg {
        fill: #424242;
      }
    }
    
    .selected-color {
      color: #212121;
    }
    
    .color-code {
      $background-color: #212121;
      
      background-color: $background-color;
      border-color: darken($background-color, 10%);

      &:link,
      &:visited {
        background-color: $background-color;
      }

      &:hover,
      &:active {
        background-color: darken($background-color, 10%);
      }
    }
    
    .color-code__value {
      color: #fff;

      .far {
        color: #424242;
      }
    }
  }
}

.selected-detail__header {
  padding: 20px 20px 0 20px;
}

// 閉じるボタン
.selected-detail__close {
  position: absolute;
  top: 5px;
  right: 20px;
  color: #eee;
  opacity: 0.6;
  font-size: 1.6rem;
  transition: opacity 250ms ease-out;
  
  &:hover,
  &:active {
    opacity: 1;
  }
  
  svg {
    width: 1rem;
    height: auto;
    fill: #eee;
  }
}

// 選択した色
.selected-color {
  display: flex;
  justufy-content: flex-end;
  margin-bottom: 0.8rem !important;
  color: #fff;
  transition: color 200ms ease-out;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  text-transform: capitalize;
}

.selected-color__label {
  
  // 区切り
  &:not(:last-child) {
    &::after {
      content: '/';
      display: inline-block;
      margin-left: 0.3em;
      margin-right: 0.3em;
      opacity: 0.5;
    }
  }
}


.selected-detail__content {
  display: flex;
  padding: 0 20px 20px 20px;
  flex-wrap: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}

.color-code {
  $background-color: #fff;
  
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background-color: $background-color;
  border-radius: 4px;
  border: solid 1px darken($background-color, 10%);
  transition:
    background-color 200ms ease-out,
    border-color 200ms ease-out;
  
  &:not(:last-of-type) {
    margin-right: 10px;
  }
  
  &:link,
  &:visited {
    background-color: $background-color;
  }
  
  &:hover,
  &:active {
    background-color: darken($background-color, 10%);
  }
}

.color-code__label {
  font-size: 0.75rem;
  color: #757575;
  transition: color 200ms ease-out;
}

.color-code__value {
  font-size: 1.125rem;
  white-space: nowrap;
  color: #212121;
  font-family: 'Source Code Pro', monospace;
  transition: color 200ms ease-out;
  
  .far {
    margin-left: 0.5em;
    color: #bdbdbd;
  }
}


// ドラッグでスクロールできる箇所
.dragscroll {
  cursor: grab;
}
              
            
!

JS

              
                const settings = {
  bright: 140 // 明るい色と判断する輝度(文字などを暗くする)
};


// state初期値
const initialState = {
  hex: null,  // 色(hex)
  label: null, // 色名
  keywords: '', // 検索キーワード
  isNotFound: false // 検索ワードで見つからなかった
};


/**
 * HEXからRGBに変換する
 *
 * @param {string} hex HEXカラー
 * @return {number[]} [R, G, B]
 */
function hexToRgb (hex) {
  return [
    parseInt((hex).substring(0, 2), 16),
    parseInt((hex).substring(2, 4), 16),
    parseInt((hex).substring(4, 6), 16)
  ];
}

/**
 * RGBの近い色を取得する
 *
 *
 *
 */
function near (rgb) {
  
}

// DOMからHEX, RGBを取得しておく
const colorPreview = document.querySelectorAll('.color__preview') || [];
const colors = [];
colorPreview.forEach(function (node) {
  const hex = node.dataset.hex;
  colors.push({
    label: node.dataset.name,
    hex,
    rgb: hexToRgb(hex)
  });
});

console.log('colors', colors);


const app = new Vue({
  el: '#app',
  data: initialState,
  
  mounted: function () {
    // ESCキーで選択を解除
    document.addEventListener('keydown', (e) => {
      if (e.keyCode === 27) {
        // ESC
        this.clear();
      }
    });
  },
  
  methods: {
    
    /**
     * 色を選択する
     *
     * @param {string} hex HEXカラー
     * @param {string} label 色のラベル
     */
    selectColor: function (hex, label) {
      this.hex = hex;
      this.label = label.split('|');
    },
    
    /**
     * 色を検索する
     *
     * @param {string} keywords 検索ワード
     */
    search: function (keywords) {
      this.keywords = keywords;
    },
    
    /**
     * 選択を解除
     *
     */
    clear: function () {
      this.hex = null;
    },
    
    /**
     * RGBから輝度を計算する
     *
     * @param {number[]} rgb [r, g, b]
     */
    brightness: function (rgb) {
      const r = 0.298912;
      const g = 0.586611;
      const b = 0.114478;
      return Math.floor(r * rgb[0] + g * rgb[1] + b * rgb[2]);
    },
    
    /**
     * 小数点を0〜255にする
     *
     * @param {number} num 数字
     * @return {number} 0 - 255に変換した数字
     */
    decimalToHex: function (num) {
      if (String(num).match(/^-?\d\.\d+$/)) {
        return Math.min(Math.max(num / 255, 0), 255);
      }
    },
    
    /**
     * RGBで近いものを返す
     *
     * @param {string[]} rgb [R, G, B]
     * @return {string} 該当した色情報
     */
    searchByRGB: function (rgb) {
      // TODO colorsから一番近い色を返す
    },
    
    /**
     * HEXで近いものを返す
     *
     * @param {string} hex hexカラー。先頭に#がある場合もある \#?[0-9a-fA-F]{3,6}
     * @return {string} 該当した色情報
     */
    searchByHex: function (hex) {
      const hasPrefix = /^\#/.test(hex);  // 先頭に#がついているか
      let hexStr = hex.replace(/^\#/, '');  // 先頭の#なしにしておく
      let matched = []; // 条件に一致した色 { label: string, hex: string, rgb: number[] }
      
      // まずは文字列が一致する色を探す
      if (hexStr.length === 6) {
        // 完全一致で検索する
        // 大文字小文字を判別しない
        matched = colors.filter( color => {
          const regexp = new RegExp(hexStr, 'i');
          return regexp.test(color.hex);
        });
      }
      else if (hexStr.length === 3) {
        // 3文字の場合
        // 部分一致なのかショート記法なのか判断が難しい
        // マッチしたほうを採用する
        
        const hexLong = `${_.pad(hexStr.charAt(0), 2, hexStr.charAt(0))}${_.pad(hexStr.charAt(1), 2, hexStr.charAt(1))}${_.pad(hexStr.charAt(2), 2, hexStr.charAt(2))}`;  // #RGB → #RRGGBB にしてみる
        
        // ショート記法だと判断して探す
        matched = colors.filter( color => color.hex === hexLong);
        
        if (matched.length === 0) {
          // ショート記法で見つからなかった場合、文字列一致で探す
          if (hasPrefix === true) {
            // 前方一致
            colors.filter( color => color.hex.startsWith(hexStr));
          }
          else {
            // 部分一致
            colors.filter( color => color.hex.indexOf(hexStr) >= 0);
          }
        }
      }
      else {
        // 4文字〜5文字
        // 中途半端なので部分一致で探す
        
      }
      
      // // hexが6桁未満なら文字を埋める
      // if (hex.length === 3) {
      //   // 全部同じ文字なら同じ文字で埋める
      //   // ショート記法を展開する
      //   // fea → ffeeaa
      //   hexStr = `${_.pad(hex.charAt(0), 2, hex.charAt(0))}${_.pad(hex.charAt(1), 2, hex.charAt(1))}${_.pad(hex.charAt(2), 2, hex.charAt(2))}`;
      // }
      // else if (hex.length < 6) {
      //   // 足りない文字を'f'で埋める
      //   hexStr = _.pad(hex, 6, 'f');
      // }
      
      // 曖昧検索
      // 文字列が一致しなかった場合、近い色を検索する
      if (matched.length === 0) {
        
        // TODO 3文字の場合、#RGBなのか部分検索なのか分からない
        
        hexStr = hex.length === 3 ? `${_.pad(hex.charAt(0), 2, hex.charAt(0))}${_.pad(hex.charAt(1), 2, hex.charAt(1))}${_.pad(hex.charAt(2), 2, hex.charAt(2))}` : _.pad(hex, 6, 'f');
        
        // RGBごとに数字の差を計算
        // 複数候補が合った場合は、同じ値が多い方にする
        const rgb = hexToRgb(hexStr);
        
        console.log('rgb', rgb);
      }
      
      return matched[0];
    }
  },
  
  computed: {
    /**
     * 色を選択しているか
     */
    isSelect: function () {
      return this.hex !== null;
    },
    
    /**
     * hexからrgbに変換する
     *
     * @return {number[]|null} RGBの配列
     */
    rgb: function () {
      return this.hex !== null ? hexToRgb(this.hex) : null;
    },
    
    /**
     * 明るい色?
     *
     * @return {boolean}
     */
    isBright: function () {
      return this.isSelect === true ? this.brightness(this.rgb) >= settings.bright : false;
    },
    
    /**
     * HEXからRGB(%基準)を計算する
     *
     * @return {number[]} RGBの配列
     */
    rgbPer: function () {
      return this.isSelect === true ? this.rgb.map((value) => (value / 255)) : null;
    },
    
    /**
     * RGBからCMYKを計算する
     *
     * @param {number[]} [C, M, Y, K]
     */
    cmyk: function () {
      let result = null;  // c, m, y, k
      
      if (this.isSelect === true) {
          
        let r = this.rgb[0];
        let g = this.rgb[1];
        let b = this.rgb[2];
      
        let computed = {
          c: 0,
          m: 0,
          y: 0,
          k: 0
        }

        // BLACK
        if (r === 0 && g === 0 && b === 0) {
          computed.k = 1;
          result = [0, 0, 0, 1]
        }
        else {
          computed.c = 1 - (r / 255);
          computed.m = 1 - (g / 255);
          computed.y = 1 - (b / 255);

          const minCMY = Math.min(computed.c, Math.min(computed.m, computed.y));
          computed.c = (computed.c - minCMY) / (1 - minCMY);
          computed.m = (computed.m - minCMY) / (1 - minCMY);
          computed.y = (computed.y - minCMY) / (1 - minCMY);
          computed.k = minCMY;

          result = [
            computed.c,
            computed.m,
            computed.y,
            computed.k
          ];
        }
      }
      
      return result;
    }
  },
  
  watch: {
    /**
     * 検索された
     *
     * @param {string} 検索キーワード
     */
    keywords: function (keywords) {
      // とりあえず英数字の塊を見つける
      const keyword = keywords.match(/^(\d?\.\d{1,3}|\d\.?\d{0,3}|\#?[0-9a-fA-F]{3,6})$/g);
      
      console.log('search', keywords, keyword);
      
      // マッチした数でフォーマットを決める
      // 3つ以上: RGB、2つ以下: HEX
      if (Array.isArray(keyword)) {
        if (keyword.length >= 3) {
          // RGBで検索する
          // 先頭3件にする
          let rgb = keyword.slice(0, 2);
          
          // パーセントベースを0 - 255に統一しておく
          color.map( value => this.decimalToHex(value) );
          
          // RGBで探す
          this.searchByRGB(rgb);
        }
        else {
          // HEXで探す
          const found = this.searchByHex(keyword[0]);
          
          if (found) {
            // 見つかった
            this.selectColor(found.hex, found.label);
          }
          else {
            // 見つからなかった
            this.isNotFound = true;
          }
        }
      }
      else {
        // 条件にマッチしない
        this.isNotFound = true;
      }
    },
    
    /**
     * 色が選択された
     *
     * @param {boolean} val
     */
    isSelect: function (val) {
      if (val === true) {
        // 検索の見つからないのをクリアする
        this.isNotFound = false;
      }
    }
  },
  
  filters: {
    
    /**
     * HEXのプリフィックスをつける
     *
     * @param {string} hex
     */
    hexPrefix: function (hex) {
      return `#${hex}`;
    },
    
    /**
     * RGBをカンマ区切りで表示
     *
     * @param {number[]} rgb [R, G, B]
     */
    commaSeparated: function (rgb) {
      return Array.isArray(rgb) ? rgb.map((value) => Math.round(value * 1000) / 1000).join(', ') : rgb;
    },
    
    /**
     * CMYKをカンマ区切りで表示
     *
     * @param {number[]} cmyk [C, M, Y, K]
     */
    cmyk: function (cmyk)  {
      return Array.isArray(cmyk) ? cmyk.map((value, index) => Math.round(value * 100)).join(', ') : cmyk;
	},
	
	/**
	 * RGBのパーセントをSwift UIColorのフォーマットにする
	 * 
	 * @param {number[]} rgbPer [R, G, B]
	 */
	swiftUIColor: function (rgbPer) {
		if (Array.isArray(rgbPer)) {
			rgbPer = rgbPer.map((value, index) => Math.round(value * 1000) / 1000);	// 小数点3位までにする
			return `red: ${rgbPer[0]}, green: ${rgbPer[1]}, blue: ${rgbPer[2]}, alpha: 1.0`;
		}
		else {
			return rgbPer;
		}
	}
  }
});


// 検索
const search = document.querySelector('#search');
search.addEventListener('submit', function (e) {
  app.search(document.querySelector('#search-keyword').value.trim());
  
  // initialState.search = e.
  e.preventDefault();
});


// 色をコピー
new ClipboardJS('.color-code');

// コピーしたときのツールチップ
tippy('.color-code', {
  content: 'copied!',
  trigger: 'click',
  placement: 'bottom'
});


// TODO カラーコードはドラッグでスクロールさせたい

              
            
!
999px

Console