#8F4031 - #31808F | colorate

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

Blend #8F4031 to #31808F

#8F4031

#31808F

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

RGBブレンド

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

0.0%	0.0% #8F4031	RGB 143 64 49	#8F4031
16.7%	16.7% #804A40	RGB 128 74 64	#804A40
33.3%	33.3% #705550	RGB 112 85 80	#705550
50.0%	50.0% #606060	RGB 96 96 96	#606060
66.7%	66.7% #516A6F	RGB 81 106 111	#516A6F
83.3%	83.3% #41757F	RGB 65 117 127	#41757F
100.0%	100.0% #31808F	RGB 49 128 143	#31808F

#8F4031 #804A40 #705550 #606060 #516A6F #41757F #31808F

#8F4031 - #31808F

HSVブレンド

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

0.0%	0.0% #8F4031	RGB 143 64 49	#8F4031
16.7%	16.7% #8F6F31	RGB 143 111 49	#8F6F31
33.3%	33.3% #808F31	RGB 128 143 49	#808F31
50.0%	50.0% #518F31	RGB 81 143 49	#518F31
66.7%	66.7% #318F40	RGB 49 143 64	#318F40
83.3%	83.3% #318F6F	RGB 49 143 111	#318F6F
100.0%	100.0% #317F8F	RGB 49 127 143	#317F8F

#8F4031 #8F6F31 #808F31 #518F31 #318F40 #318F6F #317F8F

#8F4031 - #518F31 - #317F8F

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #8F4031 0%, #518F31 50%, #317F8F 100%);
    background: -webkit-linear-gradient(top, #8F4031 0%, #518F31 50%, #317F8F 100%);
    background: linear-gradient(to bottom, #8F4031 0%, #518F31 50%, #317F8F 100%); 
}
</style>