Tender Orchid のグラデーション

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

モノクロ紫

カラーストップ

HEXRGBOKLCH位置
#4A1953 rgb(74, 25, 83) oklch(31.7% 0.11 321.1) 0%
#F8D4FF rgb(248, 212, 255) oklch(91.3% 0.069 320.8) 100%

CSS

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

background: linear-gradient(180deg, #4A1953, #F8D4FF);
background: linear-gradient(180deg in oklch, #4A1953, #F8D4FF);

Tailwind CSS v4

bg-linear-180/oklch from-[#4A1953] to-[#F8D4FF]

自分好みに仕上げる

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