無料でURLや画像からウェブサイト作成に便利なカラーパレットを生成できる「Color」

ウェブサイトなどのデザインを行う際に誰しも一度は「配色はどうしよう」という壁にぶつかったことがあるはず。URLや画像から簡単にカラーパレットを生成できる「Color」は、参考にしたいウェブサイトやコンセプトとなる作品や写真があるときに大いに役立ちます。

Color - Cloudflare Design
https://cloudflare.design/color/

「Color」のトップページには、カラーパレットが表示されており、これを選択するとページ下部のサンプルの配色も切り替わります。サンプルにはウェブサイト風のテキストやアイコン、入力フォームが並んでおり、「この色をベースにデザインするとこんな感じになる」という例をその場でチェックできるようになっています。

赤枠のアイコンをクリックしてサンプルカラーを切り替えながら色の組みあわせを確認し……

気に入った色が見つかったら鍵アイコンをクリックして色を固定できます。色はフォントや背景色などを別々に固定可能なので、「フォントにはこの色」といった具合にひとつベースとなる色を決めると全体の配色がまとまりやすくなりそうです。

固定した色以外を切り替えていくことで、どのような色づかいがマッチするかどうかを確かめることができます。

下にスクロールしていくと、「Settings」から境界線やマージンを変更し、ページデザインを意識しながらカラーを確認することができます。「Border width」のバーをスクロールすると……

フレームやアイコンの枠線の太さが変わります。

また、「Box padding」からはフレーム内のマージンを変更することができます。

枠線やマージンをどのくらいにするかで、枠の色や背景色の見え方が変わってくるので、仕上げたいスタイルに調整しながら理想の形を探すのがよさそうです。

そのほか、コントラスト比や色覚多様性に配慮した微調整を行うこともできます。

満足いくカラーパレットができたら、ページ下部の「Export Palette」をクリック。

JSON、CSSの変数、Sass変数、JSテーマファイルから自身の環境に合わせて変数をコピーできるので、16進数コードで色指定を行わなくても目的の色を呼び出すことが可能になります。

「Color」では、ウェブサイトや画像からカラーパレットを作成することができます。試しに「URL」にGoogleホームページのURLを入力し「Go」をクリックすると……

対象のサイトで用いられているカラーからパレットが作成されるので、カラーリングを参考にすることができます

そのほか、メインとなる色を指定したらその色に調和するカラーパレットを生成してくれる「Palx」を利用する事もできます。ベースとなる色の16進数コードを入力して「Generate」をクリックすると、指定した色の類似色やその色と調和する色などが並んだカラーパレットが生成されるので、基調が決まっている場合などに便利です。

「ColoeBox」からは色を組み合わせてグラデーションが作成できます。同名の「ColorBox」を、Colorから利用できる感じ。

グラデーションの細かさ(Steps)や色合い(Hue)などを選択して好みのグラデーションを作成したら「Add to palette」をクリック。すると、カラーパレットに作成したグラデーションが追加されます。

また、「image」から「Upload image」をクリックして画像をアップロードすると、その画像をモチーフにしたカラーパレットを作成することができます。試しにマンガ「姫とゲーマー」のイラストを読み込ませてみたらこんな感じになりました。

リンゴの写真を読み込ませたカラーパレットはこんな感じ。コンテンツや製品のホームページやロゴデザインを作成するときなど、コンセプトとなるイラストや写真を読み込ませることで、カラーリングの参考にすることができます。「Color」は「この色に合う色はどれだろう」と軽く使用するのには向きませんが、サイトやページ全体のカラーイメージを作成する際や、サイト全体で統一的なカラーパレットを用いたい場合などにはオススメです。