色の百科事典「ColorHexa」が色に関する調べ物をするときに何かと便利

どんな色に関する情報でも無料で提供している「ColorHexa.com」が便利だったので紹介です。

WEBサイトの配色に悩んでいる人などにも便利な、色の提案が載っています。

スポンサーリンク
レクタングル(大)広告

ColorHexaとは

Color Hex - ColorHexa.com

ColorHexa.comとは、あらゆる色の情報が載っている色の百科事典です。

検索フォームに、色を指定して検索することで、その色に関する以下のような情報が表示されます。

  • その色に関する情報
  • 色に関する様々な書式
  • カラースキーム
  • 代わりとなれる色の提案
  • 文字色、背景色、ボーダー色でのプレビュー
  • 暗い色、明るい色の提案
  • トーン
  • 色覚不全シミュレーター

例えば、当サイトのリンク色「#2098a8」で検索してみると、以下のように情報が一覧表示されます。

#2098a8 hex color

以下で項目を一つ一つ見ていきます。

色検索で表示される情報

色を検索して表示される情報には、以下のようなものがあります。

  • 色情報
  • 色に関する様々な書式
  • カラースキーム
  • 代わりとなれる色の提案
  • 文字色、背景色、ボーダー色でのプレビュー
  • 暗い色、明るい色の提案
  • トーン
  • 色覚不全シミュレーター

色情報(Color Information)

その色に関する情報をまとめたものが表示されます。

色情報(Color Information)

RGBやCMYKがグラフ化されており、色の割合などが分かりやすいです。

色に関する様々な書式(Color Conversion)

16進数指定、RGB(10進数)、RGB(%)、CMYK、WEBセーフカラー、その他様々な色指定の書式が一覧表示されます。

色に関する様々な書式(Color Conversion)

カラースキーム(Color Schemes)

検索した色との相性の良い色の提案などもしてくれます。

カラースキーム(Color Schemes)

代わりとなれる色の提案(Alternatives)

同じようなインスピレーションを与える、代わりとなる色を提案してくれます。

代わりとなれる色の提案(Alternatives)

文字色、背景色、ボーダー色でのプレビュー(Preview)

指定した色を用いた文字色、背景色、ボーダー色のプレビューを表示してくれます。

文字色、背景色、ボーダー色でのプレビュー(Preview)

これは、CSSで指定して表示させるよりは楽かも。CSSコードも提示してくれます。

暗い色、明るい色の提案(Shades and Tints)

指定した色に「黒を混ぜて言った結果」、「白を混ぜていった結果」な13個ずつ提案されます。

暗い色、明るい色の提案(Shades and Tints)

トーン(Tones)

灰色を加えたり、引いたりすることによってできるトーンです。

トーン(Tones)

色覚不全シミュレーター(Color Blindness Simulator)

指定した色が、色覚異常のある方にどのように見えるかをシミュレートしたものです。

色覚不全シミュレーター(Color Blindness Simulator)
色覚不全ユーザーは向けサイトを作成するときの参考などに。

まとめ

これまで、「この色近い色ないかな?」とか「この色に合う色は?」とか、ツールなどで調べることがたまにありましたが、そういった時もColorHexa.comは便利そうです。

個人的には、文字色、背景色、ボーダ色をプレビュー表示してくれる機能が、実際にCSSで色を指定してしまう前に、ちょっと、どのように見えるのか様子を見るのに便利です。