#F64F35 - #FCCCC5 | colorate

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

Blend #F64F35 to #FCCCC5

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

RGBブレンド

#F64F35 - #FCCCC5 | colorate

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

0.0%	0.0% #F64F35	RGB 246 79 53	#F64F35
16.7%	16.7% #F7634D	RGB 247 99 77	#F7634D
33.3%	33.3% #F87865	RGB 248 120 101	#F87865
50.0%	50.0% #F98D7D	RGB 249 141 125	#F98D7D
66.7%	66.7% #FAA295	RGB 250 162 149	#FAA295
83.3%	83.3% #FBB7AD	RGB 251 183 173	#FBB7AD
100.0%	100.0% #FCCCC5	RGB 252 204 197	#FCCCC5

#F64F35 #F7634D #F87865 #F98D7D #FAA295 #FBB7AD #FCCCC5

#F64F35 - #FCCCC5

HSVブレンド

#F64F35 - #FCCCC5 | colorate

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

0.0%	0.0% #F64F35	RGB 246 79 53	#F64F35
16.7%	16.7% #F7634C	RGB 247 99 76	#F7634C
33.3%	33.3% #F87764	RGB 248 119 100	#F87764
50.0%	50.0% #F98C7C	RGB 249 140 124	#F98C7C
66.7%	66.7% #FAA194	RGB 250 161 148	#FAA194
83.3%	83.3% #FBB6AC	RGB 251 182 172	#FBB6AC
100.0%	100.0% #FCCCC5	RGB 252 204 197	#FCCCC5

#F64F35 #F7634C #F87764 #F98C7C #FAA194 #FBB6AC #FCCCC5

#F64F35 - #F98C7C - #FCCCC5

CSSコード

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

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