有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう（色商標についても）

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなってるのかを学習します。 CSSでの使い方・色が商標登録される場合があるので気をつける点・カラーコードだとどうなるか（抽出したけど、光の当たり方などで異なって見える場合があります）といった内容で書いてみます。

cssで色をつけるときのやり方一例

文字につかう

h1 {color:#000000;font-size:26px;}

『h1タグ』に、プロパティ『色やフォントのサイズ』が指定されてる状況です。h1タグの部分が26ピクセルのサイズで、黒（カラーコード#000000）というように表示されます。文字に色をつけたいときはこんな風に書きます。

背景につかう

header {background:#ffffff;}

こちらは、ヘッダーの背景色指定例です。白（カラーコード#ffffff）で背景が表示されます。

注意点・色だけで商標登録されるケースに気をつける

有名サービスなどの色合いを参考にしたい、ということがあるかもしれません。しかしそのときは『色で商標登録されるケース』にも気をつけていないと、知らぬ間に侵害ということがありえます。

例１：ティファニーの箱やロゴ・バックのターコイズブルー

ティファニーブルー、日本でも商標に？ http://news.livedoor.com/article/detail/8798774/

『カラーコード81D8D0のターコイズブルー』は、アメリカでティファニーが商標登録しているとのことです。とはいえ、色が完全に独占されるわけではなく、バックの色。

この色を使う場合は、バッグ等には使わないのはもちろんのこと、『ヘッダーやパッケージで背景色にして、黒でアルファベットロゴというのも、類似とみなされる可能性がある』ので、ワンポイントで使うようにします。

（そもそも、青とグリーンでグラデーションにした時点で勝手にこの色は入ってくるので、『完全に独占的利用』することは不可能です）

例２：日本でも、色の組み合わせで商標登録されたケースがある

「色だけ商標」第１号、セブンやトンボ消しゴムに https://www.nikkei.com/article/DGXLASFS01H29_R00C17A3PP8000/

こちらは、長年使っているロゴや商品の色の組み合わせが認められて商標登録されたケースです。

ていうか、『トンボ鉛筆の消しゴムに使われる青・白・黒は定番過ぎる色』なので、『これに類似する配列にならないよう使う』とokです。青・白・黒みたいな定番色をデザインで使うなっていわれても、何もできないからね（笑）

有名サービス・企業などが使っている色を、カラーコードで覚えよう

ここでは、身近なサービス・製品・作品・企業などで印象的な色を、カラーコードで押さえていきます。

カラーコード#55acee（水色）例・ツイッターの鳥

ツイッターに出てくる鳥の色です。明るい感じの水色。ちなみに鳥のロゴは、色や余白・用途などのガイドラインを守れば、使っても良いとのことです。

カラーコード#375794（ソフトな紺色）例・フェイスブックのサイトの色

フェイスブックのサイトのメニュー部分や、ロゴ背景などに使われています。こちらも、ロゴの使用ガイドラインを守って利用できます。windows95もこれに近い色合いだったかと思います。一時はリア充snsといわれたけど、色合いは落ち着いた印象。

カラーコード#00b900(黄緑)例・チャットアプリLINE

スマホのアイコンや企業ロゴとかがこの色。時期によって少しずつ変わってるようです。管理人はLINEのテーマはすぐに変えて紫色にしてしまったので、あまりこの色になじみがありません（笑）

カラーコード#ff9900(オレンジ)例・アマゾン通販のaとzをつなぐ矢印

アマゾンのaとzをつなぐ矢印の色。メニュー部分の背景が青っぽいグレーだったりするので、この矢印がやけに目立ちます。

カラーコード#00704a（濃いビリジアングリーン）例・スタバのカップについてるロゴ色

カップについている緑色のマークです。お店の看板はバックライトの関係で、これより明るく見えます。個人的に好きなメニューはラップサンド＆キャラメルマキアートです。

#78b4d8(くすんだ水色)例・映画『かもめ食堂』サイト&店舗カラー

小林聡美さんが主演の、フィンランドで食堂をやるお話。その映画にでていたお店・サイトの色合いがこれでした。一時期流行したので、内壁を白＆この色に塗ったカフェが増えました。

カラーコード#c1002b（ちょっと青入った赤）例・高級クリスタルガラス製品Baccarat（バカラ）

フランスの高級グラスメーカーのロゴ・箱・サイト文字などの色。単純な赤より大人びて見えるのはR193・G0・B43というように青入りだから。ワインレッドにしたいときは、G（グリーン）を少し混ぜます。

カラーコード#53268b（深紫）例・ムラサキスポーツの看板・文字色

あのスポーツ用品店の、看板文字色。背景が黄色なので目立ちます。隣接補色＆濃さを落としてレモンイエローみたいな感じで、ハレーションが避けられてそうです。

あとがき・まとめ

そんな感じで、身近なサービス・製品・作品・企業などで印象的な色をカラーコードで押さえてみました。単純に赤・青・黄色とかそんな感じでなく、微妙な色合いで見やすさやブランドイメージを狙っています。

CSSなどで使う場合は、『ロゴの配置とかで類似し、商標を侵害しない点』など『色相環などをみて、バランスは大丈夫かチェックする』などに気をつけて使ってみましょう。