Quiet High Noon のグラデーション
#DEF2FF から #BF6E4A までの、4 色のリニア CSS グラデーションです。OKLCH で補間しているので、中間の色も鮮やかなままです。
カラーストップ
| HEX | RGB | OKLCH | 位置 |
|---|---|---|---|
| #DEF2FF | rgb(222, 242, 255) | oklch(95% 0.028 236.2) | 0% |
| #B0CBFF | rgb(176, 203, 255) | oklch(84% 0.079 263.3) | 33% |
| #B89FE8 | rgb(184, 159, 232) | oklch(75.1% 0.106 299.6) | 67% |
| #BF6E4A | rgb(191, 110, 74) | oklch(62.1% 0.115 44.1) | 100% |
CSS
1つ目の宣言は、すべてのブラウザで使える通常の sRGB グラデーションです。2つ目は OKLCH で補間し、中間の色も両端と同じ鮮やかさに保ちます。
background: linear-gradient(120deg, #DEF2FF, #B0CBFF, #B89FE8, #BF6E4A); background: linear-gradient(120deg in oklch, #DEF2FF, #B0CBFF, #B89FE8, #BF6E4A);
Tailwind CSS v4
bg-linear-[120deg_in_oklch,#DEF2FF,#B0CBFF,#B89FE8,#BF6E4A]
自分好みに仕上げる
Gradient Maker でストップ、角度、種類を変更するか、ストップをパレットに変換できます。
関連するグラデーション
- Cozy Windsweptlinear-gradient(90deg, #7B7FC2, #89AADF, #9BD8FF)
- Cozy Poppylinear-gradient(90deg, #0C003F, #FFA73D)
- Vivid Flamingolinear-gradient(135deg, #5C3C84, #F17107)
- Little High Noonlinear-gradient(315deg, #9D7F71, #D699B7, #C9B3FC, #DFF2FF)
- Little Sky Decklinear-gradient(200deg, #DBF3FF, #FFA4CB, #C26C49)
- Evening Skylarklinear-gradient(135deg, #FFE9E2, #C9A4FB, #538FAB)
- Lit Coral Skylinear-gradient(90deg, #26127A, #EC8422, #E1D669)
- Faded Rubylinear-gradient(225deg, #120C4A, #D27400)