カラーコードと RGB 表記を相互変換する ccc : Colour Code Converter を作った

#ff0000 とか #f00 とかいうように表記するカラーコードと、rgb(255, 0, 0) というように表記される RGB の値を相互変換する npm パッケージを作った。その名も「Colour Code Converter」。

目次

• パッケージ紹介
• CLI での使い方
• API としての使い方
• 以上

パッケージ紹介

Colour Code Converter は、@neos21/ccc というパッケージ名で npmjs.org に公開している。GitHub リポジトリと紹介ページは以下。

• GitHub - Neos21/ccc: ccc : Colour Code Converter
• ccc : Colour Code Converter - Neo's GitHub Pages

CLI での使い方

まずはコマンドラインでの使い方。npm パッケージとしてグローバルインストールするのが使いやすいだろうか。

$ npm install -g @neos21/ccc

グローバルインストールすると、ccc というコマンドで使えるようになるので、以下のようにカラーコードもしくは RGB 値を与えてやる。

# カラーコードと読み取れる場合
$ ccc 39c         # -> 51,153,204
$ ccc ff8000      # -> 255,128,0
$ ccc '#208'      # -> 34,0,136
$ ccc '#007AFF'   # -> 0,122,255

# RGB 値と読み取れる場合
$ ccc 0 128 255   # -> #0080ff
$ ccc 255,30,48   # -> #ff1e30
$ ccc 2, 15, 128  # -> #020f80

カラーコードの場合は、3桁もしくは6桁の16進数、もしくはシングルクォートで囲んでシャープ記号付きのカラーコードを渡せる。アルファベットの大文字・小文字は区別しない。

一方、RGB 値の場合は、3つの数値をスペースで区切るか、カンマで区切るか、カンマ + スペースで区切るか、のいずれかの書き方に対応している。

コマンドライン上でサッと変換したい時は使いやすいだろう。

API としての使い方

次に、本モジュールをアプリケーションに組み込んで使ったりする方法。アプリの dependencies として追加するようにインストールする。

$ npm install --save @neos21/ccc

認識できる書き方は以下のとおり。

const ccc = require('@neos21/ccc');

// カラーコードを指定した場合 : RGB 値を配列にして返す
ccc('39c');          // -> [ 51, 153, 204 ]
ccc('ff8000');       // -> [ 255, 128, 0 ]
ccc('#007AFF');      // -> [ 0, 122, 255 ]

// RGB 値を文字列 or 配列 or 引数3つで渡した場合 : カラーコードを文字列で返す
ccc('0, 128, 255');  // -> '#0080ff'
ccc([255, 30, 48]);  // -> '#ff1e30'
ccc(20, 249, 150);   // -> '#14f996'

// 不正な値を渡した場合は null を返す
ccc('HOGE');         // -> null

以上

依存パッケージなしで、CLI・API の両方を提供する簡素なパッケージを作ってみた。npm パッケージとして提供するライブラリを作成するための知見が色々と得られた。