#2B718F - #003A38 | colorate

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

Blend #2B718F to #003A38

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

RGBブレンド

#2B718F - #003A38 | colorate

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

0.0%	0.0% #2B718F	RGB 43 113 143	#2B718F
16.7%	16.7% #236780	RGB 35 103 128	#236780
33.3%	33.3% #1C5E72	RGB 28 94 114	#1C5E72
50.0%	50.0% #155563	RGB 21 85 99	#155563
66.7%	66.7% #0E4C55	RGB 14 76 85	#0E4C55
83.3%	83.3% #074346	RGB 7 67 70	#074346
100.0%	100.0% #003A38	RGB 0 58 56	#003A38

#2B718F #236780 #1C5E72 #155563 #0E4C55 #074346 #003A38

#2B718F - #003A38

HSVブレンド

#2B718F - #003A38 | colorate

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

0.0%	0.0% #2B718F	RGB 43 113 143	#2B718F
16.7%	16.7% #206980	RGB 32 105 128	#206980
33.3%	33.3% #166172	RGB 22 97 114	#166172
50.0%	50.0% #0F5964	RGB 15 89 100	#0F5964
66.7%	66.7% #085056	RGB 8 80 86	#085056
83.3%	83.3% #034648	RGB 3 70 72	#034648
100.0%	100.0% #003A38	RGB 0 58 56	#003A38

#2B718F #206980 #166172 #0F5964 #085056 #034648 #003A38

#2B718F - #0F5964 - #003A38

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #2B718F 0%, #0F5964 50%, #003A38 100%);
    background: -webkit-linear-gradient(top, #2B718F 0%, #0F5964 50%, #003A38 100%);
    background: linear-gradient(to bottom, #2B718F 0%, #0F5964 50%, #003A38 100%);
}
</style>