#B22222 - #98370D | colorate

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

Blend #B22222 to #98370D

#B22222 #98370D

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

RGBブレンド

#B22222 - #98370D | colorate

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

0.0%	0.0% #B22222	RGB 178 34 34	#B22222
16.7%	16.7% #AD251E	RGB 173 37 30	#AD251E
33.3%	33.3% #A9291B	RGB 169 41 27	#A9291B
50.0%	50.0% #A52C17	RGB 165 44 23	#A52C17
66.7%	66.7% #A03014	RGB 160 48 20	#A03014
83.3%	83.3% #9C3310	RGB 156 51 16	#9C3310
100.0%	100.0% #98370D	RGB 152 55 13	#98370D

#B22222 #AD251E #A9291B #A52C17 #A03014 #9C3310 #98370D

#B22222 - #98370D

HSVブレンド

#B22222 - #98370D | colorate

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

0.0%	0.0% #B22222	RGB 178 34 34	#B22222
16.7%	16.7% #AD251E	RGB 173 37 30	#AD251E
33.3%	33.3% #A9281A	RGB 169 40 26	#A9281A
50.0%	50.0% #A52C16	RGB 165 44 22	#A52C16
66.7%	66.7% #A02F13	RGB 160 47 19	#A02F13
83.3%	83.3% #9C3310	RGB 156 51 16	#9C3310
100.0%	100.0% #98370D	RGB 152 55 13	#98370D

#B22222 #AD251E #A9281A #A52C16 #A02F13 #9C3310 #98370D

#B22222 - #A52C16 - #98370D

CSSコード

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

/* HSV Gradation */
div {
    background: -moz-linear-gradient(top, #B22222 0%, #A52C16 50%, #98370D 100%);
    background: -webkit-linear-gradient(top, #B22222 0%, #A52C16 50%, #98370D 100%);
    background: linear-gradient(to bottom, #B22222 0%, #A52C16 50%, #98370D 100%);
}
</style>