画像からカラーパレットを作ってマテリアルデザイン風にする

前々からやろうと思っていたWordpressテーマ「SANGO」のカラーカスタマイズについてです。

目次

はじめに

このサイトの配色をどうしようかな~と考えていたとき、面白い記事に出会いました。

コリス
画像からカラーパレットを作成できるオンラインサービス
画像からカラーパレットを作成できるオンラインサービスローカルファイルの画像やオンラインの画像から、Photoshop用のカラーパレット(スウォッチ)を作成できるオンラインサービス「Colors Palette Generator」を紹介します。 ...

そうか~!最愛の推しキャラとかお気に入りの絵画の雰囲気をカラーパレットにすることができるんだ~!

………

………………

「あの方からカラーパレットを生み出してみたい…!」

ええ、不可能を可能にするために最新技術を求めるあの方のカラーパレットでこのブログを塗り替えたい。

どうせやるなら、

①あの方の配色でありながら

②マテリアルデザインを取り入れた配色にして

③すぐ使いたい!!

というわけで、今回の計画はこうです。

  1. 自分のお気に入りのキャラクターから配色を作る
  2. マテリアルデザインのルールに沿ってカラーパレットを作成する
  3. 作った色とマテリアルデザインのルールでブログのカラーカスタマイズをする

1,画像から色を抜き出す

色々サイトがあると思いますが、ローカルの画像をアップしてそこからスポイトでカラーピックアップができるサイトが使いやすかったです。

https://lab.syncer.jp/Tool/Image-Color-Picker/

私はまずこのイメージカラーピッカーで、原画を読み込み、メインカラーを抜き出しました。

■ #287ec0

また、原画を見ながら、アクセントカラーはこのあたりになるのだろうな~という色に目星をつけておきます。紺の補色のオレンジ…今回はスポイトで抜き出した茶色っぽいオレンジに目星をつけました。

■ #e79c26

2,マテリアルデザインのルールに沿ってカラーパレットを作成する

つぎに、マテリアルパレットジェネレーターでメインカラーだけ入れて確認してみます。

https://material.io/design/color/#tools-for-picking-colors

するとこうなりました↓

やっぱり茶色でしたねー。

※マテリアルデザインのカラールールって何?という方はこちらをお読みください。https://saruwakakun.com/html-css/material/color-use

さて、800番の補色である茶色をそのままアクセントカラーに採用するとサイト全体が暗すぎるので、推奨されている500番の色をとってパレットの表示を変えます。

PRIMARYの800番は先程の■ #287ec0のままですから、そこからアクセントカラー、ついでにサブカラー候補をつくりました。

現時点でのカラーパレットはこうです。

  • メインカラー:■ #287ec0
  • アクセントカラー:■ #fb9739
  • サブカラー1:■ #34b0f8
  • サブカラー2候補:■ #b7e7fd

なかなかできあがってきました~!!

サブカラー候補をちょっとアレンジ

さて、メインカラーから他をすべて生み出してしまったのでサブカラー2の色合いにちょっと満足いってません。

原画を見るとわかるのですが、サブカラー2候補は本来、もうちょっと銀色に近い蒼であるべきなのです。

アクセントカラーはマテリアルデザインと使用感を重視してブラウンではなくオレンジを用いましたが、サブカラー2は原画の色合いを重視して、現在の色に近いけどちょっと銀色っぽい色を新たにスポイトで拾うことにしました。

  • 変更前:■ #b7e7fd
  • 変更後:■ #c3dbeb

これで基本のカラーパレットが完成しました。

  • メインカラー:■ #287ec0
  • アクセントカラー:■ #fb9739
  • サブカラー1:■ #34b0f8
  • サブカラー2:■ #c3dbeb

3,作った配色でブログのカスタマイズをする

まず、デフォルトの設定だとこんな感じになっています。

これを、今作った配色で変えると……

こんな感じになりました。

ヘッダー背景=メインカラーと同じにしています。

ウィジェットタイトル背景にサブカラー2を使い、文字色は黒だとしっくりこなかったので、2014 Material Design color palettesのBlue Gray 700番を借りました。

これでSANGOからKCっぽい配色になったような気がします!

Author

Akila@Freelance

Akila@Freelance

趣味でHTMLサイトを作ってWordPressをカスタマイズしていたら職業になった人。WebDesigner/フリーランス/講師

目次
閉じる