カラーコード変換

カラーコード(16進数)とRGB値(10進数)を相互変換できます。
カラーコード(16進数)は#を入力しなくても変換できます。

カラーコード(16進数)
RGB値(10進数)
R G B

カラーコード変換の注意事項

  • カラーコード変換の結果などは正確性を保証するものではありません。
  • カラーコード変換の結果などに関して当サイトは一切責任を負いません。
出張/持込/宅配でパソコン修理・設定 24時間365日対応

カラーコード変換ツールについて

カラーコード変換ツールはJavaScriptで制作しています。掲載しているソースコードは解説のために改変や省略をしているので、カラーコード変換ツールで実際に使用しているソースコードとは異なります。また、相互変換のためにcccというライブラリを使用しています。

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

HTML

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メソッドで変更します。クラスを変更することによって背景画像を切り替えます。

JavaScript
$('#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オブジェクトの変数名には$を付けています。

JavaScript
$('#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属性の値としてセットします。

JavaScript
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属性の値としてセットします。

JavaScript
} 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()の形式でセットします。

JavaScript
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() + ')');
    }
}

入力内容を削除

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

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

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

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

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

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

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

おわりに

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

出張/持込/宅配でパソコン修理・設定 24時間365日対応
出張/持込/宅配でパソコン修理・設定 24時間365日対応
きょうみくん
このサイトの管理者
名前 きょうみくん
身長 181.1cm
誕生日 1月21日
所属 日本PCサービス
コメント パソコン、インターネット、サーモン、ミルクティーが好きです。
猫ではありません。