コーディングやプレゼン色選択の際に絶対使える３つのサイト

みなさんこんばんはsakusakuでございます。

今日はコーディング中に色を使う際に便利だと思うサイトを！

HTMLに詳しい友達から教えてもらったものもあるのでそれを共有しますね！

1.adobe color

安心のadobeさんによる色のサイト。

なんとこれ類似色から補色まで表示も可能。

しかも使いやすい数である５色を表示してくれます。

ページ上部には色の場所関係が可視化されています。

だいたいこの色は位置的にはこの辺ね、ということです。

そもそもこの円のやつの色がどう配置されているかについてはわかりません。

社員に聞きましょう。

反対にあれば反対の色。一直線に並んでいれば明るい色から暗い色。

下部には上から

５色の大きめに表示/色編集のバー/RGBでの表示/色のコードで使える文字列

といった感じで表示されています。

バーをぐいぐい動かせば色も変わります。

そして左上にあるルールでその色たちがどんな関係を持っているのかを決めることができます。

類似色では、似たような関係の色を。大きく外すことのない、調和がある色ですね。

モノクロでは、その色の恋、薄い色を。

トライアドでは、３分割した際に丁度同じ分離れる色。安定感のある３色です。残り２色はそれを少し濃くしたものを。

補色は、色が逆の位置にあるものを。どちらかを背景にしてどちらかを文字にするとすごく目立つといった感じです。５色分、薄い濃いも用意されますね。

コンパウンドは、ほとんど補色位置ですが少しずらした位置に存在する色を表示してくれます。

シェードでは、モノクロと似たような色になります。違いはちょっとわかりません笑

カスタムは自分の用意した５色となりそうです。

ルールで選択したものであれば整った色を選択してくれますので

色があちこちで飛んでいるな・・・といった印象をなくしてくれそうですね！

プレゼンのスライドの色設定にも大活躍間違い無し！です。

2.color-hex

おしゃれな海外のサイト。

トップページではユーザーの誰かが使った色が表示されています。

色をクリックすると

それぞれの形式での色の情報(RGBなど）

またその色が暗くなっていった色、明るくなっていった色

色の割合情報、コンパウンドの色等の色

黒背景の時にどう見えるか、白背景の時にどう見えるか

といったことが１ページでまとめられており

非常に便利です。

こいつでピッと色選ぶか、

何か一色持ってこれば、それに合う色が自然と見つけられますね。

3.ColorZilla

これはchromeやfire foxの拡張になりますが

画面上のマウスが差している色を選択してくれ、

またその色がコピーされた状態にしてくれます。

なので、あっこれいい色だな、ポチ。

そしてコピー。

それだけで色を取ってこれます。

超便利くんですね。どっかのサイトの色がどんなのを使っているかをとったり

自分が使っていた色をコードを見ないで取りたいときに活躍できます！

こいつら、優秀！！！！

上のサイト、拡張は非常に便利です。

コーディング時にのみならず、いろんな場面で使えると思います。

色を決める方法、配色についてはまた別記事で。

色を使いこなしておしゃれに攻めましょう！！