#36363D - #7F7062 | colorate

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

Blend #36363D to #7F7062

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

RGBブレンド

#36363D - #7F7062 | colorate

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

0.0%	0.0% #36363D	RGB 54 54 61	#36363D
16.7%	16.7% #423F43	RGB 66 63 67	#423F43
33.3%	33.3% #4E4949	RGB 78 73 73	#4E4949
50.0%	50.0% #5A534F	RGB 90 83 79	#5A534F
66.7%	66.7% #665C55	RGB 102 92 85	#665C55
83.3%	83.3% #72665B	RGB 114 102 91	#72665B
100.0%	100.0% #7F7062	RGB 127 112 98	#7F7062

#36363D #423F43 #4E4949 #5A534F #665C55 #72665B #7F7062

#36363D - #7F7062

HSVブレンド

#36363D - #7F7062 | colorate

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

0.0%	0.0% #36363D	RGB 54 54 61	#36363D
16.7%	16.7% #423E48	RGB 66 62 72	#423E48
33.3%	33.3% #504653	RGB 80 70 83	#504653
50.0%	50.0% #5E4D5A	RGB 94 77 90	#5E4D5A
66.7%	66.7% #69545B	RGB 105 84 91	#69545B
83.3%	83.3% #745D5B	RGB 116 93 91	#745D5B
100.0%	100.0% #7F7062	RGB 127 112 98	#7F7062

#36363D #423E48 #504653 #5E4D5A #69545B #745D5B #7F7062

#36363D - #5E4D5A - #7F7062

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #36363D 0%, #5E4D5A 50%, #7F7062 100%);
    background: -webkit-linear-gradient(top, #36363D 0%, #5E4D5A 50%, #7F7062 100%);
    background: linear-gradient(to bottom, #36363D 0%, #5E4D5A 50%, #7F7062 100%);
}
</style>