#31111E - #663653 | colorate

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

Blend #31111E to #663653

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

RGBブレンド

#31111E - #663653 | colorate

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

0.0%	0.0% #31111E	RGB 49 17 30	#31111E
16.7%	16.7% #391726	RGB 57 23 38	#391726
33.3%	33.3% #421D2F	RGB 66 29 47	#421D2F
50.0%	50.0% #4B2338	RGB 75 35 56	#4B2338
66.7%	66.7% #542941	RGB 84 41 65	#542941
83.3%	83.3% #5D2F4A	RGB 93 47 74	#5D2F4A
100.0%	100.0% #663653	RGB 102 54 83	#663653

#31111E #391726 #421D2F #4B2338 #542941 #5D2F4A #663653

#31111E - #663653

HSVブレンド

#31111E - #663653 | colorate

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

0.0%	0.0% #31111E	RGB 49 17 30	#31111E
16.7%	16.7% #391525	RGB 57 21 37	#391525
33.3%	33.3% #421B2D	RGB 66 27 45	#421B2D
50.0%	50.0% #4B2136	RGB 75 33 54	#4B2136
66.7%	66.7% #54273F	RGB 84 39 63	#54273F
83.3%	83.3% #5D2E49	RGB 93 46 73	#5D2E49
100.0%	100.0% #663653	RGB 102 54 83	#663653

#31111E #391525 #421B2D #4B2136 #54273F #5D2E49 #663653

#31111E - #4B2136 - #663653

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #31111E 0%, #4B2136 50%, #663653 100%);
    background: -webkit-linear-gradient(top, #31111E 0%, #4B2136 50%, #663653 100%);
    background: linear-gradient(to bottom, #31111E 0%, #4B2136 50%, #663653 100%);
}
</style>