#487BCD - #CAD9F0 | colorate

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

Blend #487BCD to #CAD9F0

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

RGBブレンド

#487BCD - #CAD9F0 | colorate

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

0.0%	0.0% #487BCD	RGB 72 123 205	#487BCD
16.7%	16.7% #5D8AD2	RGB 93 138 210	#5D8AD2
33.3%	33.3% #739AD8	RGB 115 154 216	#739AD8
50.0%	50.0% #89AADE	RGB 137 170 222	#89AADE
66.7%	66.7% #9EB9E4	RGB 158 185 228	#9EB9E4
83.3%	83.3% #B4C9EA	RGB 180 201 234	#B4C9EA
100.0%	100.0% #CAD9F0	RGB 202 217 240	#CAD9F0

#487BCD #5D8AD2 #739AD8 #89AADE #9EB9E4 #B4C9EA #CAD9F0

#487BCD - #CAD9F0

HSVブレンド

#487BCD - #CAD9F0 | colorate

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

0.0%	0.0% #477ACD	RGB 71 122 205	#477ACD
16.7%	16.7% #5B89D2	RGB 91 137 210	#5B89D2
33.3%	33.3% #6F98D8	RGB 111 152 216	#6F98D8
50.0%	50.0% #84A7DE	RGB 132 167 222	#84A7DE
66.7%	66.7% #9AB7E4	RGB 154 183 228	#9AB7E4
83.3%	83.3% #B1C8EA	RGB 177 200 234	#B1C8EA
100.0%	100.0% #CAD9F0	RGB 202 217 240	#CAD9F0

#477ACD #5B89D2 #6F98D8 #84A7DE #9AB7E4 #B1C8EA #CAD9F0

#487BCD - #84A7DE - #CAD9F0

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #477ACD 0%, #84A7DE 50%, #CAD9F0 100%);
    background: -webkit-linear-gradient(top, #477ACD 0%, #84A7DE 50%, #CAD9F0 100%);
    background: linear-gradient(to bottom, #477ACD 0%, #84A7DE 50%, #CAD9F0 100%);
}
</style>