#57888F - #3B5D75 | colorate

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

Blend #57888F to #3B5D75

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

RGBブレンド

#57888F - #3B5D75 | colorate

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

0.0%	0.0% #57888F	RGB 87 136 143	#57888F
16.7%	16.7% #52808A	RGB 82 128 138	#52808A
33.3%	33.3% #4D7986	RGB 77 121 134	#4D7986
50.0%	50.0% #497282	RGB 73 114 130	#497282
66.7%	66.7% #446B7D	RGB 68 107 125	#446B7D
83.3%	83.3% #3F6479	RGB 63 100 121	#3F6479
100.0%	100.0% #3B5D75	RGB 59 93 117	#3B5D75

#57888F #52808A #4D7986 #497282 #446B7D #3F6479 #3B5D75

#57888F - #3B5D75

HSVブレンド

#57888F - #3B5D75 | colorate

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

0.0%	0.0% #57888F	RGB 87 136 143	#57888F
16.7%	16.7% #51808A	RGB 81 128 138	#51808A
33.3%	33.3% #4D7986	RGB 77 121 134	#4D7986
50.0%	50.0% #487282	RGB 72 114 130	#487282
66.7%	66.7% #436B7D	RGB 67 107 125	#436B7D
83.3%	83.3% #3F6479	RGB 63 100 121	#3F6479
100.0%	100.0% #3B5D75	RGB 59 93 117	#3B5D75

#57888F #51808A #4D7986 #487282 #436B7D #3F6479 #3B5D75

#57888F - #487282 - #3B5D75

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #57888F 0%, #487282 50%, #3B5D75 100%);
    background: -webkit-linear-gradient(top, #57888F 0%, #487282 50%, #3B5D75 100%);
    background: linear-gradient(to bottom, #57888F 0%, #487282 50%, #3B5D75 100%);
}
</style>