#317F8F - #8F3180 | colorate

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

Blend #317F8F to #8F3180

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

RGBブレンド

#317F8F - #8F3180 | colorate

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

0.0%	0.0% #317F8F	RGB 49 127 143	#317F8F
16.7%	16.7% #40728C	RGB 64 114 140	#40728C
33.3%	33.3% #50658A	RGB 80 101 138	#50658A
50.0%	50.0% #605887	RGB 96 88 135	#605887
66.7%	66.7% #6F4B85	RGB 111 75 133	#6F4B85
83.3%	83.3% #7F3E82	RGB 127 62 130	#7F3E82
100.0%	100.0% #8F3180	RGB 143 49 128	#8F3180

#317F8F #40728C #50658A #605887 #6F4B85 #7F3E82 #8F3180

#317F8F - #8F3180

HSVブレンド

#317F8F - #8F3180 | colorate

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

0.0%	0.0% #317F8F	RGB 49 127 143	#317F8F
16.7%	16.7% #315F8F	RGB 49 95 143	#315F8F
33.3%	33.3% #31408F	RGB 49 64 143	#31408F
50.0%	50.0% #40318F	RGB 64 49 143	#40318F
66.7%	66.7% #5F318F	RGB 95 49 143	#5F318F
83.3%	83.3% #7E318F	RGB 126 49 143	#7E318F
100.0%	100.0% #8F3180	RGB 143 49 128	#8F3180

#317F8F #315F8F #31408F #40318F #5F318F #7E318F #8F3180

#317F8F - #40318F - #8F3180

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #317F8F 0%, #40318F 50%, #8F3180 100%);
    background: -webkit-linear-gradient(top, #317F8F 0%, #40318F 50%, #8F3180 100%);
    background: linear-gradient(to bottom, #317F8F 0%, #40318F 50%, #8F3180 100%);
}
</style>