#FF80B0 - #ECF0FF | colorate

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

Blend #FF80B0 to #ECF0FF

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

RGBブレンド

#FF80B0 - #ECF0FF | colorate

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

0.0%	0.0% #FF80B0	RGB 255 128 176	#FF80B0
16.7%	16.7% #FB92BD	RGB 251 146 189	#FB92BD
33.3%	33.3% #F8A5CA	RGB 248 165 202	#F8A5CA
50.0%	50.0% #F5B8D7	RGB 245 184 215	#F5B8D7
66.7%	66.7% #F2CAE4	RGB 242 202 228	#F2CAE4
83.3%	83.3% #EFDDF1	RGB 239 221 241	#EFDDF1
100.0%	100.0% #ECF0FF	RGB 236 240 255	#ECF0FF

#FF80B0 #FB92BD #F8A5CA #F5B8D7 #F2CAE4 #EFDDF1 #ECF0FF

#FF80B0 - #ECF0FF

HSVブレンド

#FF80B0 - #ECF0FF | colorate

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

0.0%	0.0% #FF80B0	RGB 255 128 176	#FF80B0
16.7%	16.7% #FF92DC	RGB 255 146 220	#FF92DC
33.3%	33.3% #FFA4FD	RGB 255 164 253	#FFA4FD
50.0%	50.0% #E9B6FF	RGB 233 182 255	#E9B6FF
66.7%	66.7% #DEC8FF	RGB 222 200 255	#DEC8FF
83.3%	83.3% #DDDAFF	RGB 221 218 255	#DDDAFF
100.0%	100.0% #ECF0FF	RGB 236 240 255	#ECF0FF

#FF80B0 #FF92DC #FFA4FD #E9B6FF #DEC8FF #DDDAFF #ECF0FF

#FF80B0 - #E9B6FF - #ECF0FF

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #FF80B0 0%, #E9B6FF 50%, #ECF0FF 100%);
    background: -webkit-linear-gradient(top, #FF80B0 0%, #E9B6FF 50%, #ECF0FF 100%);
    background: linear-gradient(to bottom, #FF80B0 0%, #E9B6FF 50%, #ECF0FF 100%);
}
</style>