ブランドカラー検索とは？
ブランドカラーエクスプローラーでは、Google、Spotify、Netflixなど100以上の人気ブランドの公式カラーパレットを閲覧できます。デザイン、プレゼンテーション、開発作業に、HEXコードをワンクリックでコピーできます。
ブランドは「テクノロジー」「ソーシャルメディア」「飲食」「金融」「エンタメ」「小売」「自動車」「スポーツ」「ヘルスケア」「旅行」の 10 カテゴリに整理しています。各カードには公式のメイン・サブ・アクセントカラーのコードが並び、出典は各社の公開ブランドガイドで、HEX・RGB・HSL のいずれもワンクリックでコピーできます。検索ボックスはブランド名にマッチし、カテゴリのチップを使うと似た企業を並べて比較しやすくなります。
使い方
- カテゴリ別にブランドを閲覧するか、特定のブランド名で検索します。
- 形式トグルで HEX・RGB・HSL を選び、好きなスウォッチをクリックすると選んだ形式で色がコピーされます。
- 各ブランドのフルパレットを確認し、好みの方法で取得します。スウォッチをクリックで 1 色コピー、「すべてコピー」でカンマ区切りの HEX 一覧、CSS でカスタムプロパティ、Tailwind で設定ブロック、PNG でスウォッチシートをダウンロードできます。
使用するタイミング
- 実在のブランドを引用するプレゼン資料で、ロゴの色を正確に再現したいとき
- 競合や目標とするブランドのパレットから配色のヒントを探したいとき
- 共同ブランディングのランディングページで、両社の正確な HEX 値を数秒で確保したいとき
結果
Spotifyに言及するスライドをデザインしているとき。「Spotify」で検索し、グリーン（#1DB954）を見つけて、ワンクリックでコピーしてデザインツールで使用できます。
よくある質問
- このブランドカラーのコードはどこから取っていますか?
- 各ブランドが公開しているスタイルガイドやプレスキットが出典で、可能ならロゴ SVG とも照合しています。商標を主張するものではなく、あくまでデザイン参考値であり、公式の推薦を意味しません。
- これらの色を自分の制作物で使ってもいいですか?
- 色コード自体には著作権はありませんが、ブランドアイデンティティは保護されています。スケッチ・モック・比較記事・編集系コンテンツなら自由に使えますし、提携を匂わせる内容にする前に各ブランドの商標方針を確認してください。
- 色が 4〜5 色あるブランドと 2 色しかないブランドの差は?
- 公式公開そのままを反映しています。Google はロゴの 4 文字に合わせて 4 色をメインに据えていますが、Apple の公式パレットは黒・シルバー・アクセントの青だけと意図的に最小化されています。
- Figma やエディタ向けにまとめてエクスポートできますか?
- はい。各ブランドカードに専用の書き出し行があります。「すべてコピー」はパレット全体をカンマ区切りの HEX 一覧としてクリップボードに入れ、CSS ボタンは貼り付けるだけのカスタムプロパティ(例: --tesla-red: #CC0000;)としてコピー、Tailwind ボタンはブランド名をキーにした tailwind.config.js のカラーブロックをコピー、PNG ボタンはスライド向けの見やすいスウォッチシートを保存します。これまで通り形式トグルで HEX・RGB・HSL を選んでスウォッチを 1 つずつコピーすることもでき、各スウォッチには文字の読みやすさを示す小さな AA/AAA バッジが付きます。
- 気になるブランドが入っていません。追加できますか?
- 検索の使い勝手を保つため、世界的に認知度の高いブランドを中心にしぼっています。データ量はあえて抑えていますので、ニッチなブランドやローカル企業は公式の「About」ページから直接探すのが早いです。