#30331F - #331F30 | colorate

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

Blend #30331F to #331F30

#30331F #331F30

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

RGBブレンド

#30331F - #331F30 | colorate

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

0.0%	0.0% #30331F	RGB 48 51 31	#30331F
16.7%	16.7% #302F21	RGB 48 47 33	#302F21
33.3%	33.3% #312C24	RGB 49 44 36	#312C24
50.0%	50.0% #312927	RGB 49 41 39	#312927
66.7%	66.7% #32252A	RGB 50 37 42	#32252A
83.3%	83.3% #32222D	RGB 50 34 45	#32222D
100.0%	100.0% #331F30	RGB 51 31 48	#331F30

#30331F #302F21 #312C24 #312927 #32252A #32222D #331F30

#30331F - #331F30

HSVブレンド

#30331F - #331F30 | colorate

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

0.0%	0.0% #30331F	RGB 48 51 31	#30331F
16.7%	16.7% #332F1F	RGB 51 47 31	#332F1F
33.3%	33.3% #33281F	RGB 51 40 31	#33281F
50.0%	50.0% #33221F	RGB 51 34 31	#33221F
66.7%	66.7% #331F22	RGB 51 31 34	#331F22
83.3%	83.3% #331F29	RGB 51 31 41	#331F29
100.0%	100.0% #331F30	RGB 51 31 48	#331F30

#30331F #332F1F #33281F #33221F #331F22 #331F29 #331F30

#30331F - #33221F - #331F30

CSSコード

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

/* HSV Gradation */
div {
    background: -moz-linear-gradient(top, #30331F 0%, #33221F 50%, #331F30 100%);
    background: -webkit-linear-gradient(top, #30331F 0%, #33221F 50%, #331F30 100%);
    background: linear-gradient(to bottom, #30331F 0%, #33221F 50%, #331F30 100%);
}
</style>