15 既存サイトの色コードをすばやく判別する - WEBの作業が楽になるテクニック総まとめ 第3回 | デザインってオモシロイ -MdN Design Interactive-

15 既存サイトの色コードをすばやく判別する - WEBの作業が楽になるテクニック総まとめ 第3回

2024.4.26 FRI

【サイトリニューアル!】新サイトはこちらMdNについて

WEBの作業が楽になるテクニック総まとめ 第3回



Tips 15

既存サイトの
色コードを
すばやく判別する

文=こもりまさあき



既存Webサイトで使用されている色を参考に、サイトの配色を検討することがあるだろう。しかしながら目視ではどのような色コードが使われているのかわからない。そのような場合は色を判別できるツールを活用しよう。

オンラインソフトウエア「Color Picker 3.0」(2010年1月20日現在での最新バージョン)は、Windows用のデスクトップ全体を対象とした色コードを取得できる。

まず、Color Picker 3.0を配布先(rd.vector.co.jp/soft/win95/art/se350616.html)からダウンロードする。その一方で、色コードを知りたい既存サイトを画面キャプチャし、任意の画像編集ソフトウエアで開こう。その状態でColor Picker 3.0を起動させ、知りたい色の上にカーソルを合わせると色コードが表示される【1】。このとき右クリックしてメニューを表示させたら【2】、“色加工”を選択し[色加工]ダイアログを開く。そこで、[現在の色]の値をコピーすれば【3】、その色コードを使いサイトに使用するボタン制作などを行える【4】。


色コードを知りたい既存サイトの画像を用意したうえで、「Color Picker 3.0」を実行し、任意の場所にマウスポインタを移動させる
【1】色コードを知りたい既存サイトの画像を用意したうえで、
「Color Picker 3.0」を実行し、任意の場所にマウスポインタを移動させる


任意の色の上にカーソルを置いた状態で、右クリックすると左記のメニューが表示される
【2】任意の色の上にカーソルを置いた状態で右クリックすると
左記のメニューが表示される


[色加工]ダイアログの中の[現在の色]の値をコピーして、色コードを取得する。このとき、[色相]だけを変更して色を調整することもできる
【3】[色加工]ダイアログの中の[現在の色]の値をコピーして、色コードを取得する。
このとき、[色相]だけを変更して色を調整することもできる


Color Picker 3.0を使って取得した色コードを参考に、サイトに使用するボタンなどを作成できる
【4】Color Picker 3.0を使って取得した色コードを参考に、サイトに使用するボタンなどを作成できる



POINT [色相]、[彩度]、[明度]を変更し色調整する


[INDEX]
>>> 13 文字スタイルパネルでテキストフォーマットを簡単に適用する
>>> 14 必要な文字はシンボルにまとめて埋め込む
>>> 15 既存サイトの色コードをすばやく判別する
>>> 16 レイヤーカンプで複数ページのデザインを管理する
>>> 17 ワイヤフレーム確認をPDFファイルに書き出して効率化する
>>> 18 テキストのままでエフェクトを簡単に適用する
>>> 19 一連の操作を繰り返し実行できるコマンドを作成する
>>> 20 省略語とTabキーで入力を補完しコーディングする

【バックナンバー】WEBの作業が楽になるテクニック総まとめ >>> 第1回を見る >>> 第2回を見る
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在