グラデーション検証:CSSで記述したグラデは中間の色がくすんで見えない?

Pocket
LINEで送る

ずっとぼんやりと「CSSで記述したグラデーションって、色の途中がくすんでない? 気のせい?」と思ってきました。
「思ってるだけって何だ! 技術ブログやってるんだから検証しなよ!」ってことで検証してみました。

比較

Phohoshopで作成したグラデーション

#f34868 から #6300ed へのグラデーションを例として作成します。

比較: PS×CSS

  • Phohoshopで作成して書き出したグラデーション
  • CSSで記述したグラデーションのキャプチャ

この2つを比較してみます。

PhohoshopのグラデーションとCSSのグラデーションの比較

ご覧のモニタにもよりますが、結構色の変化の仕方が異なり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つだけで比較します。

Phohoshopで作成して書き出したグラデーションとXDで作成して書き出したグラデーションの比較

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でのグラデの微妙な違いがあること、スマホ端末がとにかく発色が良い!(良すぎ?)など、思わぬ発見もありました。

Pocket
LINEで送る

back to top