• HOME
  • DESIGN
  • カラー選択、WEBで使える配色ツール・ジェネレータ紹介

2020/06/29 11:05

カラー選択、WEBで使える配色ツール・ジェネレータ紹介

カラー選定(配色)ってWEBサイトを作る上でけっこう悩まれる方も多いのではないでしょうか。

今回は便利に使える配色ツールのご紹介です。

 

 

・Adobe Color CC

https://color.adobe.com/ja/create/color-wheel

 

撮影した写真を元にしてオリジナルの配色カラーパレットを作成できる。

また、PhotoshopやIllustratorなど、他のAdobe製品・サービスと同期して利用することもできるツール。

 

 

・Nippon Colors

https://nipponcolors.com/

 

個人的にお気に入り。

日本(和)の雰囲気を出したい時に大活躍します。

カラーチャートも見やすく、アニメーションもとても美しいサイトです。

 

 

 

・Color Copy Paste

https://colorcopypaste.app/

 

これはすごい。スマホのカメラ機能を使ってリアルタイムに映る画面内で色を抽出。

Figma、Sketch、Webブラウザ上にコピペできる配色ツール。

 

 

・Sorted Colors

https://enes.in/sorted-colors/

 

まずはスライダーを左右に動かす。

選択したものに近い色を自動で抽出。

HEXカラーコードではなく、名前のついたCSSカラーで表示。

後は直感的に配色を選び、詳細を見ることができる。

 

 

・Palette List

https://www.palettelist.com/

 

まずは用意された12色の中から使いたいものを2色選ぶ。

自動で関連するカラーパレットを1万以上も抽出してくれる。

気に入ったパレットは、SVGやSASS、CSSでダウンロード可能。

 

 

・Hue 360

http://hue360.herokuapp.com/

 

まずは「Brightness」で色の明るさを選択。

右側にあるカラーホイールで色をクリックすると、それに合うものだけが残る。

好みの色から自動選定されるカラーパレットを作成。

 

 

・ColorDrop

https://colordrop.io/

 

シンプルに4色のカラーパレットを集めたサイト。

さらにダークモードを適用することで背景を変更したり、ソートやフィルタリングの機能もあります。

表示されたカラーコードはクリックするだけでコピーできるので使い勝手がいいですね。

 

 

以上、簡単にご紹介しました。

現場から以上です!

736

PICK UP