#37648F - #9090E5 | colorate

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

Blend #37648F to #9090E5

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

RGBブレンド

#37648F - #9090E5 | colorate

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

0.0%	0.0% #37648F	RGB 55 100 143	#37648F
16.7%	16.7% #456B9D	RGB 69 107 157	#456B9D
33.3%	33.3% #5472AB	RGB 84 114 171	#5472AB
50.0%	50.0% #637ABA	RGB 99 122 186	#637ABA
66.7%	66.7% #7281C8	RGB 114 129 200	#7281C8
83.3%	83.3% #8188D6	RGB 129 136 214	#8188D6
100.0%	100.0% #9090E5	RGB 144 144 229	#9090E5

#37648F #456B9D #5472AB #637ABA #7281C8 #8188D6 #9090E5

#37648F - #9090E5

HSVブレンド

#37648F - #9090E5 | colorate

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

0.0%	0.0% #37648F	RGB 55 100 143	#37648F
16.7%	16.7% #42699D	RGB 66 105 157	#42699D
33.3%	33.3% #4F6FAB	RGB 79 111 171	#4F6FAB
50.0%	50.0% #5E75BA	RGB 94 117 186	#5E75BA
66.7%	66.7% #6D7DC8	RGB 109 125 200	#6D7DC8
83.3%	83.3% #7E85D6	RGB 126 133 214	#7E85D6
100.0%	100.0% #9090E5	RGB 144 144 229	#9090E5

#37648F #42699D #4F6FAB #5E75BA #6D7DC8 #7E85D6 #9090E5

#37648F - #5E75BA - #9090E5

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #37648F 0%, #5E75BA 50%, #9090E5 100%);
    background: -webkit-linear-gradient(top, #37648F 0%, #5E75BA 50%, #9090E5 100%);
    background: linear-gradient(to bottom, #37648F 0%, #5E75BA 50%, #9090E5 100%);
}
</style>