お役立ち 印刷通販ユーザー必見!デザインやデータ作成に役立つ情報を伝授します。

連載:印刷のプロが厳選!まとめ

シーン毎の配色の参考に!カラーパレットサイトまとめ5選 
カラーパレットのサイト

配色はデザインをする上でも気を遣う部分。色合いや比率を変えるだけで、デザインの印象がぐっと変わります。
そんな悩める配色を決める上で、参考になるカラーパレットサイトをまとめました。

カラーの配色パターンが一目でわかる『Color Hunt』


https://colorhunt.co/
Color Huntは、4色のカラーパレットがたくさん投稿されているサイト。
4色は異なる比率で表示されるので、実際に使うときのベースカラー・メインカラー・アクセントカラーが想像しやすく、参考になります。 カラーパレットは日々追加されるので、訪れる度に新しい色が見つかります。

色相環をクリックするだけ!!『COLOR SUPPLY』


https://www.colorsupplyyy.com/app
COLOR SUPPLYは、色相環に則ったカラーパレットを選ぶことができるサイト。
Complementary(補色)、Analogous(類似色)、Triad(三色配色)など、色相環の位置関係から色を選ぶことができ、理にかなった配色パターンが揃います。 選んだ配色がイラストやグラデーションでプレビューされるので、使用した際のイメージが掴みやすいです。

おすすめの色を続々と提案してくれる『PALETTABLE』


https://www.palettable.io/
PALETTABLEは、誰でも簡単に5色のカラーパレットが作れるサイト。
表示される色に対して、【Like(気に入る)】のボタンを押すと色が固定され、【Dislike(気に入らない)】のボタンを押すと別の色に切り替わります。2色目以降は、選んだ色と相性の良い色が表示されるので、直感で選んでも綺麗なカラーパレットが作れます。

きれいなグラデーションを作りたいときに便利『WebGradients』


https://webgradients.com/
WebGradientsは、グラデーションの配色を探せるサイト。
昨今のwebデザインに使われていそうな、洗練されたグラデーションが180種公開されています。 グラデーションをクリックすると、画面全体に大きく表示されます。面積が変わると色の印象も変わるので嬉しい機能ですね。グラデーションの名前やサイトデザインもおしゃれなので注目です。

ロゴや見出しなどの配色のアイディア出しに『HELLO COLOR』


https://jxnblk.github.io/hello-color/
HELLO COLORは、文字と背景の2色の組み合わせが見られるサイト。
画面をクリックすると、異なる色の組み合わせに切り替わります。鮮やかな色から落ち着いた色まで様々なバリエーションがあり、どんな色を使おうか考えている時にアイディアがもらえます。

まとめ

配色を使うときには、色同士の比率にも気を遣いましょう。ベースカラー70/メインカラー25/アクセントカラー5 の比率が美しいとされています。 この比率を元にして、色数を増やしたり比率を少し変えたりすると、カラーパレットをより効果的に使うことができます。
ご紹介したサイトによって、組み合わせる色の数や機能が異なります。色々試してお気に入りを見つけてください。

こちらの記事もおすすめします!
お役立ち
配色選びや色の組み合わせに役立つサイト6選

配色選びや色の組み合わせに役立つサイト6選


お役立ち
デザインは3つのテーマカラーを使うべし!配色の基本テクニック

デザインは3つのテーマカラーを使うべし!配色の基本テクニック


お役立ち
デザインにまつわる色の話~配色の役割を理解しよう~

デザインにまつわる色の話~配色の役割を理解しよう~


タグ:
  • このエントリーをはてなブックマークに追加