#378F46 - #45378F | colorate

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

Blend #378F46 to #45378F

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

RGBブレンド

#378F46 - #45378F | colorate

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

0.0%	0.0% #378F46	RGB 55 143 70	#378F46
16.7%	16.7% #398052	RGB 57 128 82	#398052
33.3%	33.3% #3B715E	RGB 59 113 94	#3B715E
50.0%	50.0% #3E636A	RGB 62 99 106	#3E636A
66.7%	66.7% #405476	RGB 64 84 118	#405476
83.3%	83.3% #424582	RGB 66 69 130	#424582
100.0%	100.0% #45378F	RGB 69 55 143	#45378F

#378F46 #398052 #3B715E #3E636A #405476 #424582 #45378F

#378F46 - #45378F

HSVブレンド

#378F46 - #45378F | colorate

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

0.0%	0.0% #378F45	RGB 55 143 69	#378F45
16.7%	16.7% #378F63	RGB 55 143 99	#378F63
33.3%	33.3% #378F80	RGB 55 143 128	#378F80
50.0%	50.0% #37808F	RGB 55 128 143	#37808F
66.7%	66.7% #37638F	RGB 55 99 143	#37638F
83.3%	83.3% #37468F	RGB 55 70 143	#37468F
100.0%	100.0% #45378F	RGB 69 55 143	#45378F

#378F45 #378F63 #378F80 #37808F #37638F #37468F #45378F

#378F46 - #37808F - #45378F

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #378F45 0%, #37808F 50%, #45378F 100%);
    background: -webkit-linear-gradient(top, #378F45 0%, #37808F 50%, #45378F 100%);
    background: linear-gradient(to bottom, #378F45 0%, #37808F 50%, #45378F 100%);
}
</style>