みなさんこんにちは!おさかなです!
今回は「Color Palette Generator」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・画像からカラーコードを調べたい方
・カラーコードを調べる方法を知りたい方
・自動生成されるカラーコードを探している方
「Color Palette Generator」って何?
「Color Palette Generator」とは、画像に使用されている16進数(HEX)のカラーコードが、調べられるサイトのことです。画像をアップロードするだけで、色を抽出出来ます!(いいね!)
![](https://osakanav.com/wp-content/uploads/2022/04/banner-matome-top-160x90.png)
実際に使ってみよう!
Color Palette Generatorの使い方
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/12/predis.png)
まずは「Upload Image」をクリック!(ポチっと)
![](https://osakanav.com/wp-content/uploads/2022/12/5wcqeNXkJ5FVYtf1670508167_1670508181.png)
カラーコードを調べたい「画像」を選択すると…このように、カラーパレットが表示されます!
![](https://osakanav.com/wp-content/uploads/2022/12/predis-co.png)
画像下の「バー」を、動かすと…?
![](https://osakanav.com/wp-content/uploads/2022/12/2PeCwBaqLZBYBS51670547178_1670547190-1-1.png)
このように「色の数」を、増減できます!(おー!)
![](https://osakanav.com/wp-content/uploads/2022/12/pred-c-.png)
「7色」に増やすと、こんな感じです。(カラフル🎨)
![](https://osakanav.com/wp-content/uploads/2022/12/predis-cplus.png)
カラーパレト内🎨の、1色をクリックすると…?
![](https://osakanav.com/wp-content/uploads/2022/12/CAHfQhZzO9ab7tz1670509849_1670509862.png)
このように「16進数(HEX)カラーコード」が、コピーされます。(おお〜!)
![](https://osakanav.com/wp-content/uploads/2022/12/predis-copy.png)
例えば、こちらのイチョウの葉🍁は「D7A855」(きれいな黄色!)
![](https://osakanav.com/wp-content/uploads/2022/12/predis-kids.png)
CSSのカラーコードは、下記のように実装します。(赤字・コピーしたコード)
body { color: #D7A855; }
背景色に指定する場合は、backgroundプロパティを使えばOKです!
body { background: #D7A855; }
![](https://osakanav.com/wp-content/uploads/2022/07/colorhunt-top-160x90.png)
(こまめに休憩☕)
他にもこんなカラーが!
他の画像でも色々と試してみました…!
こちらはクリスマス🎄っぽい、プレゼントの写真です。(きれい✨)
![](https://osakanav.com/wp-content/uploads/2022/12/predis-gift.png)
こちらは「お鍋」の写真。(鍋パーティーの季節だー!🍲)
![](https://osakanav.com/wp-content/uploads/2022/12/predis-nabe.png)
自然豊かな「風景写真」では、グレーを基調とした深みのある色が抽出されました!(迫力ある)
![](https://osakanav.com/wp-content/uploads/2022/12/predis-kesiki.png)
こちらは「パンケーキ🍴」
シロップの色は、「#883615」というコードでした!
![](https://osakanav.com/wp-content/uploads/2022/12/predis-hotcake.png)
ちなみにカラーコードは、#をつけた状態で検索すると…?
「RGB」や「CMYK」の値も調べられるので、ぜひ試してみてください!(便利!)
![](https://osakanav.com/wp-content/uploads/2022/12/predis-kensaku.png)
こちらは「りんご畑🍎」の写真。(果物狩りとか行きたいな〜)
![](https://osakanav.com/wp-content/uploads/2022/12/predis-apple.png)
「瀬戸大橋」の写真です。
自然豊かで爽やかなブルーは、「#628EC2」でした!
![](https://osakanav.com/wp-content/uploads/2022/12/predis-sea.png)
最後は「赤ちゃん&ワンちゃん」の写真。(癒やされる…🌱)
みなさんもぜひ、画像のHEXカラーコードをチェックしてみてください!
![](https://osakanav.com/wp-content/uploads/2022/12/predis-sleep.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
HEXション…💦(※くしゃみ)
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
そんなマニアックな、くしゃみあるか!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-top-160x90.png)