#F30110 - #FF4C00 | colorate

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

Blend #F30110 to #FF4C00

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

RGBブレンド

#F30110 - #FF4C00 | colorate

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

0.0%	0.0% #F30110	RGB 243 1 16	#F30110
16.7%	16.7% #F50D0D	RGB 245 13 13	#F50D0D
33.3%	33.3% #F71A0A	RGB 247 26 10	#F71A0A
50.0%	50.0% #F92608	RGB 249 38 8	#F92608
66.7%	66.7% #FB3305	RGB 251 51 5	#FB3305
83.3%	83.3% #FD3F02	RGB 253 63 2	#FD3F02
100.0%	100.0% #FF4C00	RGB 255 76 0	#FF4C00

#F30110 #F50D0D #F71A0A #F92608 #FB3305 #FD3F02 #FF4C00

#F30110 - #FF4C00

HSVブレンド

#F30110 - #FF4C00 | colorate

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

0.0%	0.0% #F3000F	RGB 243 0 15	#F3000F
16.7%	16.7% #F50001	RGB 245 0 1	#F50001
33.3%	33.3% #F70E00	RGB 247 14 0	#F70E00
50.0%	50.0% #F91D00	RGB 249 29 0	#F91D00
66.7%	66.7% #FB2C00	RGB 251 44 0	#FB2C00
83.3%	83.3% #FD3C00	RGB 253 60 0	#FD3C00
100.0%	100.0% #FF4C00	RGB 255 76 0	#FF4C00

#F3000F #F50001 #F70E00 #F91D00 #FB2C00 #FD3C00 #FF4C00

#F30110 - #F91D00 - #FF4C00

CSSコード

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

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