カラーコード変換

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

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

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

  • カラーコード変換の結果などは正確性を保証するものではありません。
  • カラーコード変換の結果などに関して当サイトは一切責任を負いません。
学校授業の「IT化」で、こんなお悩みありませんか?【e-おうち】
出張/持込/宅配でパソコン修理・設定 24時間365日対応

CSSで指定できるカラーネーム一覧

CSSのcolorやbackgroundプロパティの値にカラーネーム(色の名前)を指定できることをご存じですか?色の数は限定されますが、覚えておけばカラーコード(16進数)またはRGB値(10進数)より直観的に色を指定することができます。色に細かなこだわりがない場合はカラーネームでの指定も試してみてください。

白色・黒色系

white
#FFFFFF
255,255,255
whitesmoke
#F5F5F5
245,245,245
gainsboro
#DCDCDC
220,220,220
lightgray
#D3D3D3
211,211,211
silver
#C0C0C0
192,192,192
darkgray
#A9A9A9
169,169,169
gray
#808080
128,128,128
lightslategray
#778899
119,136,153
slategray
#708090
112,128,144
dimgray
#696969
105,105,105
black
#000000
0,0,0

黄色・橙色・赤色系

ivory
#FFFFF0
255,255,240
lightyellow
#FFFFE0
255,255,224
yellow
#FFFF00
255,255,0
snow
#FFFAFA
255,250,250
floralwhite
#FFFAF0
255,250,240
lemonchiffon
#FFFACD
255,250,205
cornsilk
#FFF8DC
255,248,220
seashell
#FFF5EE
255,245,238
lavenderblush
#FFF0F5
255,240,245
papayawhip
#FFEFD5
255,239,213
blanchedalmond
#FFEBCD
255,235,205
mistyrose
#FFE4E1
255,228,225
bisque
#FFE4C4
240,255,255
moccasin
#FFE4B5
255,228,181
navajowhite
#FFDEAD
255,222,173
peachpuff
#FFDAB9
255,218,185
gold
#FFD700
255,215,0
pink
#FFC0CB
255,192,203
lightpink
#FFB6C1
255,182,193
orange
#FFA500
255,165,0
lightsalmon
#FFA07A
255,160,122
darkorange
#FF8C00
255,140,0
coral
#FF7F50
255,127,80
hotpink
#FF69B4
255,105,180
tomato
#FF6347
255,99,71
orangered
#FF4500
255,69,0
deeppink
#FF1493
255,20,147
fuchsia
#FF00FF
255,0,255
magenta
#FF00FF
255,0,255
red
#FF0000
255,0,0
oldlace
#FDF5E6
253,245,230
lightgoldenrodyellow
#FAFAD2
250,250,210
linen
#FAF0E6
250,240,230
antiquewhite
#FAEBD7
250,235,215
salmon
#FA8072
250,128,114
beige
#F5F5DC
245,245,220
wheat
#F5DEB3
245,222,179
sandybrown
#F4A460
244,164,96
khaki
#F0E68C
240,230,140
lightcoral
#F08080
240,128,128
palegoldenrod
#EEE8AA
238,232,170
violet
#EE82EE
238,130,238
darksalmon
#E9967A
233,150,122
burlywood
#DEB887
222,184,135
plum
#DDA0DD
221,160,221
crimson
#DC143C
220,20,60
palevioletred
#DB7093
219,112,147
goldenrod
#DAA520
218,165,32
orchid
#DA70D6
218,112,214
thistle
#D8BFD8
216,191,216
tan
#D2B48C
210,180,140
chocolate
#D2691E
210,105,30
peru
#CD853F
205,133,63
indianred
#CD5C5C
205,92,92
mediumvioletred
#C71585
199,21,133
darkkhaki
#BDB76B
189,183,107
rosybrown
#BC8F8F
188,143,143
mediumorchid
#BA55D3
186,85,211
darkgoldenrod
#B8860B
184,134,205
firebrick
#B22222
178,34,34
brown
#A52A2A
165,42,42
sienna
#A0522D
160,82,45
darkorchid
#9932CC
153,50,204
darkviolet
#9400D3
148,0,211
mediumpurple
#9370DB
147,112,219
saddlebrown
#8B4513
139,69,19
darkmagenta
#8B008B
139,0,139
darkred
#8B0000
139,0,0
blueviolet
#8A2BE2
138,43,226
purple
#800080
128,0,128
maroon
#800000
128,0,0
rebeccapurple
#663399
102,51,153
indigo
#4B0082
75,0,130

青色系

