「CSS」スタイルシートで使用する色コードの調べ方【デザイン】

カテゴリー:CSS

Webサイト等を作っていたりする色コードを調べる場面が頻繁にあります。今回は実際によく使用している色コードの調べ方をまとめます。

google chromeの開発者ツールで色コードを調べる

サイトで使用されている色などを調べるには、google chromeの開発者ツールを使用する方法が便利です。

Windows : F12

Mac : Command+Option+I

上記ショートカットキーで開発者ツールを起動できます。

ツールのボタンから「その他ツール」を選択する方法でも開発者ツールを起動できます。

google chrome ツールボタンから開発者ツールを起動

開発者ツールを起動したらあとはアイコン(青色になっている箇所)をクリックして、HTMLの要素を選択できるようにします。

google chrome 開発者ツール画面

あとは、色を調べたい要素をクリックするだけです。今回は、前回投稿したボタンの色を表示してみています。

google chrome 開発者ツール画面 色コードを表示

明度・彩度違いなどの色コードを調べる

google chromeで色コードを確認できたら「colorhexa」で明度・彩度違いなどの色コード一度に調べることができます。

「colorhexa」では明度や彩度の違いだけではなく、補色などのまとめて色コード確認することができます。

#d80000で調べるとこんな感じで一度に色コードを表示してくれるのでとても便利なサイトです。

colorhexa 明度・彩度違いなどの色コードを調べる

参考:「colorhexa」で色コードを調べる

マテリアルデザインの色コード

マテリアルデザインの色で色々組み合わせて色を確認できる COLOR TOOL も便利です。

マテリアルデザイン COLOR TOOL

マテリアルデザインで指定してくれている色から選ぶことができるので原色を中心とした色の組み合わせを確認するのに良いです。

公式サイト:「Material Design COLOR TOOL」

マテリアルデザインの配色については英語ですが下記が参考よく参考になります。

公式サイト:「Material Design」


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。