#F4A460 - #FFD34A | colorate

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

Blend #F4A460 to #FFD34A

#F4A460 #FFD34A

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

RGBブレンド

#F4A460 - #FFD34A | colorate

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

0.0%	0.0% #F4A460	RGB 244 164 96	#F4A460
16.7%	16.7% #F5AB5C	RGB 245 171 92	#F5AB5C
33.3%	33.3% #F7B358	RGB 247 179 88	#F7B358
50.0%	50.0% #F9BB55	RGB 249 187 85	#F9BB55
66.7%	66.7% #FBC351	RGB 251 195 81	#FBC351
83.3%	83.3% #FDCB4D	RGB 253 203 77	#FDCB4D
100.0%	100.0% #FFD34A	RGB 255 211 74	#FFD34A

#F4A460 #F5AB5C #F7B358 #F9BB55 #FBC351 #FDCB4D #FFD34A

#F4A460 - #FFD34A

HSVブレンド

#F4A460 - #FFD34A | colorate

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

0.0%	0.0% #F4A460	RGB 244 164 96	#F4A460
16.7%	16.7% #F5AA5C	RGB 245 170 92	#F5AA5C
33.3%	33.3% #F7B158	RGB 247 177 88	#F7B158
50.0%	50.0% #F9B955	RGB 249 185 85	#F9B955
66.7%	66.7% #FBC151	RGB 251 193 81	#FBC151
83.3%	83.3% #FDC94D	RGB 253 201 77	#FDC94D
100.0%	100.0% #FFD34A	RGB 255 211 74	#FFD34A

#F4A460 #F5AA5C #F7B158 #F9B955 #FBC151 #FDC94D #FFD34A

#F4A460 - #F9B955 - #FFD34A

CSSコード

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

/* HSV Gradation */
div {
    background: -moz-linear-gradient(top, #F4A460 0%, #F9B955 50%, #FFD34A 100%);
    background: -webkit-linear-gradient(top, #F4A460 0%, #F9B955 50%, #FFD34A 100%);
    background: linear-gradient(to bottom, #F4A460 0%, #F9B955 50%, #FFD34A 100%);
}
</style>