Silken Apricot のグラデーション

#E4DBA4 から #D4EDFF までの、3 色のリニア CSS グラデーションです。OKLCH で補間しているので、中間の色も鮮やかなままです。

パステル暖色黄色ピンク

カラーストップ

HEXRGBOKLCH位置
#E4DBA4 rgb(228, 219, 164) oklch(88.5% 0.072 99.9) 0%
#FFD1D4 rgb(255, 209, 212) oklch(90.1% 0.052 13.7) 50%
#D4EDFF rgb(212, 237, 255) oklch(93.3% 0.036 239.2) 100%

CSS

1つ目の宣言は、すべてのブラウザで使える通常の sRGB グラデーションです。2つ目は OKLCH で補間し、中間の色も両端と同じ鮮やかさに保ちます。

background: linear-gradient(225deg, #E4DBA4, #FFD1D4, #D4EDFF);
background: linear-gradient(225deg in oklch, #E4DBA4, #FFD1D4, #D4EDFF);

Tailwind CSS v4

bg-linear-225/oklch from-[#E4DBA4] via-[#FFD1D4] to-[#D4EDFF]

自分好みに仕上げる

Gradient Maker でストップ、角度、種類を変更するか、ストップをパレットに変換できます。