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つの値を設定してください"; // 文字列も戻します
    }
}