この記事はフリューAdvent Calendar 2018 の12/06分です。

はじめに

こんにちは。ピクトリンク事業部開発部のいっさんです。

普段はWebAPIの開発などをやっていますが、

趣味でフロントやデザインの勉強をやっています。

むしろ趣味のほうが得意分野で色彩検定2級をもってます。

今日はエンジニアが知っておけばいい、色に関する豆知識を紹介します。

色相環

モックなどを開発していて、配色にこまること、ありませんか？

配色に困ったときは「色相環」を見てみると便利です。

「色相」とは赤、黄、緑、青、紫といった色の様相の相違のことで、「色相環」とは色を円状にならべた図のことをいいます。

この円の向かい合った色同士が「補色」と呼ばれ、

この色の組み合わせをするとインパクトが強くなります。ダイアードと呼ばれています。

例えば赤だと反対色は緑になります。

なのでワンポイントで目立たせたいときに反対色を使うと良いでしょう。

無難な組み合わせを選びたいときは、

隣接した左右を選ぶと無難になります。アイデンティティと呼ばれています。 例えば、オレンジだと赤や黄色になります。

ただ似たような色になるので単調になりがちです。

バランスを取れた配色の組み合わせで

トライアドというものがあります。

色相環を三等分した位置にある3色で配色します。

例えば、黄色の場合、赤紫と青になります。

使う色は3色以下にすることおすすめします。

３色以上になるとごちゃごちゃしてしまい、見にくくなってしまいます。

色数が少ない方がまとまりのあるスッキリしたデザインになります。

このように、色相環を見て配色を決めるととても便利です。

紹介したのは主な3つでしたが、

他にも色相環を四等分した位置でカラフルな配色にするテトラードなどがあります。

興味ある人は調べてみてくださいね。