ずっとぼんやりと「CSSで記述したグラデーションって、色の途中がくすんでない？ 気のせい？」と思ってきました。
「思ってるだけって何だ！ 技術ブログやってるんだから検証しなよ！」ってことで検証してみました。
目次
比較
#f34868 から #6300ed へのグラデーションを例として作成します。
比較： PS×CSS
- Phohoshopで作成して書き出したグラデーション
- CSSで記述したグラデーションのキャプチャ
この2つを比較してみます。
ご覧のモニタにもよりますが、結構色の変化の仕方が異なりCSSの方は中間部がもっさりした印象を受けます。
iPhoneやAndroid端末では全体的に発色がいいのでCSSでも色の濁りはあまり感じられません。
比較： PS×CSS×XD×AI
グラデーションと言えば、WEB制作ではXDやイラレで作成して書き出す場合もあります。それも比較してみないとCSSだけがくすむのかハッキリとはしませんね。
というわけで、
- Phohoshopで作成して書き出したグラデーション
- CSSで記述したグラデーションのキャプチャ
- XDで作成し書き出したグラデーション
- Illustrator（RGBモード）で作成し書き出したグラデーション
この4つを比較してみます。
こうして並べてみると、CSSでグラデーションの中間部がくすんでいるというより、Photoshopが色の変化が特別きれいなんですね。
XDはCSSとPhotoshopの中間くらいの似た色の変化ですが、こちらは書き出した際に色の変化が滑らかではなくジャギりが目立っています。これはPNG書き出しでもJPG書き出しでも同様でした。
「はは〜〜ん、これがXDで書き出しすると色が変わってしまうってやつね」と早合点しそうになりましたが、イラレも同じ結果になりました。
こちらもiPhoneやAndroid端末では発色が良いせいかジャギりが目立たなくなっています。
比較： PS×XD
CSSのグラデを挟んでいると、PhotoshopのグラデとXDのグラデの違いがよく分からないですね。
- Phohoshopで作成して書き出したグラデーション
- XDで作成し書き出したグラデーション
シンプルにこの2つだけで比較します。
Photoshopは色の変化の仕方がEasingのease-inのような感じでしょうか？
CSSのグラデを調整する
CSSでも華やかなグラデーションにしたい場合、中間部分の色を彩度をちょっと上げる手があります。
こちらのグラデーションジェネレーターを利用します。
真ん中にポイントを追加して、そこの色を気持ち鮮やかに変更します。
このBefore Afterがこちら↓です。
CSSで作成したグラデーションでも華やかさが増しましたね。
CSSってことはRGBなので、好みもありますが、華やかに明るい方が素敵かな〜〜と思います。
実装にあたりデザイナーとコーダーが別の人が担当している場合は、完成イメージの共有をはかっておいた方がいいでしょう。
デザイナーがグラデーションのコードをコーダーに渡すのが一番早いんですが、デザイナーによってはそういうことは担当外と突っぱねることもありますからね。
何度も繰り返していますが、iPhoneやAndroid端末での発色の良さを考えると、彩度を上げすぎるとワル目立ちしてしまう可能性があります。気になる場合は実機で検証してみましょう。
スマホ検証にちょっと便利なChromeの機能拡張
The QR Code Generator
PCのChrome上で表示しているページのURLをQRコードで表示してくれます。iPhoneならカメラで、Android端末ならQRコードリーダーアプリで読みこめば、スマホのブラウザでそのページをさっと表示することができます。
余談
コーディングでグラデーションを使用する際の注意としてこの記事をまとめたんですが、PSとAIでのグラデの微妙な違いがあること、スマホ端末がとにかく発色が良い！（良すぎ？）など、思わぬ発見もありました。
なぜ中間がくすんで見えるかの詳しい解説サイト
皆のcolissさんが翻訳記事を公開してくださいました！ RGBの特性ゆえなんですね。