SNS・Webカラーコード一覧
主要SNS・サービスのブランドカラーと、Web制作でよく使う基本色・和色のHEX・RGBを一覧でコピーできます。
SNS ブランドカラー
各SNSの公式に近いブランドカラー。バナーやアイコンの配色に。
X（旧Twitter）
現行の黒。旧ブルーは #1D9BF0
LINE
Instagram（紫）
グラデの一色。他に #E1306C / #F77737
YouTube
TikTok
アクセントは #25F4EE / #FE2C55
Threads
note
コミュニケーション・決済
アプリやサービスでよく使われるブランドカラー。
PayPay
楽天
Amazon（オレンジ）
Slack
Discord
Zoom
Google（青）
赤 #EA4335 / 黄 #FBBC05 / 緑 #34A853
Apple（黒）
Web基本カラー（安全色）
UIでよく使う、扱いやすい基準色。文字・背景・状態表示に。
ダークテキスト
本文グレー
ボーダー
背景ライト
プライマリ青
成功グリーン
警告アンバー
エラーレッド
日本の伝統色（和色）
和のデザインや落ち着いた配色に使える伝統色。
藍色（あいいろ）
朱色（しゅいろ）
萌黄（もえぎ）
桜色（さくらいろ）
山吹色（やまぶき）
紺青（こんじょう）
臙脂（えんじ）
利休鼠（りきゅうねずみ）
※ ブランドカラーは各社の公開情報や実際の表示に基づく参考値です。正式なブランドガイドラインがある場合はそちらを優先してください。商標・ロゴの利用は各社の規約に従ってください。
用途
SNS用のバナーやサムネイル、資料、Webサイトを作るときに、各サービスのブランドカラーや定番のWebカラーをすぐコピーして使えます。色を探してスポイトで拾う手間を省けます。ブランドカラーはボタンや見出しのアクセントに、Web基本カラーは本文・背景・状態表示に向いています。
配色を決めるときのコツ
ブランドカラーを1色決めたら、そのままでは文字が読みにくいことがあります。背景に使う場合は文字色とのコントラストを確認しましょう。ベースカラー1色・アクセント1〜2色・無彩色（黒・グレー・白）でまとめると、まとまりのある配色になります。
関連ツール
- ・背景色に合う文字色を提案する ブランドカラー×文字色 自動提案
- ・HEX / RGB / HSL を相互変換する HEX・RGB・HSL変換
- ・配色から使える組み合わせを探す 配色アクセシビリティチェッカー