サービスやウェブデザインにおいて色は非常に重要な役割を持ちます。自分の好きな色や、気になるあの色が一体どういう見せ方と組み合わせると映えるのか？今日はそんな色のシュミレーションをまとめてくれている海外のサイト「Hexcolor」を紹介します。
| hexcolor.co is a free color tool providing information about any color. Color Hex will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors.. Hex Colors - HTML Color Codes - HEX COLOR |
基本情報だけではなく、細かい見え方もプレビューしてくれる
このHexcolorが他のサイトと違うところ、それは一つの色に対する情報量の多さです。一般的なカラーツールサイトはRGBとCMYKの数値、グラデーション、CSSの軽い表記くらいで終わることがほとんどかと思います。ですがこのサイトは類似・代替色の紹介から写真に乗った時の可読性なども確認することができます。
類似色・相補色・補色などの組み合わせも自動で行ってくれる
暗くした写真の上に色が乗った時の可読性を確認できる
また、CSSの表現もコードとプレビュー写真で見ることができ、ボックスのborderを任意の色にするとどのような見え方になるのかも合わせて確認できます。
ボーダーやテキストシャドウなどのCSSもコード込みで解説
アイコンカラー、モダンなグラデーション表現の見え方が分かる
配色に自信をつけてより説得力のあるデザインへ
まだ補色の関係に関して理解が曖昧であったり、色の組み合わせに自信のないデザイン初心者の方などにはぴったりだと思います。海外のサイトなのですべて英語表記となりますが、Chromeの翻訳機能で十分理解ができる内容となっています。
流し読みしながら、日頃の業務に活かせる色の組み合わせストックなんかを探してみても良いですね。色のセレクトが不安になった時など色々な見え方と共に確認ができるので、うまく活用してWeb・UIデザインに生かしてみてください。
ヘキサカラー公式へのアクセスはこちらから
| hexcolor.co is a free color tool providing information about any color. Color Hex will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors.. Hex Colors - HTML Color Codes - HEX COLOR |