#F30110 - #5C0C14 | colorate

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

Blend #F30110 to #5C0C14

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

RGBブレンド

#F30110 - #5C0C14 | colorate

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

0.0%	0.0% #F30110	RGB 243 1 16	#F30110
16.7%	16.7% #D90210	RGB 217 2 16	#D90210
33.3%	33.3% #C00411	RGB 192 4 17	#C00411
50.0%	50.0% #A70612	RGB 167 6 18	#A70612
66.7%	66.7% #8E0812	RGB 142 8 18	#8E0812
83.3%	83.3% #750A13	RGB 117 10 19	#750A13
100.0%	100.0% #5C0C14	RGB 92 12 20	#5C0C14

#F30110 #D90210 #C00411 #A70612 #8E0812 #750A13 #5C0C14

#F30110 - #5C0C14

HSVブレンド

#F30110 - #5C0C14 | colorate

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

0.0%	0.0% #F3000F	RGB 243 0 15	#F3000F
16.7%	16.7% #D90513	RGB 217 5 19	#D90513
33.3%	33.3% #C00816	RGB 192 8 22	#C00816
50.0%	50.0% #A70B17	RGB 167 11 23	#A70B17
66.7%	66.7% #8E0C17	RGB 142 12 23	#8E0C17
83.3%	83.3% #750C16	RGB 117 12 22	#750C16
100.0%	100.0% #5C0C14	RGB 92 12 20	#5C0C14

#F3000F #D90513 #C00816 #A70B17 #8E0C17 #750C16 #5C0C14

#F30110 - #A70B17 - #5C0C14

CSSコード

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

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