カラーコード一覧と調べる道具｜色を選ぶとHEX・RGBがすぐ分かる
色を選ぶ
準備しています。表示されないときは、ページを開き直してください。
先に結論
- 上の道具で色を選ぶか、コードを打ち込むと、HEX・RGB・HSLがそろって出ます。「コピー」でそのまま使えます。
- カラーコードは#と6けた（例：#1A73E8）。最初の2けたが赤、次が緑、最後が青の強さです。
- Word・Excel・PowerPointは「その他の色」→「ユーザー設定」→「16進」の欄に入れます。
カラーコードとは
カラーコードは、色を数字で表したものです。同じ「青」でも人によって思い浮かべる色がちがうので、ホームページやチラシの色をそろえるときは、コードで伝えると確実です。
| 書き方 | 例 | どこで使う |
|---|---|---|
| HEX（16進） | #1A73E8 | ホームページ、Canva、Officeの「16進」の欄 |
| RGB | 26, 115, 232 | Officeの「赤・緑・青」の欄、画像のソフト |
| HSL | hsl(214, 82%, 51%) | 明るさだけ変えたいとき（Lを上げ下げ） |
よく使う色のカラーコード
色の四角を押すと、上の道具にその色が入ります。
| 色 | HEX | RGB | |
|---|---|---|---|
| 白 | #FFFFFF | 255, 255, 255 | |
| 黒 | #000000 | 0, 0, 0 | |
| グレー | #808080 | 128, 128, 128 | |
| 薄いグレー | #D9D9D9 | 217, 217, 217 | |
| 赤 | #FF0000 | 255, 0, 0 | |
| オレンジ | #FFA500 | 255, 165, 0 | |
| 黄 | #FFFF00 | 255, 255, 0 | |
| 緑 | #008000 | 0, 128, 0 | |
| 水色 | #00B0F0 | 0, 176, 240 | |
| 青 | #0000FF | 0, 0, 255 | |
| 紺 | #002060 | 0, 32, 96 | |
| 紫 | #800080 | 128, 0, 128 | |
| ピンク | #FFC0CB | 255, 192, 203 | |
| 茶 | #8B4513 | 139, 69, 19 |
Officeの「標準の色」のカラーコード
Word・Excel・PowerPointの色を選ぶところの下の段に並んでいる10色です。Canvaやホームページで同じ色を使いたいときに。
| 名前（Office） | HEX | RGB | |
|---|---|---|---|
| 濃い赤 | #C00000 | 192, 0, 0 | |
| 赤 | #FF0000 | 255, 0, 0 | |
| オレンジ | #FFC000 | 255, 192, 0 | |
| 黄 | #FFFF00 | 255, 255, 0 | |
| 薄い緑 | #92D050 | 146, 208, 80 | |
| 緑 | #00B050 | 0, 176, 80 | |
| 薄い青 | #00B0F0 | 0, 176, 240 | |
| 青 | #0070C0 | 0, 112, 192 | |
| 濃い青 | #002060 | 0, 32, 96 | |
| 紫 | #7030A0 | 112, 48, 160 |
カラーコードを入れる場所
| アプリ | やり方 |
|---|---|
| Word・Excel・PowerPoint | 文字の色（Aの下に色の線）の▼ →「その他の色」→「ユーザー設定」→「16進」にコードを入れる |
| Googleスライド・ドキュメント | 色の印 →「カスタム」の「＋」→ 16進の欄に入れる |
| Canva | 色の欄 →「＋」（新しい色）→ コードの欄に入れる |
写真や画面の色のコードを知りたいとき
- PowerPointの「スポイト」：色の▼ →「スポイト」で、スライドの中の写真の色を拾える
- Chromeの中の色なら、右クリック →「検証」で見られる（ホームページの色を調べるとき）
- Windowsの「PowerToys」のカラーピッカー（Windows＋Shift＋C）で、画面のどこでも色が拾える（PowerToysを入れたとき）
配色の基本と見本
PowerPointの使い方ほかのデザインのページ
- 配色の基本組み合わせ見本つき
- フリーフォント商用OKの探し方
- フォントのインストールWindows・Mac
- フリー素材（写真）使ってよい範囲
- イラストのフリー素材いらすとや など
- Canvaの使い方チラシ・資料を作る
- Canvaの無料版できること・プロとの差
- サムネイルの作り方ブログ・SNS
- YouTubeのサムネイルサイズと設定
- 名刺の作り方Word・Canva
- ポスターの作り方A4・A3で印刷
- ロゴの作り方無料で・注意点
カラーコードを調べるには？
このページの道具で色を選ぶと、HEX・RGB・HSLのコードが出ます。逆にコードを入れると色が分かります。
WordやPowerPointでカラーコードを使うには？
文字の色の▼から「その他の色」→「ユーザー設定」を開き、「16進」の欄にコードを入れます。
赤のカラーコードは？
#FF0000 です。RGBでは 255, 0, 0 です。
デザインの関連ページ
- デザインの基本と素材（まとめ）
- 配色の基本
- フリーフォント
- フォントのインストール
- フリー素材（写真）
- イラストのフリー素材
- Canvaの使い方
- Canvaの無料版
- サムネイルの作り方
- YouTubeのサムネイル
- 名刺の作り方
- ポスターの作り方
ほかの1ページも見る
このページについて
操作は2026年11月時点の日本語の画面（Windows 11・Mac・Microsoft 365）に合わせています。素材サイト・フォントの規約は2026年11月13日に確かめた要点で、変わることがあります。使う前にそれぞれの公式の規約を確かめてください。このサイトは紹介しているサイトとは関係ありません。運営者情報
参考にした資料：