ホームページのカラーを選ぶ時って、結構難しいと思っている方もたくさんいるんじゃないでしょうか。やってみたもののなかなかいい感じにならなかったり、どんな色を選んでいいかわからない事も多いと思います。
このページではホームページのカラー選びがスムーズになるWEBサイトとツールをご紹介します。
ホームページ全体のカラー調整に役立つウェブサービス２選と、配色のかっこいいホームページの色を調べるブラウザアプリ２選です。
目次
- Paletton The color Scheme ウェブサービス
- HUE/360 ウェブサービス
- ColorPick Eyedropper GoogleChromeアプリ
- ColorZilla Firefoxアプリ
Paletton The color Scheme
新しく追記しました。HUE/360よりつかいやすいと思うところはカラーコードがマウスオーバーで表示されるところです。また、対比色、同色の色分け及び関係色を表示してくれるので、マウスオーバー時のカラーも決めやすいと思います。
単一色・同色・同色３つ・対比色３つ・対比色４つを提案してくれますので、ホームページ作成にとても便利なサイトです。
公式サイト：paletton.com/
HUE/360
理論に基づいて簡単に配色を決めれます！
めちゃくちゃ便利なWEBサイトをご紹介します。このサイトを使えば色のセンスがなくても自動的に候補を選択してくれるのでホームページ作成にはとても役立ってくれます。
キーカーラを基準に同色系や対比カラーを決める時に役立ちます。
公式サイトはこちらHUE/360
ColorPick Eyedropper
GoogleChromeウェブストアのアプリです！
webサイトで使用しているカラーを調べることが出来ます。他の人が作ったサイトで、素敵な配色をしていたら、このツールを使って気になるサイトのカラーを調べてみましょう。
Chromeブラウザにインストールして使います。
カラーパレットから色を探す時にも便利です。
ブラウザの右にアイコンが出現します。クリックするとパレットが出てきますので、左下のアイコンをクリックして、WEBサイトにカーソルを合わせるとその場所に使われているカラーが解ります。
カラーコードが表示されるのでコピペしてスタイルシートにコードを貼付ければいいんです。
GoogleChromeを使っているならこのツールを入れるとスムーズにホームページを作れます。
ColorZilla
Firefoxブラウザを愛用しているならこのアプリが一番使いやすいと思います。どのようなことができるかは前述のChromeアプリと同じです。ホームページに使われているカラーのコードを調べることができます。
インストール方法
まずはブラウザの右上にあるメニューボタンから「アドオン」のページに移動します。「アドオン入手」の検索ボックスから「ColorZilla」と検索するとインストールページがでてきます。インストールしたらFirefoxを再起動します。（画像は割愛します。）
使い方
インストールが完了したら右上にスポイトマークのメニューが出ています、クリックするとマウスのカーソルが変化して、調べたい場所にカーソルを合わせると上部の黒い帯に対象のカラーが表示されます。
クリックするとカラーが登録されて黒い帯は消えます。
次に、再度スポイトマークをクリックしてメニューからカラーパレットを選択すると下のようにカラーパレットが出てきます。
どんなカラーを使っているかよくわかります。ホームページ作成に役立ててください。
使い方は以上です。
