[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

626users がブックマーク コメント 63

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

626 users coliss.com

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント63件

  • 注目コメント
  • 新着コメント
オーナーコメントを固定しています
coliss
オーナー グラデーションを作成した時に、中央がグレーに濁ってしまうこと(グレーデッドゾーン)。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法。

その他
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
ああ、うん。反対色でグラデーションするとそうなりますよね。

その他
motti0804
RGBは、各チャネルの値が近いとグレー(低彩度)になる。CSSグラデは、両端2色のRGBをチャネル毎に平均して、各点でのRGBを決めてる→真ん中らへんは各チャネルの値が近くなりがち ...って感じか。なるほど。

その他
オーナーコメントを固定しています
coliss
オーナー coliss グラデーションを作成した時に、中央がグレーに濁ってしまうこと(グレーデッドゾーン)。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法。

2022年01月27日 リンク

その他
text-sakura-ne-jp
CSSで色のグラデーションを作る時のコツを紹介。色を『RGB』で指定するか『HSL』で指定するかで、見た目に違いが出る。色を『HSL』で指定した方が見た目がきれいになる。

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

その他
IGA-OS
ナルホドなぁ

その他
craftone
勉強になった

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

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

2022年01月28日 リンク

その他
BRITAN
なるほどね〜

その他
shoh8
へー。

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

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

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

その他
hrmitsumane
知らんかった🤭

その他
coherent_sheaf
HSLを使うと回避できる

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

その他
kikinight
RGBとCMYKしか知らなかった。

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

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

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

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

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

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

2022年01月28日 リンク

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

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

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

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

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

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

その他
hogashi
便利そう

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

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

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「グラデーションの...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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

ブックマークしたユーザー

  • akatsuki59302025年01月04日 akatsuki5930
  • mtr80802024年10月29日 mtr8080
  • tasra2024年10月29日 tasra
  • text-sakura-ne-jp2024年07月18日 text-sakura-ne-jp
  • rna2023年08月14日 rna
  • lugecy2022年12月19日 lugecy
  • techtech05212022年12月17日 techtech0521
  • otakudust2022年09月14日 otakudust
  • neo21842022年06月11日 neo2184
  • imadedede2022年04月12日 imadedede
  • ram10092022年04月11日 ram1009
  • greenbow2022年04月10日 greenbow
  • aceraceae2022年04月09日 aceraceae
  • somathor2022年04月09日 somathor
  • shion2142022年02月22日 shion214
  • otori3342022年02月12日 otori334
  • FUmanma2022年02月09日 FUmanma
  • electromancer2022年02月01日 electromancer
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /