【色見本の使い方】色コードの使い方を覚えて自分の好きな色をデザインに使おう！

 

サイトのデザインをしていて、自分の使いたい色味がなかったりして困った経験はありませんか？

実は、とっても簡単に自分の好きな色をコード化して、自分の反映させたいサイトに貼り付けるだけで、自由に色を変更できるようになるんです！

色にはそれぞれ指定できるカラーコードがある

色にはそれぞれ、カラーコードというコードがあるのをご存知ですか？

例えば、右端に赤枠で囲ってあるある「#d8bfd8」というコードはこの薄紫色のコードなんです。

このコードを自分の反映したいサイトに貼り付ければ、自由に色を変更できるというワケです。

 

参考サイトの紹介

原色大辞典

色の種類が豊富で、かつ探しやすいのが原色大辞典です。

色もグループごとに分かれていてとても探しやすいです。

原色大辞典の公式サイトはこちら

 

色見本〜カラーコード

色の相性や、まとまりをみたい場合はこちらも参考になります。

カラーパレットとして表示されるので、全体感が掴めます。

色のコードを表示したい場合は、パレットの色をクリックすると表示されます。

こんな感じで、かなり専門的な感じで表示されるので初心者にはちょっと難易度高いかもです。

色見本〜カラーコードの公式サイトはこちら

 

色を反映させる方法【例１】WordPressの目次

①「色を選択」をクリックすると、コードを入力する場所が表示されます。

②赤枠部分に上書きする形で、色見本からコピーしたコードを貼り付ければokです。

 

【WordPress】Rich table of Contents(ROTC)プラグインの設定の仕方Rich table of Contents(ROTC)プラグインの設定の仕方を初心者に向けて解説しています。本記事をみれば、ROTCでどんなことが可能なのか、設定の仕方や表示方法など全てわかるようになっています。ROTCプラグインをインストールするかどうか検討中の方にもおすすめです。...

 

色を反映させる方法【例2】Canva

①変更したい色をクリック

②青枠内どの色でも良いのでクリックする
(もしくは検索欄でもOK。検索欄の場合は画像とは少々表示が異なるが変更可能)

③色コードを入力する箱が出てくるので、青枠部分に上書きする形で、色見本からコピーしたコードを貼り付ければok

まとめ

いかがでしたか？

とっても簡単ですよね！

色コードの仕組みさえ一度覚えてしまえば、どんな場面でも使えるようになるのでぜひ一度実践してみてください！