カラーコード（16進数）とRGB値（10進数）を相互変換できます | ちょっとした時にあると便利なWebブラウザー上で使用できるツール集です。

CSSでの指定方法

実際にCSSで使用する際は下記の内どれか1つを指定します。どの書き方をしても赤色になります。赤色以外でも指定の仕方は同じです。

.foo {
    color: RED;
    color: red;
    color: #FF0000;
    color: #ff0000;
    color: #F00;
    color: #f00;
    color: rgb(255,0,0);
    color: hsl(0,100%,50%);
}

使用しているJavaScriptのライブラリ

• jQuery v3.3.1
• ccc v1.0.4

HTML

<table>
    <thead>
        <tr>
            <th>カラーコード（16進数）</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="colorcode" class="clear-target"></td>
        </tr>
    </tbody>
</table>

<div id="arrow"></div>

<table>
    <thead>
        <tr>
            <th colspan="3">RGB値（10進数）</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>R</th>
            <th>G</th>
            <th>B</th>
        </tr>
        <tr>
            <td><input type="text" id="r" class="clear-target"></td>
            <td><input type="text" id="g" class="clear-target"></td>
            <td><input type="text" id="b" class="clear-target"></td>
        </tr>
    </tbody>
</table>

<button type="button" id="clear" class="clear">クリアする</button>
<button type="submit" id="submit">変換する</button>

inputタグにフォーカスした時に矢印とラベルを変更

入力フィールドに入力される際に、矢印のクラスをremoveClassとaddClassメソッドで変更し、変換ボタンのラベルをtextメソッドで変更します。クラスを変更することによって背景画像を切り替えます。

$('#colorcode').on('focus', () => {
    $('#arrow').removeClass('.arrow-left');
    $('#arrow').addClass('.arrow-right');
    $('#submit').text('RGB値に変換する');
});

('#r, #g, #b').on('focus', () => {
    $('#arrow').removeClass('.arrow-right');
    $('#arrow').addClass('.arrow-left');
    $('#submit').text('カラーコードに変換する');
});

変換を実行

「RGB値に変換する」「カラーコードに変換する」が押された時、またはエンタキーが押された時に変換を実行します。
jQueryオブジェクトの変数名には$を付けています。

$('#colorcode, #r, #g, #b').on('keypress', () => {
    if (window.event.keyCode === 13) {
        colorcodeConversion();
    }
});

$('#submit').on('click', () => {
    colorcodeConversion();
});

function colorcodeConversion() {
    let $colorcode = $('#colorcode');
    let $r = $('#r');
    let $g = $('#g');
    let $b = $('#b');
    let $arrow  = $('#arrow');
    let $submit = $('#submit');
    let color;

    if ($submit.text() === 'RGB値に変換する' && $colorcode.val() !== '') {
        color = ccc($colorcode.val());

        if (color !== null) {
            $r.val(color[0]);
            $g.val(color[1]);
            $b.val(color[2]);
            
            changeBgColor('#r, #g, #b', 'rgb');
        }
    } else if (
        $submit.text() === 'カラーコードに変換する'
        && $r.val() !== ''
        && $g.val() !== ''
        && $b.val() !== ''
    ) {
        color = ccc([$r.val(), $g.val(), $b.val()]);
        
        if (color !== null) {
            $('#colorcode').val(color);
            
            changeBgColor('#colorcode', 'colorcode');
        }
    }
}

RGB値（10進数）に変換

変換ボタンのラベルが「RGB値に変換する」かつ入力フィールドが空ではない場合に変換を実行します。RGB値に変換できたら、R/G/Bそれぞれの値をvalメソッドでinputタグのvalue属性の値としてセットします。

if ($submit.text() === 'RGB値に変換する' && $colorcode.val() !== '') {
    color = ccc($colorcode.val());

    if (color !== null) {
        $r.val(color[0]);
        $g.val(color[1]);
        $b.val(color[2]);
    }
}

カラーコード（16進数）に変換

変換ボタンのラベルが「カラーコードに変換する」かつ3つの入力フィールドが空ではない場合に変換を実行します。カラーコードに変換できたら、値をvalメソッドでinputタグのvalue属性の値としてセットします。

} else if (
    $submit.text() === 'カラーコードに変換する'
    && $r.val() !== ''
    && $g.val() !== ''
    && $b.val() !== ''
) {
    color = ccc([$r.val(), $g.val(), $b.val()]);

    if (color !== null) {
        $('#colorcode').val(color);
    }
}

背景色を変更

入力フィールドに入力された値を、入力フィールドの背景色として設定します。カラーコード（16進数）の場合は、cssメソッドでinputタグが設置されているtdタグのbackground-colorプロパティの値にカラーコード（16進数）をセットします。その際、#が付いていない場合は追加します。RGB値（10進数）の場合はrgb()の形式でセットします。

if ($submit.text() === 'RGB値に変換する' && $colorcode.val() !== '') {
    if (color !== null) {
        changeBgColor('#r, #g, #b', 'rgb');
    }
} else if (
    $submit.text() === 'カラーコードに変換する'
    && $r.val() !== ''
    && $g.val() !== ''
    && $b.val() !== ''
) {
    if (color !== null) {
        changeBgColor('#colorcode', 'colorcode');
    }
}

function changeBgColor(id, type) {
    if (type === 'colorcode') {
        let $target = $(id).parent();
        $target.css('background-color', $(id).val());

        if ($target.css('background-color').match(/^[^#]/)) {
            $target.css('background-color', '#' + $(id).val());
        }
    } else if (type === 'rgb') {
        let $target = $(id).parents('tr').find('td');
        $target.css('background-color', 'rgb(' + $('#r').val() + ',' + $('#g').val() + ',' + $('#b').val() + ')');
    }
}

入力内容を削除

「クリアする」が押された時に、それぞれの入力フィールドに入力された内容を削除します。便利にする機能なので変換機能とは関係ありません。

$('#clear').on('click', () => {
    clearInput();
});

function clearInput(selector) {
    if (selector === undefined) {
        selector = '.clear-target';
    }
    
    $(selector).val('');
}

入力された時に背景色を変更

それぞれの入力フィールドに入力された時に背景色を変更します。便利にする機能なので変換機能とは関係ありません。

$('#colorcode').on('keyup', (e) => {
    changeBgColor(e.currentTarget, 'colorcode');
});

$('#r, #g, #b').on('keyup', (e) => {
    changeBgColor(e.currentTarget, 'rgb');
});

おわりに

カラーコードとRGBの相互変換自体は難しくありませんが、視覚的に色がわかるようにするなど変換以外の機能によってツールの使いやすさが変わると思います。当ツールではcccというライブラリを使用していますが、10進数と16進数の相互変換ができれば良いので様々な方法があります。カラーコードの変換ツールを作成する際は「javascript カラーコード 変換」などで検索してみてください。