【CSS】「なんかグラデーションが汚くなんだけど」を解決する。 - Qiita
2022/04/09 15:05
maninthemiddle
RGB系だと離れた2点間の色の中間を取ると同じような明度彩度の色同士でもくすんだ色になる。一方で、HSL系だと彩度明度を保ったまま色相の中間を取れる、と理解した。 色空間って面白い
2022/04/09 16:41
shunkeen
日本からブラジル行くのにマントル通るより、地球の表面に沿って飛行機で行く方がイイ的な話か（全然違う）＞“RGBそれぞれの値が真ん中付近で近い値になるため、グレーっぽくなり、くすんだグラデーションになる”
2022/04/09 16:52
yamadar
CSSグラデーションはRGBなので中間色がグレーに近づいてしまう。HSL でグラデーションを作って、そこでピックアップした中間色を複数指定する。ツールが出てる
2022/04/09 17:11
remonoil
美術の授業でこういうの教えてください
2022/04/09 17:24
uchiten
最近のSafariのリリースでこれの修正があると見かけた気がする。
2022/04/09 17:26
yarumato
“CSSのlinear-gradientは、中間地点でRGBの値がどれも0x88に近い値になるのでグレー(#888888)っぽくなる。対策 1) HSL、特にHueを元に始値/終値以外に中間値3点も決める。2) Hue値を+-180した値（補色）は色制御が難しいので避ける”
2022/04/09 17:49
spark7
擬似的に色相グラデーションを再現してるのよね。CSSの仕様が変わらんと根本的にはどうしようもない。
2022/04/09 19:41
itien
仕事用
2022/04/09 19:45
diveintounlimit
最近のSafariのNoteで直したって書いてたよね
2022/04/09 20:06
punychan
コリスのリンクを見に来た。まああれも海外記事のライセンス翻訳だが。
2022/04/09 20:21
mayumayu_nimolove
汚くなんだけどって日本語？
2022/04/09 21:09
blueboy
CSS の色指定は、RGB が #RRGGBB で、たとえば #334455 だ。HSL だと、たとえば hsl(210, 14%, 50%) だ。 → cssroller.com
2022/04/09 22:34
mventura
思った以上にきたなかったので、きれいなサンプルを見てすっきりした。
2022/04/09 23:58
cnln
RGB空間内で直線的に動かすと、色表記で言うところのS(彩度)とL(明度)が動いてしまい、人の目には汚く見える。HSLに変換してH(色相)だけを動かすことで違和感は消える。また補色を繋ぐグラデは汚くなりやすいのでやめる。
2022/04/10 00:05
appletriangle
原理と解決策が明確で面白い。
2022/04/10 00:18
sabacurry
波形モニタ見ながらhue回すと、あぁ色相ってそういうことか思えて楽しかった
2022/04/10 00:41
hokkey
これとか角丸の緩和曲線とか、何も考えなくても勝手に適用されるようなAPIにしてほしい
2022/04/10 03:46
otchy210
ブラウザ毎の書式の差がひどかった出始めの頃によく使ってたけど、いまこんなに色々なグラデーションジェネレータがあるんだねぇ。
2022/04/10 05:24
nmcli
分かりやすいなあ
2022/04/10 06:48
casm
Safari15.4のグラデーション改善はアルファ値付きの場合の中間値に関するもので、gray dead zone問題とは違うっぽい。 bugs.webkit.org webkit.org
2022/04/10 09:29
greenbow
タイトルの「なんだけど」が気になってしまう…方言なのかな
2022/04/10 10:49
yoshi-na
雑にグラデをつくると中間色が濁って汚く見えるのでどういう考え方で改善できるかってはなし
2022/04/10 11:21
hirorinya
何これすごい 学び
2022/04/10 12:38
abstruct3431
少し前に話題になった記事からパクってきたんかな？これに対して凄いだのなんだのほざいてるエンジニア、情報のキャッチアップ下手くそだからやり方見直したほうが良いよ
2022/04/10 17:35
altar
昔こういう技術系リライト記事の元ネタが(ブコメで指摘されてないにもかかわらず)はてブの関連記事としてずばりサジェストされてたことあったけど、今回はそうはならなかったか。
2022/04/11 02:49
naoya2k
グラデーションが汚なくなるのはガンマの問題がでかいんだけど、この記事は最初の画像はガンマ補正されててわりと綺麗で、その次に出てくる画像は補正されていない汚い画像なので、もう論外としか。