WEBデザイン 色を決める時に使える便利なツール 7選+

ゼロから色を探す

COOLORS

ランダムカに色を生成

20200429_03_color

スペースキーでランダムに色を生成してくれる便利ツール。気に入った色が出てきたら、固定にすることもできます。

サイトを見る

一つの色から明暗の色をつくる

Shadowlord

明暗の色を一覧化

20200429_02_color

画面上部から色を入力すると、割合に応じた色合いが出力されます。

サイトを見る

Color Designer

カラーパレットから明暗の色を一覧化

20200429_01_color

自分で色を決めなくても、ある程度色を表示してくれます。

サイトを見る

PALX

合う色の明暗の色を一覧化

20200429_04_color

明暗の色だけでなく、色相を変えた色も表示されます。

サイトを見る

画像から色を抽出

Color Designer Color palette from an image

ドラッグ&ドロップで画像の色を抽出

20200429_05_color

一つのファイルから色を抽出してくれます。
色の数が選べる所がポイント。

サイトを見る

グラデーションの色を決める

uiGradients

キーワードに沿ったグラデーションをページを切り替えながら表示してくれます。
なんとなくグラデーションを決めたい時に便利です。

サイトを見る

uiGradients

キーワードに沿ったグラデーションをページを切り替えながら表示してくれます。
なんとなくグラデーションを決めたい時に便利です。

サイトを見る

https://toolness.github.io/accessible-color-matrix/

その他グラデーション

Gradient Generator

Blend

カラーピッカーを触りながらグラデーションが作る。

サイトを見る

Gradient Magic

サイトを見る

Gradient Magic

サイトを見る

gradienta

サイトを見る

Grade.js

サイトを見る

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

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note