カラーコード（色番号）を
1クリックでコピー

「#」と6桁の英数字の色番号は「カラーコード」

#FF4B1E のように、シャープ（ハッシュタグと同じ「#」）のあとに6桁の英数字が続く色の表記は、カラーコードと呼ばれます。正式には16進数カラーコード、Webで使うことからWebカラーコード、英語ではHEX（ヘックス）とも言います。

「色番号」「色の数字」「カラー番号」と呼ぶ人も多く、どれも同じものを指しています。HTMLやCSSでWebサイトやブログの文字色を決めるときのほか、Canva・PowerPoint・Googleスライド・Figmaなどのデザインツールでも、この6桁を入れれば同じ色を正確に再現できます。

6桁の読み方：2桁ずつ赤・緑・青の量

6桁は2桁ずつ3つに分かれていて、左から赤（R）・緑（G）・青（B）の光の量を表しています。それぞれ 00（まったく無い）から FF（最大）までの256段階です。数字の0〜9に加えてA〜Fを使うのは16進数だからで、Aが10、Fが15にあたります。

いま上で選んでいる色を分解すると、次のようになります。

256 × 256 × 256 で、カラーコードで表せる色は約1677万色あります。#000000 がすべて0の黒、#FFFFFF がすべて最大の白です。

RGBの数値を6桁のカラーコードに変換

0〜255の数値を入れると、6桁のカラーコードに変換します。逆に6桁からRGBを知りたいときは、上の「選んだ色」の入力欄にカラーコードを入れてください。

計算のしかた：それぞれの数値を16で割り、商と余りを16進数の1文字（10＝A … 15＝F）に直して並べます。75なら 75 ÷ 16 ＝ 4 余り 11 なので「4B」です。

カラーコードの使い方（HTML・CSS・ブログ・デザインツール）

HTMLで文字色を指定する

<span style="color: #FF4B1E;">この文字がオレンジ色になります</span>

CSSで背景色や文字色を指定する

.box {
  color: #545454;           /* 文字色 */
  background-color: #F5F5F4; /* 背景色 */
  border: 1px solid #E6E6E6; /* 線の色 */
}

CSSでは #FF4B1E のほか、rgb(255, 75, 30) や、一覧にある hotpink のような色名でも書けます。

ブログやデザインツールで使う

ツールによっては「#」を付けずに6桁だけを入れる欄もあります。そのときは上の「先頭に # をつける」のチェックを外してからコピーすると便利です。

よくある質問