JavaScriptで10進数から16進数に変換する方法色指定のRGB値のために

こんにちは。さるまりんです。

CSSで色を指定する時の主流といえばカラーコードでの指定です。
#で始まる文字列で6桁の16進数で指定します。

背景色を指定する場合はこんな感じです。

background: #rrggbb;

rがred(赤)、 gがgreen(緑)、bがblue(青)。RGBです。光の三原色です。

各色の濃淡を数値で表し、0が弱くて、fが強い、となります。

6桁で指定するとき微妙な色は環境によってうまく表示できないことがあるようなので、気をつけなきゃいけないです。

#000000が全部の色が最弱の状態で黒、#ffffffが全部の色が最強の状態で白です。

インターネットや書籍で色を探している時に

R:42
G:186
B:73

のように10進の値で記載されていて、#rrggbbで指定するんだったら何になるの？ってなります。

なので、ここに変換する仕組みをおいておこうと思います。

RGB変換フォーム

JavaScriptで作ってみました。

RGB値(10進)を入力してください。

R: G: B:

3つの値を設定してください

このフォームでやっていることは入力された赤(R)緑(G)青(B)の10進数の値から、そのカラーコードを求め、その色で表示するという簡単なものです。

タイトルの16進数への変換は[数値の変数].toString(16)だけでできます。

全体のコードも貼っておきますので参考にしたり、実際にRGB値を求めたりするときに使ってもらえると嬉しいです。

HTML

<span class="form-title">RGB値(10進)を入力してください。</span><br/>
<div class="input-form item-box">
R:<input type="text" id="dec-r" size="3" onkeyup="compute_rgb()"/> G:<input type="text" id="dec-g" size="3" onkeyup="compute_rgb()"/> B:<input type="text" id="dec-b" size="3" onkeyup="compute_rgb()"/>
</div>
<div class="color-code item-box" id="color-code">3つの値を設定してください</div>

CSS

.item-box {
    width: 235px;
    text-align: center;
    display-: inline-block;
}
.color-code {
    background: #ffffff;
    margin-top: 10px;
    padding: 5px;
    border: none;
}
.form-title {
    font-weight: bold;
}
.input-form input {
    width: 55px;
}

JavaScript

// RGBの有効な値かをチェックする
function is_valid_rgb_value(value) {
    // 整数値である
    var num = parseInt(value);
    if(!isFinite(num)) return false;
    // 0から255の範囲である
    if(num < 0 || num > 255) return false;
    return true;
}
// カラーコードに変換する
function convert_to_color_code(rDec, gDec, bDec) {
    var rHex = rDec.toString(16);
    rHex = ('00' + rHex).slice(-2);
    var gHex = gDec.toString(16);
    gHex = ('00' + gHex).slice(-2);
    var bHex = bDec.toString(16);
    bHex = ('00' + bHex).slice(-2);
    return '#' + rHex + gHex + bHex;
}

// RGB値(カラーコード)を計算して設定する
function compute_rgb() {
    // 入力フィールドR,G,Bのそれぞれを取得
    var decR = document.getElementById("dec-r");
    var decG = document.getElementById("dec-g");
    var decB = document.getElementById("dec-b");
    // 出力対象フィールドも取得
    var colorCode = document.getElementById("color-code");

    // 全て有効な値が入力されている場合
    if(is_valid_rgb_value(decR.value)
        && is_valid_rgb_value(decG.value)
        && is_valid_rgb_value(decB.value)) {
        // 計算
        var rVal = parseInt(decR.value);
        var gVal = parseInt(decG.value);
        var bVal = parseInt(decB.value);
        var newCode = convert_to_color_code(rVal, gVal, bVal);

        // 表示変更
        // 色を設定
        colorCode.style.color = newCode;
        // 文字列を変更
        colorCode.textContent = "カラーコードは"+newCode+"です";
        if(newCode == "#ffffff") {
            colorCode.style.backgroundColor = "#000000";
        } else {
            colorCode.style.backgroundColor = "#ffffff";
        }
    } else {
        // 計算できない場合
        colorCode.style.color = "#000000"; // 文字を黒に
        colorCode.style.backgroundColor = "#ffffff"; //背景を白に
        colorCode.textContent = "3つの値を設定してください"; // 文字列も戻します
    }
}

色の指定についてもう少し

色を指定する方法はカラーコード(RGB)でする方法以外にも存在します。

CSS3で追加された指定方法でrgb(0,255,255)のように赤緑青の量を指定することもできるようになったのですが、古いブラウザが対応していない場合があるので注意して使っています。

色名で指定する方法もありますよ。
color: red;
のように、そのまま色の名前で指定します。

RGBも6桁ではなく3桁でも指定できますし、rgba()を使って、各色の強さと透明度で指定する方法もあります。

新しいものにhsl、hslaを使って指定する方法もあるそうです。何だろう？
別の機会に試してみたいと思います。

未知の領域、様々な方法も比較してみたいです。

読んでくださってありがとうございます。

ではまた！