どんな色に関する情報でも無料で提供している「ColorHexa.com」が便利だったので紹介です。
WEBサイトの配色に悩んでいる人などにも便利な、色の提案が載っています。
目次
ColorHexaとは
ColorHexa.comとは、あらゆる色の情報が載っている色の百科事典です。
検索フォームに、色を指定して検索することで、その色に関する以下のような情報が表示されます。
- その色に関する情報
- 色に関する様々な書式
- カラースキーム
- 代わりとなれる色の提案
- 文字色、背景色、ボーダー色でのプレビュー
- 暗い色、明るい色の提案
- トーン
- 色覚不全シミュレーター
例えば、当サイトのリンク色「#2098a8」で検索してみると、以下のように情報が一覧表示されます。
以下で項目を一つ一つ見ていきます。
色検索で表示される情報
色を検索して表示される情報には、以下のようなものがあります。
- 色情報
- 色に関する様々な書式
- カラースキーム
- 代わりとなれる色の提案
- 文字色、背景色、ボーダー色でのプレビュー
- 暗い色、明るい色の提案
- トーン
- 色覚不全シミュレーター
色情報(Color Information)
その色に関する情報をまとめたものが表示されます。
RGBやCMYKがグラフ化されており、色の割合などが分かりやすいです。
色に関する様々な書式(Color Conversion)
16進数指定、RGB(10進数)、RGB(%)、CMYK、WEBセーフカラー、その他様々な色指定の書式が一覧表示されます。
カラースキーム(Color Schemes)
検索した色との相性の良い色の提案などもしてくれます。
代わりとなれる色の提案(Alternatives)
同じようなインスピレーションを与える、代わりとなる色を提案してくれます。
文字色、背景色、ボーダー色でのプレビュー(Preview)
指定した色を用いた文字色、背景色、ボーダー色のプレビューを表示してくれます。
これは、CSSで指定して表示させるよりは楽かも。CSSコードも提示してくれます。
暗い色、明るい色の提案(Shades and Tints)
指定した色に「黒を混ぜていった結果」、「白を混ぜていった結果」が13個ずつ提案されます。
トーン(Tones)
灰色を加えたり、引いたりすることによってできるトーンです。
色覚不全シミュレーター(Color Blindness Simulator)
指定した色が、色覚異常のある方にどのように見えるかをシミュレートしたものです。
まとめ
これまで、「この色と近い色ないかな?」とか「この色に合う色は?」とか、ツールなどで調べることがたまにありましたが、そういった時もColorHexa.comは便利そうです。
個人的には、文字色、背景色、ボーダ色をプレビュー表示してくれる機能が、実際にCSSで色を指定してしまう前に、ちょっと、どのように見えるのか様子を見るのに便利です。