#421D8F - #7ECCE4 | colorate

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

Blend #421D8F to #7ECCE4

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

RGBブレンド

#421D8F - #7ECCE4 | colorate

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

0.0%	0.0% #421D8F	RGB 66 29 143	#421D8F
16.7%	16.7% #4C3A9D	RGB 76 58 157	#4C3A9D
33.3%	33.3% #5657AB	RGB 86 87 171	#5657AB
50.0%	50.0% #6074B9	RGB 96 116 185	#6074B9
66.7%	66.7% #6A91C7	RGB 106 145 199	#6A91C7
83.3%	83.3% #74AED5	RGB 116 174 213	#74AED5
100.0%	100.0% #7ECCE4	RGB 126 204 228	#7ECCE4

#421D8F #4C3A9D #5657AB #6074B9 #6A91C7 #74AED5 #7ECCE4

#421D8F - #7ECCE4

HSVブレンド

#421D8F - #7ECCE4 | colorate

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

0.0%	0.0% #421D8F	RGB 66 29 143	#421D8F
16.7%	16.7% #39299D	RGB 57 41 157	#39299D
33.3%	33.3% #363BAB	RGB 54 59 171	#363BAB
50.0%	50.0% #465FB9	RGB 70 95 185	#465FB9
66.7%	66.7% #5784C7	RGB 87 132 199	#5784C7
83.3%	83.3% #69A8D5	RGB 105 168 213	#69A8D5
100.0%	100.0% #7ECCE4	RGB 126 204 228	#7ECCE4

#421D8F #39299D #363BAB #465FB9 #5784C7 #69A8D5 #7ECCE4

#421D8F - #465FB9 - #7ECCE4

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #421D8F 0%, #465FB9 50%, #7ECCE4 100%);
    background: -webkit-linear-gradient(top, #421D8F 0%, #465FB9 50%, #7ECCE4 100%);
    background: linear-gradient(to bottom, #421D8F 0%, #465FB9 50%, #7ECCE4 100%);
}
</style>