Deep Orchid のグラデーション

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

ダーク紫ピンク

カラーストップ

HEXRGBOKLCH位置
#5A2D3E rgb(90, 45, 62) oklch(36.2% 0.069 357.1) 0%
#2E0654 rgb(46, 6, 84) oklch(25.5% 0.125 300.1) 50%
#00182A rgb(0, 24, 42) oklch(20.1% 0.048 242.7) 100%

CSS

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

background: linear-gradient(45deg, #5A2D3E, #2E0654, #00182A);
background: linear-gradient(45deg in oklch, #5A2D3E, #2E0654, #00182A);

Tailwind CSS v4

bg-linear-45/oklch from-[#5A2D3E] via-[#2E0654] to-[#00182A]

自分好みに仕上げる

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