フォルトゥナ
1色選ぶだけでOK
1色選ぶだけでそれなりに見えそうな配色を作ることができるツールです。
最近の配色傾向には対応していますが、それだけでいいデザインになるとは限りません。
設定で多少の調整可能
ロゴのテキストや文字色・背景色の有無などの多少の変更に対応しています。
文字が読みにくい場合には、×印が出ることがあります。その組み合わせは避けましょう。
カラーコードをコピペ
設定パネルの下部にカラーコードの一覧が表示されています。コピペして使ってください。
保存機能や再現機能などはありません。
この配色ツールは大阪のウェブ制作事務所 フォルトゥナによって提供されています。リンクなどは自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。
この配色ツールは自作のため、プログラミングの技術の問題もあり、簡易的なものとなっています。私自身はプログラマーでないため、複雑なプログラムは作成出来ませんが、配色のアルゴリズムは提供出来ますので、ウェブサービスやソフトウェアで私の知識が必要な場合はぜひお声掛けください。
ロゴの部分に入る文字列を変更することができます。
ロゴの色は初期設定では黒(背景色が明るい時)か白(背景色が暗い時)の2色のどちらかですが、#CC0000のように16進数表記のカラーコードを「ロゴの色」の入力欄に入力することができます。
本来、ロゴの色などはホームページなどができる前にできあがっているものだと考えていますので、ロゴの色を選ぶという機能はあえて実装していません。
ロゴの色がまだ決まっていなければ、先に色を決め、それに合わせた配色を作るようにしましょう。
初期設定は空(#444444のグレーあるいは#FFFFFFの白)です。
大雑把に言えば、白背景の明るい配色を作るか、黒背景の暗い配色を作るかをここで設定します。暗い方は厳密に黒ではなく、選んだ色に合わせた暗いグレーが設定されます。
ページ上部のスライドショーの写真を少しだけ透過することができます。スライドの背景にはカラーピッカーで選んだ色が配置されていますので、少し写真の色味を選んだ色に近づけて見せることができます。
配色の方向性が「明るい」場合、背景色は#FFFFFFの白が設定されますが、全背景色を「オン」にすることで、白以外の背景色が使われるようになります。ベージュやピンクなどの薄い色を背景に使いたい場合にご利用ください。
配色の方向性が「暗い」場合には、この設定は無視されます。
色相差を変えることで、最初に選んだ色とは離れたカラフルな配色ができるようになっています。-180~180の間で変えることができますが、配色が苦手な人は-90~90くらいまでを目安にしましょう。
読みにくい文字色と背景色の組み合わせにならないように作っていますが、どうしても読みにくい文字ができあがることもあり、一定の基準を下回ると×印が出るようになっています。
この判定には、JIS X8341-3:2010で使われているコントラスト比が4.5以上(レベルAAを満たしている)かどうかを基準としていますが、×印が出なくても読みにくいと思われる場合もありますのでご了承ください。
コントラスト比について詳しく知りたい方は、「文字コントラストの達成基準」をご覧ください
基本色 | |
---|---|
背景色 | |
背景色ブロック | |
アイコン(左) | |
アイコン(中央) | |
アイコン(右) | |
フッターナビ | |
フッター | |
強調色(赤) | |
強調色(緑) | |
リンク色(青) |