みなさんこんにちは!おさかなです!
今回は『Happy Hues』について、書いていこうと思います!
それでは、レッツゴー!!!!!
『Happy Hues』って何?
『Happy Hues』とは、17つの配色パターンがまとめられた「配色ツール」のことです。
完全無料で使用OK!
従来の配色ツールとは異なり、「どこに何色が使われているか」という情報がまとめられており、色の配置まで学習できるのがポイント。Webサイトの色事例がわかるため、実際のデザインを作るときにもイメージが湧きやすくなります!(すごい!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/9a3a6847597c97d4a2151db8cc55dffa.jpeg)
![](https://osakanav.com/wp-content/uploads/2020/04/20-05-28-15-19-36-119_deco-160x90.jpg)
実際に使ってみよう!
Happy Huesの使い方
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues.png)
左側にある「配色パレット🎨」から、好きなものをクリックすると……?
![](https://osakanav.com/wp-content/uploads/2023/04/N5mzAoujhiwHMhQ1680509800_1680509814.png)
こんな感じで、実際のサイト側に反映されます!(おお〜!)
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-bw.png)
通常の配色ツールとの違いは、「どこに何色が使われているのかわかる」こと。
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-pink.png)
せっかくおしゃれな配色を見つけても、上手く配置できないなぁ……というお悩みを持つ方でも、安心して利用できます!(いいね)
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-yellow.png)
ページを少しスクロールすると、使われている「カラーの一覧」が見れます。
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-color.png)
ここでは文字で正確な位置情報をチェック!例えば、左上を見てみると「Background(背景)」に「#fffffe(白っぽいやつ)」が使われていることがわかります。
![](https://osakanav.com/wp-content/uploads/2023/04/GePlZTKJl0RY7KQ1680510169_1680510180.png)
さらにページをスクロールすると「色の専門用語」もまとめられています。デザインでよく使用する、色彩やトーン・影など!(助かる〜)
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-block.png)
![](https://osakanav.com/wp-content/uploads/2022/04/colorsupplyyy-top-160x90.png)
他サイトで配色を確認したいときは……?
ちなみに「F12キー」を押して、デベロッパーツールを起動することによって、このサイト以外でも配色を確認できます。
![](https://osakanav.com/wp-content/uploads/2023/04/OqUg1hoSnybBRQm1680509433_1680509498.png)
最初は見慣れないかもしれませんが、よく見ると右側に「rgb(255, 192, 173)」と書かれており、それぞれ三原色の値であることがわかるようになっています!(お〜!)
![](https://osakanav.com/wp-content/uploads/2023/04/OqUg1hoSnybBRQm1680509433_1680509578.png)
ウィンドウ左上の「矢印マーク」を押した状態で……。
![](https://osakanav.com/wp-content/uploads/2023/04/OqUg1hoSnybBRQm1680509433_1680509543.png)
サイト上にマウスカーソルを持ってくると……このように、パーツを指定した状態でカラーのチェックができます。もしよければ試してみてくださいね✨
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues.gif)
(ひと休み💤)
その他の配色
ほかにも色々な配色パターンがあるので、ぜひご自身のお気に入りのものを見つけてみてください〜✨
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-orange.png)
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-pp.png)
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-gray.png)
(これかわいい……!)
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-puple.png)
![](https://osakanav.com/wp-content/uploads/2023/04/happyhues-green.png)
![](https://osakanav.com/wp-content/uploads/2021/11/seed-top-160x90.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
NZXT H9でPC組みたい!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
あれ内部がめっちゃ見えるのいいよな〜
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!