#0050A1 - #00162E | colorate

colorateはデザイナーや開発者向けの配色ツールです。あなたのインスピレーションを引き出し、よりよい配色の構成に役立ちます。サイトをよりよくする

Blend #0050A1 to #00162E

#0050A1と#00162Eの二色間の色を演算します。色味の近い色同士では滑らかですが、RGB値をもとにした通常のブレンドでは、色味の遠い色同士の中間の色は彩度が低くなりグレーに近くなります。HSV値をもとにしたブレンドでは、色味の遠い色同士でも彩度の低下はありません。

RGBブレンド

#0050A1 - #00162E | colorate

RGB値をもとにした二色間のブレンドです。色味の離れた色同士では、二色間の彩度は低下します。#0050A1を0%、#00162Eを100%として二色間の色を展開します。

0.0%	0.0% #0050A1	RGB 0 80 161	#0050A1
16.7%	16.7% #00468D	RGB 0 70 141	#00468D
33.3%	33.3% #003C7A	RGB 0 60 122	#003C7A
50.0%	50.0% #003367	RGB 0 51 103	#003367
66.7%	66.7% #002954	RGB 0 41 84	#002954
83.3%	83.3% #001F41	RGB 0 31 65	#001F41
100.0%	100.0% #00162E	RGB 0 22 46	#00162E

#0050A1 #00468D #003C7A #003367 #002954 #001F41 #00162E

#0050A1 - #00162E

HSVブレンド

#0050A1 - #00162E | colorate

HSV値をもとにした二色間のブレンドです。色味の離れた色同士でも、二色間の彩度は低下しません。#0050A1を0%、#00162Eを100%として二色間の色を展開します。

0.0%	0.0% #0050A1	RGB 0 80 161	#0050A1
16.7%	16.7% #00468D	RGB 0 70 141	#00468D
33.3%	33.3% #003C7A	RGB 0 60 122	#003C7A
50.0%	50.0% #003267	RGB 0 50 103	#003267
66.7%	66.7% #002854	RGB 0 40 84	#002854
83.3%	83.3% #001F41	RGB 0 31 65	#001F41
100.0%	100.0% #00162E	RGB 0 22 46	#00162E

#0050A1 #00468D #003C7A #003267 #002854 #001F41 #00162E

#0050A1 - #003267 - #00162E

CSSコード

<style type="text/css">
/* RGB Gradient */
div {
    background: -moz-linear-gradient(top, #0050A1 0%, #00162E 100%);
    background: -webkit-linear-gradient(top, #0050A1 0%, #00162E 100%);
    background: linear-gradient(to bottom, #0050A1 0%, #00162E 100%);
}

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #0050A1 0%, #003267 50%, #00162E 100%);
    background: -webkit-linear-gradient(top, #0050A1 0%, #003267 50%, #00162E 100%);
    background: linear-gradient(to bottom, #0050A1 0%, #003267 50%, #00162E 100%);
}
</style>