【CSS】画像からカラーコード抽出【Color Palette Generator】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Color Palette Generator」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・画像からカラーコードを調べたい方
・カラーコードを調べる方法を知りたい方
・自動生成されるカラーコードを探している方

「Color Palette Generator」って何?

Color Palette Generator」とは、画像に使用されている16進数(HEX)のカラーコードが、調べられるサイトのことです。画像をアップロードするだけで、色を抽出出来ます!(いいね!)

Free AI tools | Predis.ai
Use Predis.ai's Free AI tools and transform your social media game!
【バナーデザイン】まとめサイト【Banner Matome】とは?
みなさんこんにちは!おさかなです!今回は「Banner Matome」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・バナーデザインのサンプル・見本を探している方・バナーデザインを作成した...

実際に使ってみよう!

Color Palette Generatorの使い方

それでは早速サイトにアクセスしましょう!

まずは「Upload Image」をクリック!(ポチっと)

カラーコードを調べたい「画像」を選択すると…このように、カラーパレットが表示されます!

画像下の「バー」を、動かすと…?

このように「色の数」を、増減できます!(おー!)

7色」に増やすと、こんな感じです。(カラフル🎨)

カラーパレト内🎨の、1色をクリックすると…?

このように「16進数(HEX)カラーコード」が、コピーされます。(おお〜!)

例えば、こちらのイチョウの葉🍁は「D7A855」(きれいな黄色!)

CSSのカラーコードは、下記のように実装します。(赤字・コピーしたコード)

body { color: #D7A855; }

背景色に指定する場合は、backgroundプロパティを使えばOKです!

body { background: #D7A855; }

【デザイン】配色チェックツール【Color Hunt】とは?
みなさんこんにちは!おさかなです!今回は「Color Hunt」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・良い感じの配色パターンを知りたい方・デザインの参考にしたい方・16進数・RG...

(こまめに休憩☕)

他にもこんなカラーが!

他の画像でも色々と試してみました…!
こちらはクリスマス🎄っぽい、プレゼントの写真です。(きれい✨)

こちらは「お鍋」の写真。(鍋パーティーの季節だー!🍲)

自然豊かな「風景写真」では、グレーを基調とした深みのある色が抽出されました!(迫力ある)

こちらは「パンケーキ🍴
シロップの色は、「#883615」というコードでした!

ちなみにカラーコードは、#をつけた状態で検索すると…?
「RGB」や「CMYK」の値も調べられるので、ぜひ試してみてください!(便利!)

こちらは「りんご畑🍎」の写真。(果物狩りとか行きたいな〜)

瀬戸大橋」の写真です。
自然豊かで爽やかなブルーは、「#628EC2」でした!

最後は「赤ちゃん&ワンちゃん」の写真。(癒やされる…🌱)
みなさんもぜひ、画像のHEXカラーコードをチェックしてみてください!

https://amzn.to/3HkDzlh
おさかな
おさかな

HEXション…💦(※くしゃみ)

ナビまる
ナビまる

そんなマニアックな、くしゃみあるか!笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【CSS】Gridレイアウトの作り方を学ぼう!【GRID GARDEN】とは?
みなさんこんにちは!おさかなです!今回は「GRID GARDEN」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・CSSの「グリッドレイアウト(Grid)」を学びたい方・無料の「グリッド学...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました