#31383C - #373C31 | colorate

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

Blend #31383C to #373C31

#31383C #373C31

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

RGBブレンド

#31383C - #373C31 | colorate

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

0.0%	0.0% #31383C	RGB 49 56 60	#31383C
16.7%	16.7% #32383A	RGB 50 56 58	#32383A
33.3%	33.3% #333938	RGB 51 57 56	#333938
50.0%	50.0% #343A36	RGB 52 58 54	#343A36
66.7%	66.7% #353A34	RGB 53 58 52	#353A34
83.3%	83.3% #363B32	RGB 54 59 50	#363B32
100.0%	100.0% #373C31	RGB 55 60 49	#373C31

#31383C #32383A #333938 #343A36 #353A34 #363B32 #373C31

#31383C - #373C31

HSVブレンド

#31383C - #373C31 | colorate

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

0.0%	0.0% #31383C	RGB 49 56 60	#31383C
16.7%	16.7% #313B3C	RGB 49 59 60	#313B3C
33.3%	33.3% #313C39	RGB 49 60 57	#313C39
50.0%	50.0% #313C35	RGB 49 60 53	#313C35
66.7%	66.7% #313C32	RGB 49 60 50	#313C32
83.3%	83.3% #333C31	RGB 51 60 49	#333C31
100.0%	100.0% #373C31	RGB 55 60 49	#373C31

#31383C #313B3C #313C39 #313C35 #313C32 #333C31 #373C31

#31383C - #313C35 - #373C31

CSSコード

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

/* HSV Gradation */
div {
    background: -moz-linear-gradient(top, #31383C 0%, #313C35 50%, #373C31 100%);
    background: -webkit-linear-gradient(top, #31383C 0%, #313C35 50%, #373C31 100%);
    background: linear-gradient(to bottom, #31383C 0%, #313C35 50%, #373C31 100%);
}
</style>