ブログ運用

プロ並みのおしゃれな配色ができるサイト6選 カラーコードの使い方

プロ並みのおしゃれな配色ができるサイト6選 カラーコードの使い方

ブログをカスタマイズするときや、アイキャッチをデザインするとき、どんな配色にしようか迷いますよね⋯。

今回は配色に悩むあなたに、簡単におしゃれな配色が出来るサイト6つ紹介しながら、カラーコードの使い方デザインについても少し触れていきます。

ご紹介するサイトは実際に私も活用していて、とても役立っているサイトなので、ぜひ参考にしてみてほしいです!

カラーコードを一覧できる「原色大辞典」

カラーコード一覧「原色大辞典」

この世のあらゆるの色には、カラーコードというものがあります。カラーコードとはWeb上において色を表すコードのことです。

例えばカラーコードはブログの文字を変えるときに役立ちます。

赤色でしたらコードは#ff0000

なので、下記の黄色部分に#ff0000を入れます。

フォントの色を指定するHTMLコード▼

<Font Color=”#ff0000“>色を変えたい文字</Font>

すると下記のように文字色が赤色になります。

色を変えたい文字

原色大辞典は、色の名前とカラーコードが一目で分かるサイトです!

和色、洋色、パステルカラー、ビビットカラーなどジャンルに分けて表示することが出来ます。

私はサイトを作成する際はかならず、カラーコードを確認しています。

見ているだけでも楽しいし、勉強になりますよ。

Color Huntのカラーパレット!カラーコードの組み合わせが抜群

カラーパレットのColor Hunt

Color Huntは、相性の良い色を4つ組み合わせたパレットが一覧になっていて、色をクリックすると、カラーコードを確認することができます。

アイキャッチ画像の配色に悩んだとき、私が一番使用しているサイトです。

使う色が決まっていると、アイキャッチ作成もスムーズに進みます。

Color Huntがあれば、配色にセンスは必要ありません!

iromiruでカラーコードを抽出

iromiruは、あの画像の中の色が知りたい!という時に、カラーコードを抽出することができます。

やり方は簡単!画像ファイルをドラッグ&ドロップするだけです。

知りたい色の部分をクリックすることで、カラーコードが抽出されます。

抽出したカラーコードはIllustratorやCanvaのカラーコードを入力する場面で活用できます!下記画像はCanvaです▼

Canvaでカラーコードを入力する方法

ココナラでブログのキャラクター作成を依頼し、完成したキャラクターからiromiruでカラーコードを抽出することで、ブログの主要カラーを決めることもできます。

Photoshopにはスポイトツールがあるので、簡単に同じ色を使うことができますが、IllustratorやCanvaにはカラーを抽出する機能がないので、かなり重宝するツールです。

「この色を知りたい」という時は、ぜひiromiruを活用してみて下さい!

PALETTABLEは好きな色で5色のパレットが完成

5色のパレットが簡単に完成「PALETTABLE」

PALETTABLEは好き(Like)か嫌い(Dislike)を選ぶだけで、簡単に5色のパレットが完成します。

「なんとなく」の感覚だけで、おしゃれなプロ並みの配色ができちゃう優れたサイトです。

配色が完成したら、そのまま保存することが可能。

どのカラーコードを使ったか覚えておきたいときにも便利です!

ColorHuntと同じように、アイキャッチ画像の配色決めにも活用できますよ♪

FLAT UI COLORS 2ならフラットデザインにピッタリのカラーが見つかる

フラットデザインとは、平面的なデザインのことです。立体感や奥行きがなく平らで、スッキリとシンプルな印象を与えます。

FLAT UI COLORS 2はフラットデザインに向いている

FLAT UI COLORS 2は、フラットデザインにピッタリな色が見つかります!

平面的なシンプルなアイコンにも合うので、FLAT ICON DESIGN のアイコンと一緒に使うと相性抜群です▼

フラットデザインには明るすぎず、暗すぎない中間色が向いています。同じ色相のカラー(同系色)を使うことも多いです。

FLAT UI COLORS 2を使えば、フラットデザインに向いている色を簡単に探せるので便利です!

COLOR TOOLはGoogleが提唱するマテリアルデザイン向き

マテリアルデザインとは、現実世界の物理的なルールをもとに作られたデザインです。重なりや、奥行き、影が表現されます。

Google社が提唱したデザインシステムの一種でもあります。

COLOR TOOLはマテリアルデザイン向き

COLOR TOOLはカラーパレットから好きな色を選ぶと、それよりも明るい色、暗い色を出してくれます。

ページのレイアウトが6種類あり、画面左上部のマーク「<>」でレイアウトパターンを確認してみることができます。

様々なパターンの配色例が見れるので、ブログがどのようになるのかイメージできて、ブロガーには有難いツールです。

簡単におしゃれな配色が出来るサイト6つ紹介してきました。

どれもデザインに役に立つサイトばかりです。ぜひフル活用して下さい!

私が現在報酬を得ている登録必須のASP紹介▼

お得情報

人気の商品が毎日お買得価格で登場Amazonのタイムセール▼

 

Amazon全ジャンルのクーポンはこちら

ブログで稼ぎたい人向けの書籍
関連記事