#317663 - #9CC182 | colorate

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

Blend #317663 to #9CC182

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

RGBブレンド

#317663 - #9CC182 | colorate

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

0.0%	0.0% #317663	RGB 49 118 99	#317663
16.7%	16.7% #428268	RGB 66 130 104	#428268
33.3%	33.3% #548F6D	RGB 84 143 109	#548F6D
50.0%	50.0% #669B72	RGB 102 155 114	#669B72
66.7%	66.7% #78A877	RGB 120 168 119	#78A877
83.3%	83.3% #8AB47C	RGB 138 180 124	#8AB47C
100.0%	100.0% #9CC182	RGB 156 193 130	#9CC182

#317663 #428268 #548F6D #669B72 #78A877 #8AB47C #9CC182

#317663 - #9CC182

HSVブレンド

#317663 - #9CC182 | colorate

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

0.0%	0.0% #317663	RGB 49 118 99	#317663
16.7%	16.7% #3B8261	RGB 59 130 97	#3B8261
33.3%	33.3% #478F60	RGB 71 143 96	#478F60
50.0%	50.0% #549B5F	RGB 84 155 95	#549B5F
66.7%	66.7% #65A862	RGB 101 168 98	#65A862
83.3%	83.3% #80B471	RGB 128 180 113	#80B471
100.0%	100.0% #9CC182	RGB 156 193 130	#9CC182

#317663 #3B8261 #478F60 #549B5F #65A862 #80B471 #9CC182

#317663 - #549B5F - #9CC182

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #317663 0%, #549B5F 50%, #9CC182 100%);
    background: -webkit-linear-gradient(top, #317663 0%, #549B5F 50%, #9CC182 100%);
    background: linear-gradient(to bottom, #317663 0%, #549B5F 50%, #9CC182 100%);
}
</style>