#33478F - #458F33 | colorate

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

Blend #33478F to #458F33

#33478F #458F33

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

RGBブレンド

#33478F - #458F33 | colorate

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

0.0%	0.0% #33478F	RGB 51 71 143	#33478F
16.7%	16.7% #36537F	RGB 54 83 127	#36537F
33.3%	33.3% #395F70	RGB 57 95 112	#395F70
50.0%	50.0% #3C6B61	RGB 60 107 97	#3C6B61
66.7%	66.7% #3F7751	RGB 63 119 81	#3F7751
83.3%	83.3% #428342	RGB 66 131 66	#428342
100.0%	100.0% #458F33	RGB 69 143 51	#458F33

#33478F #36537F #395F70 #3C6B61 #3F7751 #428342 #458F33

#33478F - #458F33

HSVブレンド

#33478F - #458F33 | colorate

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

0.0%	0.0% #33468F	RGB 51 70 143	#33468F
16.7%	16.7% #33658F	RGB 51 101 143	#33658F
33.3%	33.3% #33838F	RGB 51 131 143	#33838F
50.0%	50.0% #338F7C	RGB 51 143 124	#338F7C
66.7%	66.7% #338F5D	RGB 51 143 93	#338F5D
83.3%	83.3% #338F3F	RGB 51 143 63	#338F3F
100.0%	100.0% #458F33	RGB 69 143 51	#458F33

#33468F #33658F #33838F #338F7C #338F5D #338F3F #458F33

#33478F - #338F7C - #458F33

CSSコード

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

/* HSV Gradation */
div {
    background: -moz-linear-gradient(top, #33468F 0%, #338F7C 50%, #458F33 100%);
    background: -webkit-linear-gradient(top, #33468F 0%, #338F7C 50%, #458F33 100%);
    background: linear-gradient(to bottom, #33468F 0%, #338F7C 50%, #458F33 100%);
}
</style>