Vue.jsでカラーコードからRGB値にサクッと変換する方法

色関連の解説をしたり、記事を書く時に、カラーコードのRGB値をダーッと一覧で見たい！という機会がちょこちょこありまして。グラフィックツールや既存のWebサイトでもできますが、もっとサクサク進めたくなって「Quick HEX to RGB」というツールを作りました。Vue.jsを使ってみたので、制作方法をかいつまんで紹介します。


↑私が10年以上利用している会計ソフト！

【Quick HEX to RGB】ってこんなサイト

カラーコードを入力するとその場でRGB値に変換されます。

Enter キーか「Add」ボタンクリックで下のリストに追加されます。色を比較したい時やたくさんのカラーコードを変換したい時に便利。

値はクリックするとコピーできます。

ぜひ実際に使って動作を確認してみてくださいね：Quick HEX to RGB

制作手順

Quick HEX to RGBではリストに追加したり、コピーできる機能がありますが、この記事ではカラーコードをRGB値に変換するまでの流れを説明します（すべて紹介しようと思ったら長くなったので…）。CSSについてはかなりはしょりますw

Vue.jsの基礎については、過去記事「WebデザイナーのためのVue.js事始め」も読んでみてくださいね。

1. ファイルの準備

まずは必要なファイルを作成しましょう。今回作成するのは以下の3つのファイルです：

  1. index.html
  2. app.js
  3. style.css

index.htmlにはベースとなるテキスト入力欄と、RGB値が表示される予定の部分を作っておきます。

HTML

<section id="app">
  <span class="hash">#</span>
  <input type="text" placeholder="00bbdd">
  <div class="new-color">
    <p class="copy-value">rgb(0, 187, 221)</p>
  </div>
</section>

Vue.jsとapp.jsは body の閉じタグの直前に記述して読み込むようにします。

HTML

・・・（省略）・・・
<!-- JS -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="app.js"></script>
</body>
</html>


CSSでそれなりにスタイルを整えて、ひとまずこのように表示させておきます。

2. カラーコードをRGB値に変換

それではVue.jsの登場です。入力フォームに入力した内容を取得できるようにします。「app」というIDのついた範囲で動作するよう指定し、入力フォームでは「newColor」の値を取得します。

JavaScript

new Vue({
  el: '#app',
  data: {
    newColor: ''
  }
});

index.html では作成しておいた input タグに v-model="newColor" を追加すればOK。

HTML

<input v-model="newColor" type="text" placeholder="00bbdd">

試しにindex.htmlに {{newColor}} と記述すると、その箇所に入力した文字が表示されるようになります。

うまく反映されています！

続いて、取得したカラーコードをRGB値に変換します。

JavaScript

new Vue({
  el: '#app',
  data: {
    newColor: ''
  },
  computed: {
    // Getting hex code and convert to RGB value
    rgbValue: function() {
      // Get each letter of hex code
      const hexValue = this.newColor.split('');
      let r, g, b;
      // 3 digit hex code (repeat same letter to make it as 6 digits)
      if (this.newColor.length === 3) {
        r = parseInt(hexValue[0].toString() + hexValue[0].toString(), 16);
        g = parseInt(hexValue[1].toString() + hexValue[1].toString(), 16);
        b = parseInt(hexValue[2].toString() + hexValue[2].toString(), 16);
        // 6 digt hex code
      } else if (this.newColor.length === 6) {
        r = parseInt(hexValue[0].toString() + hexValue[1].toString(), 16);
        g = parseInt(hexValue[2].toString() + hexValue[3].toString(), 16);
        b = parseInt(hexValue[4].toString() + hexValue[5].toString(), 16);
      }
      return r + ', ' + g + ', ' + b;
    }
  }
});

算出プロパティを使って計算式を書いています。まず this.newColor.split(''); で取得したカラーコードを1文字ずつ分解します。例えば「00bbdd」というカラーコードを入力されたら 0、0、b、b、d、d、の6文字に分解されます。こうすることでカラーコードが3桁の場合と6桁の場合で計算しやすくなります。

