【自動変換 & 一覧から取得】RGBとカラーコード

RGBとカラーコードを簡単変換&コピーできるツール
  • カラーコードを調べたい!
  • 色見本からカラーコードを取得したい!

コンピュータにとっては便利でも、人にとってはピンとこない16進数カラーコードを簡単に取得できるツールを作成しました。自由に使ってみてください!

目次

「RGB」または「カラーコード」の値から、相互に自動変換するツール

R / G / B のそれぞれに0から255までの値(半角のみ)を入力すると、カラーコードと色見本が表示されます。
(逆にカラーコード(3桁または6桁)を入力すると、RGBの値が算出されます。)

色見本

16進数カラーコードとは?

HTMLやCSSなどで色指定するときに使われるコードで、『#FF0088』といった #(ハッシュ)記号と6つ* の英数字 で構成されます。
* 以下例のように、色によっては3つで表すこともできます。

Webページなどのモニターで表示される場合、色はRGBで表現します。
R(赤)・G(緑)・B(青)それぞれを0〜255の256段階の明るさで分け、それらの組み合わせで約1,680万色作り出しています。(RGBやCMYKについて詳しく知りたい方はこちら

このRGBの数字を2桁の16進数に置き換えて、R → G → Bの順に並べたものがカラーコードです。

RGBとカラーコードの変換例

『R: 255 / G: 0 / B: 136』という組み合わせの色を16進数で表すと、『R: FF / G: 0 / B: 88』となる。

一桁の場合(この場合は『G: 0』)は二桁になるよう0を追加し(『G: 00』とし)、これをそのまま繋げると『FF0088』となる。

ちなみにこの例のように、R / G / B それぞれで同じ文字・数字が続く場合は省略できて、『F08』のように表すこともできる。

人の場合、RGBの数字をそのまま見たほうが色を直感的に理解できますが、機械の場合は数字を羅列したコードの方が理解しやすい、というわけですね。

赤や青などの、代表的な色見本からコードを取得(コピー)するツール

以下から好きな色をクリックまたはタップすると、その色のカラーコードをコピーできます。

  • 000000
  • rgb(0, 0, 0)

  • 888888
  • rgb(136, 136, 136)
  • 222222
  • rgb(34, 34, 34)

  • aaaaaa
  • rgb(170, 170, 170)
  • 444444
  • rgb(68, 68, 68)

  • cccccc
  • rgb(204, 204, 204)
  • 666666
  • rgb(102, 102, 102)

  • eeeeee
  • rgb(238, 238, 238)
  • ff0000
  • rgb(255, 0, 0)

  • ff4040
  • rgb(255, 64, 64)

  • ff8080
  • rgb(255, 128, 128)

  • ffbfbf
  • rgb(255, 191, 191)
オレンジ
  • ff8000
  • rgb(255, 0, 0)

  • ff9f40
  • rgb(255, 159, 64)

  • ffbf80
  • rgb(255, 191, 128)

  • ffdfbf
  • rgb(255, 223, 191)
  • ffff00
  • rgb(255, 255, 0)

  • ffff40
  • rgb(255, 255, 64)

  • ffff80
  • rgb(255, 255, 128)

  • ffffbf
  • rgb(255, 255, 191)
黄緑
  • 80ff00
  • rgb(128, 255, 0)

  • 9fff40
  • rgb(159, 255, 64)

  • bfff80
  • rgb(191, 255, 128)

  • dfffbf
  • rgb(223, 255, 191)
  • 00ff00
  • rgb(0, 255, 0)

  • 40ff40
  • rgb(64, 255, 64)

  • 80ff80
  • rgb(128, 255, 128)

  • bfffbf
  • rgb(191, 255, 191)
青緑
  • 00ff80
  • rgb(255, 0, 0)

  • 40ff9f
  • rgb(64, 255, 159)

  • 80ffbf
  • rgb(128, 255, 191)

  • bfffdf
  • rgb(191, 255, 223)
水色
  • 00ffff
  • rgb(0, 255, 255)

  • 40ffff
  • rgb(64, 255, 255)

  • 80ffff
  • rgb(128, 255, 255)

  • bfffff
  • rgb(191, 255, 255)
緑青
  • 0080ff
  • rgb(0, 128, 255)

  • 409fff
  • rgb(64, 159, 255)

  • 80bfff
  • rgb(128, 191, 255)

  • bfdfff
  • rgb(191, 223, 255)
  • 0000ff
  • rgb(0, 0, 255)

  • 4040ff
  • rgb(64, 64, 255)

  • 8080ff
  • rgb(128, 128, 255)

  • bfbfff
  • rgb(191, 191, 255)
  • 8000ff
  • rgb(255, 0, 0)

  • 9f40ff
  • rgb(159, 64, 255)

  • bf80ff
  • rgb(191, 128, 255)

  • dfbfff
  • rgb(223, 191, 255)
ピンク
  • ff00ff
  • rgb(255, 0, 255)

  • ff40ff
  • rgb(255, 64, 255)

  • ff80ff
  • rgb(255, 128, 255)

  • ffbfff
  • rgb(255, 191, 255)
ショッキングピンク
  • ff0080
  • rgb(255, 0, 128)

  • ff409f
  • rgb(255, 64, 159)

  • ff80bf
  • rgb(255, 128, 191)

  • ffbfdf
  • rgb(255, 191, 223)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次