ghostwhite
#F8F8FF
248,248,255
azure
#F0FFFF
240,255,255
aliceblue
#F0F8FF
240,248,255
lavender
#E6E6FA
230,230,250
lightcyan
#E0FFFF
224,255,255
powderblue
#B0E0E6
176,224,230
lightsteelblue
#B0C4DE
176,196,222
paleturquoise
#AFEEEE
175,238,238
lightblue
#ADD8E6
173,216,230
lightskyblue
#87CEFA
135,206,250
skyblue
#87CEEB
135,206,235
mediumslateblue
#7B68EE
123,104,238
slateblue
#6A5ACD
101,90,205
cornflowerblue
#6495ED
100,149,237
cadetblue
#5F9EA0
95,158,160
darkslateblue
#483D8B
72,61,139
steelblue
#4682B4
70,130,180
royalblue
#4169E1
65,105,225
dodgerblue
#1E90FF
30,144,255
midnightblue
#191970
25,25,112
cyan (aqua)
#00FFFF
0,255,255
darkturquoise
#00CED1
0,206,209
deepskyblue
#00BFFF
0,191,255
blue
#0000FF
0,0,255
mediumblue
#0000CD
0,0,205
darkblue
#00008B
0,0,139
navy
#000080
0,0,128

緑色系

mintcream
#F5FFFA
245,255,250
honeydew
#F0FFF0
240,255,240
greenyellow
#ADFF2F
173,255,47
yellowgreen
#9ACD32
154,205,50
palegreen
#98FB98
152,251,152
lightgreen
#90EE90
144,238,144
darkseagreen
#8FBC8F
143,188,143
olive
#808000
128,128,0
aquamarine
#7FFFD4
127,255,212
chartreuse
#7FFF00
127,255,0
lawngreen
#7CFC00
124,252,0
olivedrab
#6B8E23
107,142,35
mediumaquamarine
#66CDAA
102,205,170
darkolivegreen
#556B2F
85,107,47
mediumturquoise
#48D1CC
72,209,204
turquoise
#40E0D0
64,224,208
mediumseagreen
#3CB371
60,179,113
limegreen
#32CD32
50,205,50
darkslategray
#2F4F4F
47,79,79
seagreen
#2E8B57
46,139,87
forestgreen
#228B22
34,139,34
lightseagreen
#20B2AA
32,178,170
springgreen
#00FF7F
0,255,127
lime
#00FF00
0,255,0
mediumspringgreen
#00FA9A
0,250,154
darkcyan
#008B8B
0,139,139
teal
#008080
0,128,128
green
#008000
0,128,0
darkgreen
#006400
0,100,0

CSSでの指定方法

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

HTML
.foo {
    color: RED;
    color: red;
    color: #FF0000;
    color: #ff0000;
    color: #F00;
    color: #f00;
    color: rgb(255,0,0);
    color: hsl(0,100%,50%);
}
学校授業の「IT化」で、こんなお悩みありませんか?【e-おうち】
出張/持込/宅配でパソコン修理・設定 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 カラーコード 変換」などで検索してみてください。

学校授業の「IT化」で、こんなお悩みありませんか?【e-おうち】
出張/持込/宅配でパソコン修理・設定 24時間365日対応
消費税計算

税率を設定して税込/税抜金額の消費税計算ができます。

文字数カウント

文字数をカウントできます。

和暦西暦変換

和暦と西暦を相互変換できます。

年齢計算

和暦または西暦から年齢を計算できます。

入学年・卒業年計算

履歴書に必要な学校の入学年・卒業年を生年月日から計算できます。

単位変換(換算)

キロ、マイル、グラム、華氏などの様々な単位を相互変換(換算)できます。

カラーコード変換

カラーコード(16進数)とRGB値(10進数)を相互変換できます。

Webタイマー(カウントダウン)

Webタイマー(カウントダウン)です。ストップウォッチ機能もあります。

生活に便利な電話番号一覧

警察や消防などの緊急連絡先や電話番号案内などの電話番号を確認できます。

プロバイダーのカスタマーサポートの電話番号一覧

主なプロバイダーのカスタマーサポートの電話番号を確認できます。

タスク管理(ToDo)

自分のWebブラウザーだけでタスク管理(ToDo)ができます。

エクセル関数

エクセル関数を検索できます。

麻雀の点数計算

麻雀の和了時の点数(符数/翻数/役)を計算することができます。

便利なショートカット一覧

Windows 10やExcelなどで使用できる便利なショートカットを確認できます。

電気料金計算

消費電力、使用時間、使用日数、1kWh単価から電気料金を計算できます。

パスワード生成(作成)

大文字・小文字・数字・記号を含むランダムなパスワードを生成できます。

自分のグローバルIPアドレスを確認

自分がインターネットに接続する時のグローバルIPアドレスを確認できます。

出張/持込/宅配でパソコン修理・設定 24時間365日対応
きょうみくん
このサイトの管理者
名前 きょうみくん
身長 181.1cm
誕生日 1月21日
所属 日本PCサービス株式会社
コメント

パソコン、インターネット、サーモン、ミルクティーが好きです。
猫ではありません。

エクセル家計簿の作り方など、技術的なコラムを書いているTech Blogも運営しています。