【初心者必見!】使いやすいおすすめカラーコードツール

 

WEBデザインやHP制作をしていると、どうしてもカラーコードを使う場面が出てくると思います。

今回は私がプログラマー時代から使っていて、使いやすいと感じているカラーコードツールをまとめておきます。

王道のHTML,CSS ホームページの背景色や文字色

 

 

HTML,CSS ホームページの背景色や文字色

こちらのサイトは、自分が使いたいカラーにカーソルを合わせると、サイトの背景色も同じ色に変わるので、そのカラーを使ったサイトの全体的なイメージがわきやすいです。
また、同系色の白系の色から濃い目の色へとわかりやすいカラー配列になっているので、使いたいカラーを選ぶ際にもとてもわかりやすいです。

このような感じにネイビー(#000080)にマウスのカーソルを合わせると、背景部分がネイビーになります。

 

 

背景色が変わるので、フォントの狭い範囲での色味と背景やボタンなど広範囲での色味とわかりやすくイメージできるかと思います。

 

 

使いたいコードがすぐコピーできるMaterial UI Material Design Colors

 

Material UI Material Design Colors

 

カラーが色味ごとまとまっていて見た目がわかりやすいのと同時に、気に入ったカラーのブロックをクリックするだけで、カラーコードがコピーできちゃうすごく便利なカラーコードツールです。
わざわざコピペしなくても、ワンクリックでコピーできてしまうのが本当に便利です。
また、タブからColor Pickerを選択すると、より自分好みの色を探し、カラーコードを生成してくれるツールもあります。

 

 

他のカラーコードツールには載っていない色でも、自分で生成し、コードをコピーすれば使えるので重宝しています。

 

背景色がわかりやすい Color Table

 

Color Table

 

こちらも一番最初にあげたHTML,CSS ホームページの背景色や文字色と同じように自分が選択したカラーが背景色に設定されるので、広範囲に設定したときの色味がわかりやすいです。

ただし、こちらのサイトは、カラーコードをコピーして、指定のボックスに入力してボタンを押さないといけないので、急いでいるときなどには少し手間がかかります。
また、カラーコード自体もそこまで多くはないので、わりとよく使われている色味を見るなどというときであればさほど不便はないですが、複雑な色合いを選択したいときなどには向かないかもしれません。

 

まとめ

 
 
私が実際に使ってみて、色味の数が多くかつ使いやすく、実装した際のイメージがわきやすいページをあげてみました。
正直普段使うサイトは1つでもいいと思いますし、別にサイトを使わずにWEB制作を行っていってもかまわないのですが、そうなるとコードがわからなくなった際の再現性が薄れてしまうので、慣れるまでや再現性が必要なものを制作する際はこういったサイトを活用することをおすすめします。

また、カラーコードツールはほかにもたくさんありますし、海外サイトのものだとより使いやすいものもありますが、今回は私が制作をする上で一番使っているサイト3つを紹介させていただきました。

自分で制作をしながら、カラーコードツールを使用しながら自分で使いやすいものを見つけていくのも面白いので、ぜひやってみてください。

私もまだ使用したことのないカラーコードツールなどもあると思うので、おススメのカラーコードツールがあればぜひ教えて下さい^^

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です