#FF996D - #E54D22 | colorate

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

Blend #FF996D to #E54D22

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

RGBブレンド

#FF996D - #E54D22 | colorate

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

0.0%	0.0% #FF996D	RGB 255 153 109	#FF996D
16.7%	16.7% #FA8C60	RGB 250 140 96	#FA8C60
33.3%	33.3% #F67F54	RGB 246 127 84	#F67F54
50.0%	50.0% #F27347	RGB 242 115 71	#F27347
66.7%	66.7% #ED663B	RGB 237 102 59	#ED663B
83.3%	83.3% #E9592E	RGB 233 89 46	#E9592E
100.0%	100.0% #E54D22	RGB 229 77 34	#E54D22

#FF996D #FA8C60 #F67F54 #F27347 #ED663B #E9592E #E54D22

#FF996D - #E54D22

HSVブレンド

#FF996D - #E54D22 | colorate

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

0.0%	0.0% #FF996D	RGB 255 153 109	#FF996D
16.7%	16.7% #FA8C5F	RGB 250 140 95	#FA8C5F
33.3%	33.3% #F67F52	RGB 246 127 82	#F67F52
50.0%	50.0% #F27245	RGB 242 114 69	#F27245
66.7%	66.7% #ED6639	RGB 237 102 57	#ED6639
83.3%	83.3% #E9592D	RGB 233 89 45	#E9592D
100.0%	100.0% #E54D22	RGB 229 77 34	#E54D22

#FF996D #FA8C5F #F67F52 #F27245 #ED6639 #E9592D #E54D22

#FF996D - #F27245 - #E54D22

CSSコード

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

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