#202221 - #395A46 | colorate

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

Blend #202221 to #395A46

#202221 #395A46

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

RGBブレンド

#202221 - #395A46 | colorate

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

0.0%	0.0% #202221	RGB 32 34 33	#202221
16.7%	16.7% #242B27	RGB 36 43 39	#242B27
33.3%	33.3% #28342D	RGB 40 52 45	#28342D
50.0%	50.0% #2C3E33	RGB 44 62 51	#2C3E33
66.7%	66.7% #304739	RGB 48 71 57	#304739
83.3%	83.3% #34503F	RGB 52 80 63	#34503F
100.0%	100.0% #395A46	RGB 57 90 70	#395A46

#202221 #242B27 #28342D #2C3E33 #304739 #34503F #395A46

#202221 - #395A46

HSVブレンド

#202221 - #395A46 | colorate

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

0.0%	0.0% #202221	RGB 32 34 33	#202221
16.7%	16.7% #262B28	RGB 38 43 40	#262B28
33.3%	33.3% #2C3430	RGB 44 52 48	#2C3430
50.0%	50.0% #303E36	RGB 48 62 54	#303E36
66.7%	66.7% #34473C	RGB 52 71 60	#34473C
83.3%	83.3% #375041	RGB 55 80 65	#375041
100.0%	100.0% #395A46	RGB 57 90 70	#395A46

#202221 #262B28 #2C3430 #303E36 #34473C #375041 #395A46

#202221 - #303E36 - #395A46

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #202221 0%, #303E36 50%, #395A46 100%);
    background: -webkit-linear-gradient(top, #202221 0%, #303E36 50%, #395A46 100%);
    background: linear-gradient(to bottom, #202221 0%, #303E36 50%, #395A46 100%);
}
</style>