#453E5E - #8163CF | colorate

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

Blend #453E5E to #8163CF

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

RGBブレンド

#453E5E - #8163CF | colorate

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

0.0%	0.0% #453E5E	RGB 69 62 94	#453E5E
16.7%	16.7% #4F4470	RGB 79 68 112	#4F4470
33.3%	33.3% #594A83	RGB 89 74 131	#594A83
50.0%	50.0% #635096	RGB 99 80 150	#635096
66.7%	66.7% #6D56A9	RGB 109 86 169	#6D56A9
83.3%	83.3% #775CBC	RGB 119 92 188	#775CBC
100.0%	100.0% #8163CF	RGB 129 99 207	#8163CF

#453E5E #4F4470 #594A83 #635096 #6D56A9 #775CBC #8163CF

#453E5E - #8163CF

HSVブレンド

#453E5E - #8163CF | colorate

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

0.0%	0.0% #453E5E	RGB 69 62 94	#453E5E
16.7%	16.7% #504770	RGB 80 71 112	#504770
33.3%	33.3% #5B4E83	RGB 91 78 131	#5B4E83
50.0%	50.0% #655596	RGB 101 85 150	#655596
66.7%	66.7% #6F5BA9	RGB 111 91 169	#6F5BA9
83.3%	83.3% #785FBC	RGB 120 95 188	#785FBC
100.0%	100.0% #8163CF	RGB 129 99 207	#8163CF

#453E5E #504770 #5B4E83 #655596 #6F5BA9 #785FBC #8163CF

#453E5E - #655596 - #8163CF

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #453E5E 0%, #655596 50%, #8163CF 100%);
    background: -webkit-linear-gradient(top, #453E5E 0%, #655596 50%, #8163CF 100%);
    background: linear-gradient(to bottom, #453E5E 0%, #655596 50%, #8163CF 100%);
}
</style>