#9AB5E6 - #3E62AE | colorate

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

Blend #9AB5E6 to #3E62AE

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

RGBブレンド

#9AB5E6 - #3E62AE | colorate

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

0.0%	0.0% #9AB5E6	RGB 154 181 230	#9AB5E6
16.7%	16.7% #8AA7DC	RGB 138 167 220	#8AA7DC
33.3%	33.3% #7B99D3	RGB 123 153 211	#7B99D3
50.0%	50.0% #6C8BCA	RGB 108 139 202	#6C8BCA
66.7%	66.7% #5C7DC0	RGB 92 125 192	#5C7DC0
83.3%	83.3% #4D6FB7	RGB 77 111 183	#4D6FB7
100.0%	100.0% #3E62AE	RGB 62 98 174	#3E62AE

#9AB5E6 #8AA7DC #7B99D3 #6C8BCA #5C7DC0 #4D6FB7 #3E62AE

#9AB5E6 - #3E62AE

HSVブレンド

#9AB5E6 - #3E62AE | colorate

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

0.0%	0.0% #9AB5E6	RGB 154 181 230	#9AB5E6
16.7%	16.7% #88A5DC	RGB 136 165 220	#88A5DC
33.3%	33.3% #7797D3	RGB 119 151 211	#7797D3
50.0%	50.0% #6788CA	RGB 103 136 202	#6788CA
66.7%	66.7% #587BC0	RGB 88 123 192	#587BC0
83.3%	83.3% #4A6EB7	RGB 74 110 183	#4A6EB7
100.0%	100.0% #3E62AE	RGB 62 98 174	#3E62AE

#9AB5E6 #88A5DC #7797D3 #6788CA #587BC0 #4A6EB7 #3E62AE

#9AB5E6 - #6788CA - #3E62AE

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #9AB5E6 0%, #6788CA 50%, #3E62AE 100%);
    background: -webkit-linear-gradient(top, #9AB5E6 0%, #6788CA 50%, #3E62AE 100%);
    background: linear-gradient(to bottom, #9AB5E6 0%, #6788CA 50%, #3E62AE 100%);
}
</style>