#FFDF3C - #ECF277 | colorate

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

Blend #FFDF3C to #ECF277

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

RGBブレンド

#FFDF3C - #ECF277 | colorate

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

0.0%	0.0% #FFDF3C	RGB 255 223 60	#FFDF3C
16.7%	16.7% #FBE245	RGB 251 226 69	#FBE245
33.3%	33.3% #F8E54F	RGB 248 229 79	#F8E54F
50.0%	50.0% #F5E859	RGB 245 232 89	#F5E859
66.7%	66.7% #F2EB63	RGB 242 235 99	#F2EB63
83.3%	83.3% #EFEE6D	RGB 239 238 109	#EFEE6D
100.0%	100.0% #ECF277	RGB 236 242 119	#ECF277

#FFDF3C #FBE245 #F8E54F #F5E859 #F2EB63 #EFEE6D #ECF277

#FFDF3C - #ECF277

HSVブレンド

#FFDF3C - #ECF277 | colorate

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

0.0%	0.0% #FFDF3B	RGB 255 223 59	#FFDF3B
16.7%	16.7% #FCE546	RGB 252 229 70	#FCE546
33.3%	33.3% #FAEA50	RGB 250 234 80	#FAEA50
50.0%	50.0% #F8EF5A	RGB 248 239 90	#F8EF5A
66.7%	66.7% #F6F364	RGB 246 243 100	#F6F364
83.3%	83.3% #F2F46D	RGB 242 244 109	#F2F46D
100.0%	100.0% #ECF277	RGB 236 242 119	#ECF277

#FFDF3B #FCE546 #FAEA50 #F8EF5A #F6F364 #F2F46D #ECF277

#FFDF3C - #F8EF5A - #ECF277

CSSコード

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

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