#688F31 - #58318F | colorate

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

Blend #688F31 to #58318F

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

RGBブレンド

#688F31 - #58318F | colorate

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

0.0%	0.0% #688F31	RGB 104 143 49	#688F31
16.7%	16.7% #657F40	RGB 101 127 64	#657F40
33.3%	33.3% #626F50	RGB 98 111 80	#626F50
50.0%	50.0% #606060	RGB 96 96 96	#606060
66.7%	66.7% #5D506F	RGB 93 80 111	#5D506F
83.3%	83.3% #5A407F	RGB 90 64 127	#5A407F
100.0%	100.0% #58318F	RGB 88 49 143	#58318F

#688F31 #657F40 #626F50 #606060 #5D506F #5A407F #58318F

#688F31 - #58318F

HSVブレンド

#688F31 - #58318F | colorate

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

0.0%	0.0% #688F31	RGB 104 143 49	#688F31
16.7%	16.7% #398F31	RGB 57 143 49	#398F31
33.3%	33.3% #318F58	RGB 49 143 88	#318F58
50.0%	50.0% #318F86	RGB 49 143 134	#318F86
66.7%	66.7% #31678F	RGB 49 103 143	#31678F
83.3%	83.3% #31398F	RGB 49 57 143	#31398F
100.0%	100.0% #58318F	RGB 88 49 143	#58318F

#688F31 #398F31 #318F58 #318F86 #31678F #31398F #58318F

#688F31 - #318F86 - #58318F

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #688F31 0%, #318F86 50%, #58318F 100%);
    background: -webkit-linear-gradient(top, #688F31 0%, #318F86 50%, #58318F 100%);
    background: linear-gradient(to bottom, #688F31 0%, #318F86 50%, #58318F 100%);
}
</style>