2020.10.22
324
こんにちは、デザイナーのモモコです。
今回はデザインの重要な要素の一つである、色選びの際に参考になる便利なツールやサイトをご紹介します。Webカラーのカラーパレット系サービスを中心にチョイスしましたので、配色などでお悩みの方はぜひご参考にしてみてください！
※ この記事は、2015年2月27日に公開された記事を、最新状況をふまえて再編集したものです。
便利なカラーパレット系サービス6選
coolors
直感的な操作でスタイリッシュな色の組み合わせが作成できるサイト。
HSBなど詳細な数値の指定や、色の配置換えも可能です。常にバージョンアップがされています。
shade
プレビューを見ながら簡単に綺麗なグラデーションを作成できるサイト。
ベースになる色を選んで色相や彩度を調整したら、CSSも書き出してくれるのでそのまま組み込んで使用できます！
rgb.to
一番上のフォームエリアに色のコードやキーワードなどを打ち込むと、さまざまな形式で出力してくれる便利なサービス。
RGBやCMYKへの変換、CSS・指定した色に合う組み合わせなどをまとめて出力されるのがありがたいですね。
material palette
用意された19色から2色を選ぶと、自動的にその色を使ったデザインのプレビューが見られるサイト。
どちらの色をメインにするかの指定はできませんが、中間色も含めたカラーパレットのデータが出力されるので組み合わせの参考になります。
color hunter
アップロードされた写真から5色のカラーパレットを生成してくれるサイト。
「flower」などのタグから検索すると、今まで生成されたパレットを一覧で見ることができます。元の写真と見比べてどの辺りの色が使用されているのかチェックするのも良さそうです。
Adobe Color
みんな大好きAdobeの優秀なカラーパレット作成サービス。
フラットデザインに合う、少しくすんだ色の組み合わせや〇〇風などのさまざまな色の組み合わせが閲覧できます。Adobe IDにサインインすることでテーマのダウンロードもできます。
まとめ
いかがでしたか？ たくさんある便利なサイトやツールの中から、自分に合ったものが見つけられれば幸いです。
ついつい悩みがちな色選びの時間を短縮して、より良いデザインができるようになりたいですね。
配色にお困りですか？
※ デザインの知識がなくても参考になる配色パターン見本サイト12選＋α
※ WEBデザインの配色で迷ったときに役立つツールとその使用方法まとめ
＼LIGが運営するWebデザインスクールだよ／
デジタルハリウッドとWeb制作会社LIGがコラボしてできた「STUDIO by LIG」では、Webデザイナーや動画クリエイターを目指す方向けのカリキュラムを展開しています！ 現在、上野と池袋にて受講生を募集していて、無料説明会は毎日開催中！！ デザインを本格的に勉強したい方、一度見学に来ませんか？
「デジタルハリウッドSTUDIO by LIG」
個別相談会に参加する！
