グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。

[coliss]

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法。

[s2kw]

プログラマがデザインすると汚くなる件と同根な気がする。計算上正しいやろ、みたいな事で押し通すアレ。気をつけたい。

[ardarim]

なるほど言われてみれば当たり前って感じだ→「つまり、3つのチャンネルは中間値の127.5に向かって収束します。その結果、出来上がる色はグレーです。」

[lnimroder]

画像を使わない理由はスケーリングできるとかボーダー角丸適用しやすいとか色々理由があるので。動的に書き換えたりもできるし、デザイン修正時に画像の書き出しやり直さなくていいのも利点。アセット点数も減らせる

[naoya2k]

ガンマを考慮せずにRGB値をリニアにグラデーションさせてる(正しくない計算だ)から中央が暗く汚くなってしまう。正しくRGB輝度をリニアに変化させればもっとマシで、関係のない色相が混じってくるより素直な結果になる

[vlxst1224]

HSLグラデーションは確かに美しいが始点A色と終点B色以外の色がもりっと入ってきて「AからBへの変化」というより「Aが冒険を経てBに辿りつく」みたいな色変化になりがちなので意図に会わないことも多い

[kako-jun]

xy色度図だと分かりやすいと思う。ググって馬蹄形の図を見る。色立体を山みたいに切断した断面で、中心の白は山の頂点で、底のほうは黒、間は灰色が隠れてる。馬蹄形の中で2点を線で結んで、中心を通るとダメってこと

[gyochan]

知ってた…。HSLでCSSを記述してもブラウザはいったんRGBに変換してから補完すると探り当てた時はショックだった。HSL補完するスクリプトは自分で書いたけどすでに存在していたとは

[altar]

これ昔考えたことあるな。色空間の座標系と2点のパス次第で任意のグラデーションを取れるはずで直交座標系ベースの直線で結ぶのは全く自明ではないよなって。メルカトル図法上の大圏航路が不合理に見えるのに似てる

[richard_raw]

ああ、うん。反対色でグラデーションするとそうなりますよね。

[rna]

RGBではなくHSLでグラデーションを作るといいけどCSSには未実装で3色以上指定のグラデーションで擬似的に再現可能、指定する色を生成するツールもある、という話。

[IGA-OS]

ナルホドなぁ

[craftone]

勉強になった

[mag4n]

rgbの仕組みから起因するネタ。

[BRITAN]

なるほどね〜

[shoh8]

へー。

[tettekete37564]

デザイナーなら「グラデーション」の意味ぐらい知っていてほしいものなんだが・・・「くすんでしまう」じゃなくて「くすませた」んだろ？

[bopperjp]

グラデーション一つとってもこれほど気にする必要があるとは。。

[uehaj]

RGBでも、常にグレーを経由するわけではない。補色関係にあるとき、かな。

[hrmitsumane]

知らんかった🤭

[coherent_sheaf]

HSLを使うと回避できる

[Cru]

ん？黄色と青は補色なので混色したらグレーになるのは当然。例えば緑から赤のグラデーションなら間に黄色を通って彩度も明度も落ちない。黄色から青なら中間で緑を通る補完にすれば彩度が落ちなくできる。中点は1箇

[kikinight]

RGBとCMYKしか知らなかった。

[dal]

あたりまえやろって思うので真ん中の色を指定するのはデフォ(全部読んでない

[arapro]

あんまり色相グルングルン回すのもケバくなりがちなので「よさげな中間色を一つ挟む」のが手堅い。

[mohno]

「HSLモードがより直感的に色を扱うのに適した方法」「HSL補間を使用することを選択…現在のところできません」←ないんかい。というか、飾りのグラデーションって同系色を使わない？狙って派手にするならともかく。

[mather314]

色相でグラデーションしようとする場合、どっち周りにするかで一意には決まらないことにも注意

[zumrud]

純米大吟醸の日本酒を２種類混ぜて飲むのと同じだな

[adsty]

美しいグラデーションを考えていきたい。

[nyokkori]

不思議だよな。絵の具だと混ぜると綺麗な色になるのに。

[kazumori]

中央が彩度高いと逆に目立ってしまうような。絵描界だと「鮮やかな灰色」的な概念があってギリギリ汚く見えない程度に彩度落としたりする

[sc3wp06ga]

HSLの方、たしかにキレイなのかもしれないけど、あまりに鮮やかすぎて、色がいっぱいあってうるさい。目がチカチカしてウッ！眩しい！て感じる。RGBの方が真ん中が確かにちょっと綺麗じゃないけど、落ち着いて見れる。

[Hagalaz]

別々の色を混ぜてって中間を作るんじゃなくて、色の間に色相を使うということか？

[messzylinder]

色相を理解するとヒートマップとか色んなパターンで出せるようになる。Excelで変換式書いたけどどんな値でもきれいなグラデーションが出るの楽しい

[hogashi]

便利そう

[castle]

「グラデーションに使用する色を慎重に選択しないと、CSSグラデーションの中央が彩度を下げ」「RGB色空間ではRed, Green, Blueの3つのチャンネルを混ぜる～3つのチャンネルすべてを同じ値にすると結果は常にグレースケール」

[wdr_s]

rgbって画面にはやさしいけど、人間にやさしくないので、こうなっちゃうよね