#FF8224 - #F0CB3C | colorate

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

Blend #FF8224 to #F0CB3C

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

RGBブレンド

#FF8224 - #F0CB3C | colorate

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

0.0%	0.0% #FF8224	RGB 255 130 36	#FF8224
16.7%	16.7% #FC8E28	RGB 252 142 40	#FC8E28
33.3%	33.3% #FA9A2C	RGB 250 154 44	#FA9A2C
50.0%	50.0% #F7A630	RGB 247 166 48	#F7A630
66.7%	66.7% #F5B234	RGB 245 178 52	#F5B234
83.3%	83.3% #F2BE38	RGB 242 190 56	#F2BE38
100.0%	100.0% #F0CB3C	RGB 240 203 60	#F0CB3C

#FF8224 #FC8E28 #FA9A2C #F7A630 #F5B234 #F2BE38 #F0CB3C

#FF8224 - #F0CB3C

HSVブレンド

#FF8224 - #F0CB3C | colorate

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

0.0%	0.0% #FF8223	RGB 255 130 35	#FF8223
16.7%	16.7% #FC9028	RGB 252 144 40	#FC9028
33.3%	33.3% #FA9D2C	RGB 250 157 44	#FA9D2C
50.0%	50.0% #F7AA30	RGB 247 170 48	#F7AA30
66.7%	66.7% #F5B534	RGB 245 181 52	#F5B534
83.3%	83.3% #F2C038	RGB 242 192 56	#F2C038
100.0%	100.0% #F0CB3C	RGB 240 203 60	#F0CB3C

#FF8223 #FC9028 #FA9D2C #F7AA30 #F5B534 #F2C038 #F0CB3C

#FF8224 - #F7AA30 - #F0CB3C

CSSコード

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

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