#303E8F - #3E8F30 | colorate

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

Blend #303E8F to #3E8F30

#303E8F

#3E8F30

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

RGBブレンド

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

0.0%	0.0% #303E8F	RGB 48 62 143	#303E8F
16.7%	16.7% #324B80	RGB 50 75 128	#324B80
33.3%	33.3% #345970	RGB 52 89 112	#345970
50.0%	50.0% #376660	RGB 55 102 96	#376660
66.7%	66.7% #397450	RGB 57 116 80	#397450
83.3%	83.3% #3B8140	RGB 59 129 64	#3B8140
100.0%	100.0% #3E8F30	RGB 62 143 48	#3E8F30

#303E8F #324B80 #345970 #376660 #397450 #3B8140 #3E8F30

#303E8F - #3E8F30

HSVブレンド

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

0.0%	0.0% #303D8F	RGB 48 61 143	#303D8F
16.7%	16.7% #305D8F	RGB 48 93 143	#305D8F
33.3%	33.3% #307D8F	RGB 48 125 143	#307D8F
50.0%	50.0% #308F81	RGB 48 143 129	#308F81
66.7%	66.7% #308F61	RGB 48 143 97	#308F61
83.3%	83.3% #308F41	RGB 48 143 65	#308F41
100.0%	100.0% #3D8F30	RGB 61 143 48	#3D8F30

#303D8F #305D8F #307D8F #308F81 #308F61 #308F41 #3D8F30

#303D8F - #308F81 - #3D8F30

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #303D8F 0%, #308F81 50%, #3D8F30 100%);
    background: -webkit-linear-gradient(top, #303D8F 0%, #308F81 50%, #3D8F30 100%);
    background: linear-gradient(to bottom, #303D8F 0%, #308F81 50%, #3D8F30 100%); 
}
</style>