デザイン・ファッション・印刷などの現場では、色名を3文字で略した表記が頻繁に使われます。
Web制作ではパレット管理、CSS指定、素材タグの整理などで効率化につながるため、特に需要が高い略語ですが公的・慣習的に統一された略語はありません。 「これが正解」と言える省略形は存在せず、 用途やローカルルールに依存します。
このページでは、Web制作・デザイン・資料作成などで使われる色の略称（カラーの省略表記）を一覧でまとめています。
下記、色の2文字・3文字略称一覧を見ていただくと、white = wht、black = blk など色名の英語表記略称をご確認いただけます。
色の略称は、ファイル名・CSSクラス名・変数名・資料内の表記などで使われることが多く、用途や文脈によって表記が揺れる場合もあります。
この一覧では、実務でよく使われる代表的な略称を中心に掲載しています。
色の略称一覧（英語カラー名の省略表記）
以下は、英語の色名を省略した際によく使われる略称の一覧です。 同じ色でも、用途や慣習によって複数の略し方が使われる場合があります。
| カラー | 2文字 | 3文字 | Color | 色 |
|---|---|---|---|---|
| ブラック | BK | BLK | BLACK | 黒 |
| ブラウン | BN | BRN | BROWN | 茶 |
| レッド | RD | RED | RED | 赤 |
| オレンジ | OR | ORN | ORANGE | 橙 |
| イエロー | YE | YEL | YELLOW | 黄 |
| グリーン | GN | GRN | GREEN | 緑 |
| ブルー | BL | BLU | BLUE | 青 |
| ネイビー | NV | NVY | NAVY | 紺 |
| グレー | GR | GRY | GREY | 灰 |
| ホワイト | WH | WHT | WHITE | 白 |
| ピンク | PK | PNK | PINK | 桃 |
| パープル | PP | PRP | PURPLE | 紫 |
3文字カラー略語とは？
短い形式で色指定を管理するために生まれた略語で、
- Webデザイン
- グラフィックデザイン
- ファッション
- 印刷（DTP）
などの業界で使用されます。
3文字化するメリットは以下です：
タグ分類が簡単になる
一覧管理しやすい
英語色名を短縮できる
ファイル名・レイヤー名に使いやすい
主要な3文字カラー略語一覧【Web／デザイン実務向け】
| 略語 | 元の色名 | 色のイメージ | 用途例 | HEX | RGB |
|---|---|---|---|---|---|
| BLK | Black | 無彩色の黒 | フォント／背景 | #000000 | 0,0,0 |
| WHT | White | クリア・清潔感 | 背景／余白 | #FFFFFF | 255,255,255 |
| RED | Red | 情熱・注意 | ボタン強調 | #FF0000 | 255,0,0 |
| GRN | Green | 自然・安心 | 成功系UI | #00A651 | 0,166,81 |
| BLU | Blue | 信頼・安定 | 企業サイト | #007BFF | 0,123,255 |
| YEL | Yellow | 注意・明るさ | 注目ポイント | #FFD700 | 255,215,0 |
| PUR | Purple | 高級感・創造 | アクセント | #800080 | 128,0,128 |
| ORA | Orange | 活発・カジュアル | CTAボタン | #FF9900 | 255,153,0 |
| PNK | Pink | 優しさ・柔らかさ | コスメ系 | #FFC0CB | 255,192,203 |
| BRN | Brown | 安定・クラフト系 | ナチュラル系 | #8B4513 | 139,69,19 |
| GRY | Gray | ニュートラル | UI背景 | #888888 | 136,136,136 |
| NVY | Navy | 知的・ビジネス | 企業サイト | #001F5B | 0,31,91 |
誤りやすい色・区別が必要な略語
GRN（緑） vs GRY（灰色）
似ており誤読されやすく、素材管理でミスが起きやすい。
● BLU（青） vs BLA（青黒い／Black関連の略語で使われることがある）
UI設計では混在させない。
● PNK（ピンク）と ROS（Rose）
海外デザインでは Rosa 系と Pink 系の境界が曖昧。
Web制作での使い方（CSS・デザインの実務例）
● ファイル名やレイヤー名で管理しやすい
例：btn_blu.png / bg_gry.svg
● カラーパレット管理で役立つ
:root {
--PRI-BLU: #007BFF;
--ACC-PNK: #FFC0CB;
--BG-GRY: #F3F3F3;
}
色の略称が使われる主な場面
色の略称は、主に次のような場面で使われます。
- Web制作やデザインにおけるファイル名・画像名
- CSSクラス名・変数名・スタイル管理
- 資料・設計書・管理表での省スペース表記
特にWeb制作やデザインの現場では、視認性や入力効率を考慮して、 色名をそのまま書かずに略称で表記するケースが多く見られます。
本記事では代表的な3文字カラー略語を元の色名・使用シーン・カラーコードとあわせて整理しました。
誤解しやすい略語やWeb制作での使い方も解説しているため、日常のデザイン業務や資料作成で活用しやすくなっています。
各色の略称を詳しく知りたい方へ
各色の略称には、意味の違いや使い分けの注意点がある場合があります。 以下の個別ページでは、略称の由来や使われ方を詳しく解説しています。
- Black（黒）の略称について
- White（白）の略称について
- Red（赤）の略称について
- Orange（オレンジ）の略称について
- Yellow（黄）の略称について
- Green（緑）の略称について
- Blue（青）の略称について
- Navy（ネイビー）の略称について
- Gray（グレー）の略称について
- Pink（ピンク）の略称について
- Purple（紫）の略称について
- Brown（茶）の略称について
色名やカラーコードは表現の幅を広げる重要な要素です。
デザインの精度を高めたい方は、他の色名辞典・配色ガイド・色コード関連記事も参考にしながら、パレットの理解をさらに深めてみてください。
