2022/01/27 09:59
coliss
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法。
2022/01/27 12:46
kako-jun
xy色度図だと分かりやすいと思う。ググって馬蹄形の図を見る。色立体を山みたいに切断した断面で、中心の白は山の頂点で、底のほうは黒、間は灰色が隠れてる。馬蹄形の中で2点を線で結んで、中心を通るとダメってこと
2022/01/27 14:29
yarumato
“グラデーションの中央がグレーに濁っている。gray dead zoneと名付けた。RGBでグラデ作ると濁る。HSL（色相彩度明度）で作れば濁らない。中間色を指定すればCSSでもいける。CSSのグラデ生成ツールを作成。”
2022/01/27 15:03
daira4000
RGBでグラデーションすると汚いので他の方法でグラデーションを作ってcssには中間色をいっぱい書け
2022/01/27 15:41
richard_raw
ああ、うん。反対色でグラデーションするとそうなりますよね。
2022/01/27 15:43
mokkoda4
CSSで無理するくらいなら画像でいいのではっていつも思いますね、私は。
2022/01/27 15:48
fukken
なるほどなー。
2022/01/27 16:01
brightsoda
gigazine.net タイムリー
2022/01/27 16:10
lnimroder
画像を使わない理由はスケーリングできるとかボーダー角丸適用しやすいとか色々理由があるので。動的に書き換えたりもできるし、デザイン修正時に画像の書き出しやり直さなくていいのも利点。アセット点数も減らせる
2022/01/27 16:53
s2kw
プログラマがデザインすると汚くなる件と同根な気がする。計算上正しいやろ、みたいな事で押し通すアレ。気をつけたい。
2022/01/27 17:05
ys0000
参考になる。PPTで2色グラデで汚くなった記憶がなくてなんでだろって思ったら、一旦薄くした色が中間に入るようになっているからかと試して納得。分岐点が2個くらい入ってて、中間の色味が調整できる。
2022/01/27 17:12
napsucks
カラーホイールを反対側からたどるとさすがに違う色が出てきたようで違和感があるけど、近いほうにたどればほぼ違和感ないな。
2022/01/27 17:26
spark7
色をhslで渡せばそれに従うのかーと思って読んだら、まだなのか。現状は全部rgb変換してグラデするのね。「CSSは、グラデーションの計算で使用されるカラーモードを変更する方法を提供していません」
2022/01/27 17:26
deep_one
色空間の採用が不適切な奴だな、と思って開いたらだいたいそうだった。
2022/01/27 17:30
respectbookmark
へぇ
2022/01/27 17:35
motti0804
RGBは、各チャネルの値が近いとグレー（低彩度）になる。CSSグラデは、両端2色のRGBをチャネル毎に平均して、各点でのRGBを決めてる→真ん中らへんは各チャネルの値が近くなりがち …って感じか。なるほど。
2022/01/27 17:45
ardarim
なるほど言われてみれば当たり前って感じだ→「つまり、3つのチャンネルは中間値の127.5に向かって収束します。その結果、出来上がる色はグレーです。」
2022/01/27 18:04
w_bonbon
絵描きでこれ起きると大変そう。
2022/01/27 18:37
tmayuko312
デザイナーこそ覚えるべきCSSだ。でないとデザイナーが丹精込めて作り上げたグラデデザインが開発フェーズで思いつきもしない驚きのグラデーションに生まれ変わってしまう事があるので。
2022/01/27 18:39
blueboy
手持ちの画像ソフトでやったら、いくらでも簡単にきれいなグラデーションを作ることができた。カラーパレットでクリックするだけで、好みの色を決定できる。文字は不要。それをCSSでやる意味がない。ただの無駄作業。
2022/01/27 18:40
masamkur
エクセル…。
2022/01/27 18:59
UhoNiceGuy
キレイなグラデーション作る為にはHSLって、そりゃそうだね。なんで今まで気付かなかったんだろう。こういう時なんと言えばいいのか。目からウロコ？瓢箪から駒？…語彙力が…
2022/01/27 19:05
Mi-keito
CSSとは無関係だけど、ドット絵のアンチエイリアス技法を教えてたサイトが中間色を作るのにRGB値から計算してて、初心者の頃それをよく理解せず参考にしてくすんだ色味のドット絵を描いてたのを思い出すなど。
2022/01/27 19:51
tk_musik
ff7の吹き出しとか
2022/01/27 19:56
kobito19
グレー=濁っている、なん？画像処理やってて見慣れてるからかもしれんけど別にRGBグラデーションに違和感無いけど。
2022/01/27 20:41
Gka
補色の関係にある色を混ぜると無彩色になる…デザインの基礎だと思う。やはりSTEAM教育にArtは必須だね。
2022/01/27 20:45
qinmu
面白い。
2022/01/27 21:02
dorje2009
勉強になった。2色にこだわらなければグレー化を避けられるのでExcelでもきれいなグラデーションが作れる
2022/01/27 21:07
tofu-kun
わかりやすい
2022/01/27 21:09
tanakatowel
文字と文字の間隔も、数字上は等間隔でも、最終的には人の目の錯覚によって歪む。最終的には目検で美しさを追求するしかない。
2022/01/27 21:11
gyochan
知ってた…。HSLでCSSを記述してもブラウザはいったんRGBに変換してから補完すると探り当てた時はショックだった。HSL補完するスクリプトは自分で書いたけどすでに存在していたとは
2022/01/27 21:28
kaputte
なるほど
2022/01/27 21:33
mayumayu_nimolove
コリスさんはたまにぶっ込んでくるな
2022/01/27 21:36
kuni530
RGBで遠くはなれた2色でグラデやるのが間違いだな。色の道は深い
2022/01/27 21:42
naoya2k
ガンマを考慮せずにRGB値をリニアにグラデーションさせてる(正しくない計算だ)から中央が暗く汚くなってしまう。正しくRGB輝度をリニアに変化させればもっとマシで、関係のない色相が混じってくるより素直な結果になる
2022/01/27 22:02
wdr_s
rgbって画面にはやさしいけど、人間にやさしくないので、こうなっちゃうよね
2022/01/27 22:16
castle
「グラデーションに使用する色を慎重に選択しないと、CSSグラデーションの中央が彩度を下げ」「RGB色空間ではRed, Green, Blueの3つのチャンネルを混ぜる～3つのチャンネルすべてを同じ値にすると結果は常にグレースケール」
2022/01/27 22:48
hogashi
便利そう
2022/01/27 23:11
messzylinder
色相を理解するとヒートマップとか色んなパターンで出せるようになる。Excelで変換式書いたけどどんな値でもきれいなグラデーションが出るの楽しい
2022/01/27 23:15
Hagalaz
別々の色を混ぜてって中間を作るんじゃなくて、色の間に色相を使うということか？
2022/01/27 23:17
sc3wp06ga
HSLの方、たしかにキレイなのかもしれないけど、あまりに鮮やかすぎて、色がいっぱいあってうるさい。目がチカチカしてウッ！眩しい！て感じる。RGBの方が真ん中が確かにちょっと綺麗じゃないけど、落ち着いて見れる。
2022/01/27 23:41
kazumori
中央が彩度高いと逆に目立ってしまうような。絵描界だと「鮮やかな灰色」的な概念があってギリギリ汚く見えない程度に彩度落としたりする
2022/01/27 23:52
adsty
美しいグラデーションを考えていきたい。
2022/01/27 23:52
nyokkori
不思議だよな。絵の具だと混ぜると綺麗な色になるのに。
2022/01/28 00:22
altar
これ昔考えたことあるな。色空間の座標系と2点のパス次第で任意のグラデーションを取れるはずでRGB/HSV空間上を直線で結ぶのは全く自明ではないよなって。メルカトル図法上の大圏航路が不合理に見えるのに似てる。
2022/01/28 00:48
zumrud
純米大吟醸の日本酒を２種類混ぜて飲むのと同じだな
2022/01/28 01:44
mather314
色相でグラデーションしようとする場合、どっち周りにするかで一意には決まらないことにも注意
2022/01/28 02:38
mohno
「HSLモードがより直感的に色を扱うのに適した方法」「HSL補間を使用することを選択…現在のところできません」←ないんかい。というか、飾りのグラデーションって同系色を使わない？狙って派手にするならともかく。
2022/01/28 04:11
arapro
あんまり色相グルングルン回すのもケバくなりがちなので「よさげな中間色を一つ挟む」のが手堅い。
2022/01/28 04:39
iiefujii
門外漢なのでへーと思ってる
2022/01/28 05:06
dal
あたりまえやろって思うので真ん中の色を指定するのはデフォ(全部読んでない
2022/01/28 05:26
kikinight
RGBとCMYKしか知らなかった。
2022/01/28 06:17
Cru
ん？黄色と青は補色なので混色したらグレーになるのは当然。例えば緑から赤のグラデーションなら間に黄色を通って彩度も明度も落ちない。黄色から青なら中間で緑を通る補完にすれば彩度が落ちなくできる。中点は1箇
2022/01/28 06:41
coherent_sheaf
HSLを使うと回避できる
2022/01/28 06:57
komachiyo
RGBは混ぜたら黒になるので説明されたらそりゃそうだって感じね。
2022/01/28 07:24
hrmitsumane
知らんかった🤭
2022/01/28 07:36
uehaj
RGBでも、常にグレーを経由するわけではない。補色関係にあるとき、かな。
2022/01/28 07:56
xevra
エンジニアは色に興味ねーからな。やれやれだぜ
2022/01/28 08:31
bopperjp
グラデーション一つとってもこれほど気にする必要があるとは。。
2022/01/28 09:13
tettekete37564
デザイナーなら「グラデーション」の意味ぐらい知っていてほしいものなんだが・・・「くすんでしまう」じゃなくて「くすませた」んだろ？
2022/01/28 09:31
shoh8
へー。
2022/01/28 11:21
BRITAN
なるほどね〜
2022/01/28 11:34
vlxst1224
HSLグラデーションは確かに美しいが始点A色と終点B色以外の色がもりっと入ってきて「AからBへの変化」というより「Aが冒険を経てBに辿りつく」みたいな色変化になりがちなので意図に会わないことも多い
2022/01/28 12:30
mag4n
rgbの仕組みから起因するネタ。
2022/01/28 12:50
craftone
勉強になった
2022/01/28 12:55
IGA-OS
ナルホドなぁ