Soft Mango のグラデーション

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

ツートン黄色紫

カラーストップ

HEXRGBOKLCH位置
#190033 rgb(25, 0, 51) oklch(17.8% 0.095 300.2) 0%
#C08E00 rgb(192, 142, 0) oklch(67.7% 0.139 83.4) 100%

CSS

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

background: linear-gradient(200deg, #190033, #C08E00);
background: linear-gradient(200deg in oklch, #190033, #C08E00);

Tailwind CSS v4

bg-linear-200/oklch from-[#190033] to-[#C08E00]

自分好みに仕上げる

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