ロゴから会社のブランドカラーを抜き出す手順

なぜ正確な色が大事か

ブランドカラーは「会社の見た目を統一する」役割があります。HEX が #0070C0 と #1A75BB ではぱっと見ほぼ同じですが、隣り合うと違いがはっきり出るため、社内資料・名刺・Web・SNSアイコンで色が少しずつズレると「だらしない会社」に見えてしまいます。

逆に、正しい色を1つに揃えるだけで、コストをかけずにブランドの印象を上げられます。デザイナーがいない部署でも、ロゴ画像から色をピックして社内で共有するだけで、最低限の統一感が出ます。

ソース別「正しい色」の見つけ方

ロゴから色を取る時、ソースによって信頼度が違います。上から信頼度が高い順です。

1. 公式デザインガイド（PDF）：色のHEXがそのまま書かれている。本ツールでスクショから色を取る前に、まずデザインガイドを探す。
2. IR資料・決算説明資料の表紙：上場企業の多くはここに正確なHEXを使っている。PDFを画面表示してスクショ→本ツール。
3. 公式サイトのトップページ：CSSで指定されたHEXがそのまま使われているはず。スクショから取ればほぼ正確。
4. 公式SNSのアイコン画像：JPEG圧縮の影響で揺れるが、近似値は取れる。Twitter/Xはとくに圧縮が強い。
5. 名刺・パンフレットの写真：印刷物→撮影→JPEGの過程で色が大きくズレるため、最終手段。

可能なら2〜3のソースから取って一致を確認するのがおすすめ。PDFと公式サイトのスクショで同じHEXが取れたら、それを「正」として登録できます。

実例：ある架空SaaSのブランドカラーを取る

仮に「青系のロゴを持つSaaS企業A社」のブランドカラーを取るとします。

1. A社の公式サイトに行き、ロゴが最大表示される場所（トップ画像など）をブラウザでスクショ。
2. 本ツール（/img-color-pick/）にスクショをアップロード。
3. ロゴの青い面の中心をクリック。例：HEX `#0066B3` が取れる。
4. 同じ会社の決算PDFを開き、表紙の青い帯を画面いっぱいで表示→スクショ。
5. 本ツールで同じ色を取る。`#0066B3` または `#0066B5` のような近い値が取れたら、それで確定。

HEXが完全一致しない場合（例：`#0066B3` と `#0066B5`）、JPEG圧縮の誤差なので真ん中をとるか濃い方を採用するのが定石です。

取った色をデザインツールに登録する

HEXが決まったら、社内のデザインツール側にも登録しておきます。

• ・PowerPoint：「図形の塗りつぶし」→「その他の色」→「ユーザー設定」→HEXコードを入力（PowerPoint 2016以降はHEX入力対応）
• ・Google Slides：図形を選択→塗りつぶしの色→カスタム→16進数欄にHEXをペースト
• ・Figma：右側パネルの色チップをクリック→16進入力欄にHEXをペースト→「スタイル」として保存すれば全社共有可能
• ・Adobe Illustrator：カラーパネルでHEXを入力→「スウォッチ」として保存
• ・Notion：カバー画像の色はHEX指定できないが、コールアウト等の文字色・背景色は限定されているため、近い色を選ぶ

商標と「色そっくり問題」

本ツールで他社ロゴから色を取るのは個人利用や調査目的であれば問題ありません。ただし取った色とロゴ形状を組み合わせて自社サービスのロゴにすると、商標権・不正競争防止法に触れる可能性があります。

色だけは法的に独占できないケースが多い（色彩のみの商標は登録例が少ない）ですが、配色＋形状＋業種が近いと「混同のおそれ」で侵害になります。「色は参考にしてOK、ロゴ形状をマネるのはNG」と覚えておいてください。

社内に「色の正本」を作る

せっかく取ったブランドカラーを部署ごとにバラバラに使うと、また「だらしない見た目」になります。社内で「色の正本」を1つ作って共有しましょう。

• ・Notionや社内Wikiに「ブランドカラー」ページを作る
• ・メインカラー（1色）／サブカラー（2〜3色）／グレースケール（3〜5段階）を載せる
• ・各色のHEX・RGB・CMYK（印刷用）を明記する
• ・使用例・使用禁止例（明度を変えない／写真の上に被せない、など）を添える
• ・年に1回、見直しのタイミングを決めておく（4月の期初など）