グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator

美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Generator – CSS & SVG Export ツールを紹介する前に、なぜグラデーションがくすんでしまうのか。 PhotoshopやFigmaなどで幅広い色相のグラデーションを作ろうとすると、グラデーションの中央にグレーのデッドゾーンができてしまうことがよくあります。 左: グレーがあるグラデーション、右: グレーを回避したグラデーション このグレーのデッドゾーンを避けるには、グラデーションに使用するカラーは大きなカーブ（直線はダメ）を描いて補間する必要があります。 そしてここで紹

[coliss]

グレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツール

[ephedrina]

技術の説明としてはわかるけど「汚い」「美しい」という表現は感覚が違うなあと思う　くすみカラーグラデも好きよ

[taruhachi]

昔RGBのままで単純にグラデーション作ったことあったけど、この図で理解できた。色相環を考慮せずにショートカットしてしまうんだ。

[punychan]

RGBじゃなくHSVでやれってことじゃないのかな？

[underhill]

最近のPhotoshopでは補完方法に「知覚的」を選べばくすまないんじゃなかったけ？自分はいまだにCS5ユーザーなので伝聞ですが…／クリスタも「知覚的」でグラデがくすまなくなる

[kagerouttepaso]

HSLは色相毎の明度が知覚的に一定ではないのでまた話が面倒くさい。

[mohno]

どっかで見た話と思ったら、ここで見た話だった（違う話だけど） https://coliss.com/articles/build-websites/operation/css/make-beautiful-gradients-in-css.html#google_vignette

[pekee-nuee-nuee]

くすんでるって言われてるやつもけっこう好きというか、汚いとは思わないんだが、まあ自分はピンクと灰色と薄緑が同じ色に見えたりするので何の参考にもなるまいなガッハッハ

[nvs]

そもそもRGBの頭じゃなかった…

[Yuny]

なるほどねー。グラデの真ん中あたりで色がくすむというか、ダークになる？　理由がようやくわかった。

[zxcvdayo]

もうFxでもSafariでもgradientの指定に"in oklab", "in hsl"とか直接使えるはずだけど／あった、すべてのメジャーブラウザで利用可能。"longer"もある https://developer.mozilla.org/ja/docs/Web/CSS/color-interpolation-method#css

[kagehiens]

なるほど!!という感じ。使うがどうかは微妙だけど納得感をえられたことは有難い。

[mak_in]

色相だけじゃなく、彩度も合わせてグラデーションせい！って話かを

[si_mako]

あんまり長距離彩度の高いところをぐるっと回ったグラデーションはただのHSVの色相スライダーに見えてそんなに綺麗とは思えない

[NAPORIN]

クリスタでもチェックいれるだけでできるようになったけど、それはそうとグラデーションの自作には興味ある

[chck1245]

理屈はわかったけどグラデーションていつ使うのかワカラナイ

[adsty]

グレーのデッドゾーンを回避して美しいグラデーションを生成する。

[hugie]

大昔、「PhotoShopの機能だと汚いけどKPTを使うとキレイにグラデーションできる」と教えてくれたデザイナーさんを思い出した。

[tettekete37564]

なるほどRGBじゃなくHSVで線形補完するのか

[skel]

そんな難しく考えなくても、くすんだところの色を選んでHSB（HSV）のSを上げれば同じことになるよ。

[chikoshoot]

言われてみれば、そりゃそうか、なんだけど。図にすると分かりやすいね。ともかく、きれいなグラデーションって癒される。

[imaginaration]

なるほど理解した！そして便利そうなツールだ。

[rogertroutman]

グラデーションの生成はRGBに変換してから行われるので、色の値を hsl() で書いてもクスミは解決しないんですよね。中間色をたくさん指定することになるのでHSLグラデーションもできるようになってほしい

[hamigakiniku]

タイトル文字で見せてくれるの好き　きれー