Photoshopで16進数カラーコードを調べたい場合！CLIP STUDIO PAINTや他のアプリでも調べたい場合！
サイトで見たり 、または写真の画像の色で、好きな色があった場合、その色を自分のブログ（サイト）上で使ってみたい と思ったことはありませんか？
この色で 背景色したい。この色でフォントの色にする等々 。
CSSだと 16進数ですよね 。
なかなか16進数で 調べるのって大変です。
Contents
Photoshopで16進数カラーコードを調べる
あなたがもしPhotoshopを持っているなら 、簡単に見つける方法があります。
スポイトツールを選択してから
Windowsの場合
・右クリック
Macの場合
・Control + クリック
上記のクリックをして「カラーを HTML コードとしてコピー」あるいは「カラーの 16 進コードをコピー」を選択します。
メモ帳などのテキストエディタに貼り付けて見るとわかりますよ。
上記の画像の水色の場合ですが、こんな感じでカラーがわかりますよ。
「カラーを HTML コードとしてコピー」
|
1 |
color="#c2edfe" |
「カラーの 16 進コードをコピー」
|
1 |
c2edfe |
Photoshopを安く購入したい場合は、
こちらの記事がおすすめです。
Adobe CCを社会人でも安くお得に購入できる方法は？２年目も商用もＯＫ！
CLIP STUDIO PAINT（クリスタ）で16進数カラーコードを調べる
CLIP STUDIO PAINT（クリスタ）でも16進数カラーコードがわかるんですよ！
Photoshopはサブスクですが、クリスタは買い切りもあるからいいですね。
CLIP STUDIO PAINT PRO 
だったら、購入５千円、月額100円（スマホ版）からですね。
先ほどの画像を例にします。
【クリスタの16進数カラーコードの調べ方】
１．カラーサークルなどの描画色をダブルクリック
２．色の設定画面が表示されるので、スポイトのアイコン（画面の色を取得）をクリック
３．調べたい画像の色をクリック
４．色の設定画面の「HEX」の右横に表示
簡単でしたね。
当たり前ですが、
PhotoshopとCLIP STUDIO PAINT PRO は同じ結果でしたね。
ペイントで16進数カラーコードを調べる
Microsoftの ペイントは、Windows PC に既にありますね。
ペイントを使って、16進数カラーコードを調べてみます！
ペイントで色の選択から色の編集でRGB値を調べる
まず、タスク バーの検索ボックスで「ペイント」と入力します。
「最も一致する検索結果」に「ペイント」が表示されましたよね？
「ペイント」をクリックします。
メニューの「ファイル」→「開く」で画像を選択します。
スポイトのアイコン「色の選択」をクリック
調べたい画像の色の箇所をクリック
「色の編集」のアイコンをクリック
「色の編集」の画面の右下に、赤・緑・青がありますね？
電卓で10進数から16進数に変換する方法
そのままだと10進数なので、16進数に変換します。
タスク バーの検索ボックスで「電卓」と入力し、「電卓」のアプリをクリック
電卓は表示されましたか？
次に左上の「三」のメニューアイコンをクリック
「プログラマー」をクリック
RGB値から16進数カラーコードに変換してみる
赤の数字「194」と入力
左上の「HEX」の右横に「C2」と表示されていますよね？
同様に緑・青の数字「237」「254」をそれぞれ入力してみます。
結果は？
・赤＝C2
・緑＝ED
・青＝FE
どこかで見た英数字ですよね？
つなげると、「C2EDFE」
上記のPHOTOSHOPとCLIP STUDIO PAINTで調べた16進のカラーコードと同じです。
計算するのが大変なので、こちらのようなサイトで調べると簡単ですね。
欲しい配色に悩む場合
ブログのカラーデザインとかイラストを描く際の配色に悩んだりしませんか？
私は色彩感覚がないので、というかセンスがないので、よく悩みます。
そんな時にみつけたのがこの本「配色アイデア手帖」です。
あまり活用できていませんが、 本を見るだけで楽しいです。
たくさん種類がある色鉛筆を買った時くらいに楽しいです。
色を扱うための具体例が載っていたり、 もちろんカラーコードも載っています。
例えば、「気球フェスティバル」とか 「ガールズパーティー」、
「トロピカルフルーツ」など 色の言葉のセンスがありますよね。
Amazonのサイトで「試し読み」できるので、
ぜひ中身を見てもらえるとよいかと思います。
試し読みのページ数が多いので、参考になりますよ。
Follow me!
