#553B8F - #748F3B | colorate

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

Blend #553B8F to #748F3B

#553B8F

#748F3B

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

RGBブレンド

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

0.0%	0.0% #553B8F	RGB 85 59 143	#553B8F
16.7%	16.7% #5A4981	RGB 90 73 129	#5A4981
33.3%	33.3% #5F5773	RGB 95 87 115	#5F5773
50.0%	50.0% #646565	RGB 100 101 101	#646565
66.7%	66.7% #697357	RGB 105 115 87	#697357
83.3%	83.3% #6E8149	RGB 110 129 73	#6E8149
100.0%	100.0% #748F3B	RGB 116 143 59	#748F3B

#553B8F #5A4981 #5F5773 #646565 #697357 #6E8149 #748F3B

#553B8F - #748F3B

HSVブレンド

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

0.0%	0.0% #553B8F	RGB 85 59 143	#553B8F
16.7%	16.7% #3B4A8F	RGB 59 74 143	#3B4A8F
33.3%	33.3% #3B748F	RGB 59 116 143	#3B748F
50.0%	50.0% #3B8F7F	RGB 59 143 127	#3B8F7F
66.7%	66.7% #3B8F55	RGB 59 143 85	#3B8F55
83.3%	83.3% #4A8F3B	RGB 74 143 59	#4A8F3B
100.0%	100.0% #748F3B	RGB 116 143 59	#748F3B

#553B8F #3B4A8F #3B748F #3B8F7F #3B8F55 #4A8F3B #748F3B

#553B8F - #3B8F7F - #748F3B

CSSコード

<style type="text/css">
/* RGB Gradation */             
div {
    background: -moz-linear-gradient(top, #553B8F 0%, #748F3B 100%);
    background: -webkit-linear-gradient(top, #553B8F 0%, #748F3B 100%);
    background: linear-gradient(to bottom, #553B8F 0%, #748F3B 100%);  
}       

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #553B8F 0%, #3B8F7F 50%, #748F3B 100%);
    background: -webkit-linear-gradient(top, #553B8F 0%, #3B8F7F 50%, #748F3B 100%);
    background: linear-gradient(to bottom, #553B8F 0%, #3B8F7F 50%, #748F3B 100%); 
}
</style>