# 色を知る(2020,2021) 本記事は[ISL Advent Calendar 2020](https://adventar.org/calendars/5538)の16日目の記事です。 突然ですが皆様は「センスあるね~」と言われたことはありますでしょうか? 私はありません センスと言っても色々あると思いますが、今回は現在トレンドになってる色について調査・活用してセンスのある人になりたいと思います:star2: ## PANTONE Color of the Year アメリカの企業が毎年行っている「来年の流行色予測」 2020年は<span style="color: #0F4C81; ">Classic Blue</span>でした。 ![](https://i.imgur.com/6GKFUHZ.png) そして2021年の流行色は2016年以来の2色でした それぞれ * <span style="color: #F5DF4D; ">Illuminating</span> ![](https://i.imgur.com/NtI6gnU.png) * <span style="color: #939597; ">Ultimate Gray</span> ![](https://i.imgur.com/zbUXcFo.png) だそうです。 ## jafca 一方こちらはjafca(日本流行色協会)が紹介する「来年の流行色予測」 2020年は<span style="color: #e50012; ">Human Red</span>でした。 ![](https://i.imgur.com/TylwUpp.png) その後、2020年の色に関してアンケートを行ったそうです。 第一位に回答だったのが * <span style="color: gray ">グレー</span> でした。 ![](https://i.imgur.com/IOutOcQ.png) そして2021年の流行色はなんと * <span style="color: white ">ゼロホワイト</span> だそうです。 ...? <span style="color: white ">ゼロホワイト</span> だそうです。 ## Shutterstock NYに本社を置くストックフォト、音源、編集ツールを提供する会社。 2020年に最もダウンロードされた配色、HEXカラーを分析し、2021年の注目したい3色のカラートレンドを発表してます。 テーマは「自然を感じる色合い」だそう。 1色目は<span style="color: #FAEBD7 ">Set Sail Champagne</span>と呼ばれる色です ![Set Sail Champagne](https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2020/11/Set-Sail-Champagne-1.jpg?w=750) 暖色系の色調で白よりも柔らかい印象を与えられる。 2色目は<span style="color: #2F4F4F ">Tidewater Green </span>と呼ばれる色です ![Set Sail Champagne](https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2020/11/Tidewater-Green-1.jpg?w=750) 明るめな配色を使って、モダンな見た目を出してみるといいそうです 3色目は<span style="color: #DAA520 ">Fortuna Gold </span>と呼ばれる色です ![Set Sail Champagne](https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2020/11/Fortuna-Gold2-1.jpg?w=750) キラキラと豪華なだけでなく、落ち着きと心地よさを兼ね備えた色と評されています。 ## 試してみる 実際に上記の色を一つ使って配色してみようと思います 参考にしたのは[配色アイデア手帖](https://www.amazon.co.jp/%E9%85%8D%E8%89%B2%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E6%89%8B%E5%B8%96-%E3%82%81%E3%81%8F%E3%81%A3%E3%81%A6%E8%A6%8B%E3%81%A4%E3%81%91%E3%82%8B%E6%96%B0%E3%81%97%E3%81%84%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%9C%AC-%E5%AE%8C%E5%85%A8%E4%BF%9D%E5%AD%98%E7%89%88-%E6%A1%9C%E4%BA%95-%E8%BC%9D%E5%AD%90/dp/4797393246)です ここではベースカラーとして<span style="color: #F5DF4D; ">Illuminating</span>を使ってみます まずは類似色を探します。 [Adobe Color](https://color.adobe.com/ja/create/color-wheel)で色を選択し、類似色を検索した結果<span style="color: #FABC41 ">この色</span>を使おうと思います そして、補色を探します。補色は対象の色と対照になる色のことです。 補色として<span style="color: #2613A8 ">この色</span>にしました。 これらを組み合わせて作ったイメージが↓ ![](https://i.imgur.com/VDUGodm.png) ## コントラストについて 最後少し異なりますが、UIデザインのおはなしです WCAGが公開している資料によると、(フォントのサイズ等ありますが) * テキスト (及び文字画像) とその背景の間に、少なくとも **4.5:1** のコントラスト比を確保する。 とあります。 この4.5:1がどんななのかを示したのが下の図(各3段目の数字が比率) ![](https://i.imgur.com/2qcuAGF.png) この比率を確認するソフト、拡張機能もあるそうです * [ColorTester](https://alfasado.net/apps/colortester-ja.html) * [Kontrast - WCAG Contrast Checker](https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk?hl=ja&pageId) ## 終わりに ここまで見ていただいてありがとうございました jafcaのアンケートによると今年の色はグレーだそうです、みなさんは何色をイメージしましたか。 外出するときには周りを見て流行色が使われているところを見るのはいかがでしょうか > ぜひほかのひとのAdvent Calenderもみてください :man-bowing: