無料で使えるデザイン・配色ツール『Happy Hues』とは？

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

今回は『Happy Hues』について、書いていこうと思います！

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

『Happy Hues』って何？

『Happy Hues』とは、17つの配色パターンがまとめられた「配色ツール」のことです。

完全無料で使用OK!

従来の配色ツールとは異なり、「どこに何色が使われているか」という情報がまとめられており、色の配置まで学習できるのがポイント。Webサイトの色事例がわかるため、実際のデザインを作るときにもイメージが湧きやすくなります！(すごい！)

https://www.happyhues.co/palettes/17

https://osakanav.com/web-design-chot-design-start-html-css

実際に使ってみよう！

Happy Huesの使い方

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

左側にある「配色パレット🎨」から、好きなものをクリックすると……？

こんな感じで、実際のサイト側に反映されます！(おお〜！)

通常の配色ツールとの違いは、「どこに何色が使われているのかわかる」こと。

せっかくおしゃれな配色を見つけても、上手く配置できないなぁ……というお悩みを持つ方でも、安心して利用できます！(いいね)

ページを少しスクロールすると、使われている「カラーの一覧」が見れます。

ここでは文字で正確な位置情報をチェック！例えば、左上を見てみると「Background（背景）」に「#fffffe（白っぽいやつ）」が使われていることがわかります。

さらにページをスクロールすると「色の専門用語」もまとめられています。デザインでよく使用する、色彩やトーン・影など！(助かる〜)

https://osakanav.com/colorsupplyyy

他サイトで配色を確認したいときは……？

ちなみに「F12キー」を押して、デベロッパーツールを起動することによって、このサイト以外でも配色を確認できます。

最初は見慣れないかもしれませんが、よく見ると右側に「rgb(255, 192, 173)」と書かれており、それぞれ三原色の値であることがわかるようになっています！(お〜！)

ウィンドウ左上の「矢印マーク」を押した状態で……。

サイト上にマウスカーソルを持ってくると……このように、パーツを指定した状態でカラーのチェックができます。もしよければ試してみてくださいね✨

(ひと休み💤)

その他の配色

ほかにも色々な配色パターンがあるので、ぜひご自身のお気に入りのものを見つけてみてください〜✨

(これかわいい……！)

https://osakanav.com/design-seeds

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

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