続いて、入力されたカラーコードが3桁だったら（ if (this.newColor.length === 3) ）、1文字目を2回繰り返して変換（R値）、2文字目を2回繰り返して変換（G値）…という計算をします。また、入力されたカラーコードが6桁だったら（ else if (this.newColor.length === 6 ）、1文字目と2文字目を組み合わせて変換（R値）、3文字目と4文字目を組み合わせて変換（G値）…と繰り返してRGB値を出します。

最後に return r + ', ' + g + ', ' + b; で値を出力できるようにします。

index.htmlの方には表示させたい箇所に rgb({{rgbValue}}) と書けば計算されたRGB値が表示されます！

HTML

<div class="new-color">
  <p class="copy-value">rgb({{rgbValue}})</p>
</div>

カラーコードからRGB値を出すだけならこれだけでOK！ですが、もう少し機能を足したいので続きます！

3. カラーサンプルを表示

このままではどんな色かわかりづらいので、色のサンプルを表示させます。JavaScriptを書き足す必要はありません。取得したカラーコードをそのままインラインCSSで背景色として指定するだけです。

HTMLに「color-sample」というクラスのついた div を用意しました。その div に対して :style="{background: '#' + newColor}" で背景色に設定します。

HTML

<div class="new-color">
  <div class="color-sample" :style="{background: '#' + newColor}"></div>
  <p class="copy-value">rgb({{rgbValue}})</p>
</div>

あとはCSSでそれっぽく装飾すればOK。

CSS

.color-sample {
    width: 60px;
    height: 40px;
    border-radius: .4rem;
    display: inline-block;
    margin-right: 20px;
}

カラーサンプルがあるとより使いやすくなったかなと思います！

4. 正しいカラーコード以外は — と表示

このままではカラーコードとして使えない文字列が入っていると計算できず「NaN」（= Not a Number）が表示されます。これではちょっと不格好なので、不正なカラーコードだと「—」と表示されるよう追記していきましょう。考え方としては以下の順序で実装していくことになります：

  1. 正しいカラーコードの条件を用意
  2. 入力されたカラーコードが正しい値か判定する
  3. 間違っていれば「—」と表示

ということで、まずは「正しいカラーコード」を用意します。これは正規表現という書き方で表していきます。カラーコードはA〜Fのアルファベット（大文字・小文字）と0〜9の数値で成り立っているので、正規表現で書くと /^([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/ と表されます。うぎゃ！記号だらけ！簡単に翻訳すれば「A〜Fのアルファベット（大文字＆小文字）と0〜9の数値の6桁または3桁」と書かれています。

これを data プロパティー内に定義しておきます。

JavaScript

new Vue({
  el: '#app',
  data: {
    newColor: '',
    validColor: /^([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
  },
  computed: {
    // ・・・省略・・・
  }
});

続いて、入力されたコードが定義した正しいカラーコードなのかを検証します。算出プロパティー内に、 if (this.validColor.test(this.newColor) !== true) で判定する条件分岐を記述しましょう。

JavaScript

new Vue({
  el: '#app',
  data: {
    newColor: '',
    validColor: /^([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
  },
  computed: {
    //  ・・・省略・・・
      if (this.validColor.test(this.newColor) !== true) {
        // この部分追加
      }
      return r + ', ' + g + ', ' + b;
    }
  }
});

最後にそのif文の中に r = g = b = '---'; で「—」と表示させるよう書きます。ここでは変数 r にも g にも b にも同じように「—」が入るよーという指定をしています。

JavaScript

// If color code is not valid, show '---'
if (this.validColor.test(this.newColor) !== true) {
  r = g = b = '---';
}

「www」と入力すると「—」が表示されますが、正しいカラーコードではRGB値が表示されました！

5. 入力前はRGB値・カラーサンプルを非表示にする

カラーコードを入力する前も「rgb(—, —, —)」が表示されているので、ここはフォームに何も入力されていなければ非表示にします。ここもJavaScriptを書く必要はありません。RGB値とカラーサンプルを囲っている div に v-if="newColor != ''" と書けばOK！これは、「もし（ v-if ）入力フォームの値が（ newColor ）空っぽじゃなかったらだったら（!= ''）、この div を表示するよー」という指定をしています。

HTML

<div class="new-color" v-if="newColor != ''">
  <div class="color-sample" :style="{background: '#' + newColor}"></div>
  <p class="copy-value">rgb({{rgbValue}})</p>
</div>

完成！

See the Pen
Generate HEX color code to RGB value w/ Vue.js by Mana (@manabox)
on CodePen.

入力したカラーコードをEnterで確定したり、ページ推移もないのでサクッと確認する時に便利です。

Vue.jsはまだまだ勉強中なので、もっと良い書き方があるのかもしれませんが、いじってると楽しいですねー！みなさんもぜひ「Quick HEX to RGB」を使ってみてくださいね！

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください！もちろん無料です！ :)