HEX(16進しん数すう)#486ddb に対応するRGB(10進しん数すう)は...

rgb(72,109,219)

色の変へん換かん

形式表し方
Hex#486ddb
RGB72,109,219
RGB(%)28%,43%,86%
CMY0.72,0.57,0.14
CMYK0.67,0.5,0.0,0.14
HSV225°,67%,86%
HSL225°,67%,57%

この色について

#486ddbは暗めの色です

この色の反対の色(補色)は#dbb648です

この色に似ている色(類似色)は#6c48db,#9148dbや#48b7db,#48dbdbです

この色とバランスが良い色(トライアド配色)は#db486dと#6ddb48です

この色より明るい色

#486ddbより10%明るい色:

#728fe3

#486ddbより20%明るい色:

#9db1ec

#486ddbより30%明るい色:

#c8d3f4

#486ddbより40%明るい色:

#f2f5fc

#486ddbより43%明るい色:

#ffffff

この色より暗い色

#486ddbより10%暗い色:

#2750c8

#486ddbより20%暗い色:

#1f3f9e

#486ddbより30%暗い色:

#172e73

#486ddbより40%暗い色:

#0e1d48

#486ddbより50%暗い色:

#060c1e

#486ddbより57%暗い色:

#000000

この色よりあざやかな色

#486ddbより10%あざやかな色:

#3d68e6

#486ddbより20%あざやかな色:

#3262f1

#486ddbより30%あざやかな色:

#275dfc

#486ddbより33%あざやかな色:

#245bff

この色よりあざやかさを下げた色

#486ddbより10%あざやかさを下げた色:

#5373d0

#486ddbより20%あざやかさを下げた色:

#5e78c5

#486ddbより30%あざやかさを下げた色:

#697dba

#486ddbより40%あざやかさを下げた色:

#7483af

#486ddbより50%あざやかさを下げた色:

#7f88a4

#486ddbより60%あざやかさを下げた色:

#8a8e99

#486ddbより67%あざやかさを下げた色:

#919191

この色に似ている色

色のブレピュー

#486ddbを背景色として利用する

#486ddbに白文字を表示する
白の文字が表示されています
background: #486ddb;
color: white;
#486ddbに黒文字を表示する
黒の文字が表示されています
background: #486ddb;
color: black;

#486ddbを文字色として利用する

白背景に#486ddbを文字色として表示する
白の背景に文字が表示されています
background: white;
color: #486ddb;
黒背景に#486ddbを文字色として表示する
黒の背景に文字が表示されています
background: black;
color: #486ddb;

#486ddbを線の色として利用する

白背景に#486ddbを線の色として表示する
1pxの#486ddbの線に囲まれています
border: 1px solid #486ddb;
color: #4a4a4a;
2pxの#486ddbの線に囲まれています
border: 2px solid #486ddb;
color: #4a4a4a;
3pxの#486ddbの線に囲まれています
border: 3px solid #486ddb;
color: #4a4a4a;
黒背景に#486ddbを線の色として表示する
1pxの#486ddbの線に囲まれています
border: 1px solid #486ddb;
background: black;
color: white;
2pxの#486ddbの線に囲まれています
border: 2px solid #486ddb;
background: black;
color: white;
3pxの#486ddbの線に囲まれています
border: 3px solid #486ddb;
background: black;
color: white;

#486ddbをボックスの影の色として利用する

白背景に#486ddbを影の色として表示する
#486ddbの影に囲まれています
box-shadow: 0 2px 5px #486ddb;
color: #4a4a4a;
#486ddbを80%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(72,109,219,0.8);
color: #4a4a4a;
#486ddbを60%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(72,109,219,0.6);
color: #4a4a4a;
#486ddbを40%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(72,109,219,0.4);
color: #4a4a4a;
#486ddbを20%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(72,109,219,0.2);
color: #4a4a4a;
黒背景に#486ddbを影の色として表示する
#486ddbの影に囲まれています
box-shadow: 0 2px 5px #486ddb;
background: black;
color: white;
#486ddbを80%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(72,109,219,0.8);
background: black;
color: white;
#486ddbを60%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(72,109,219,0.6);
background: black;
color: white;
#486ddbを40%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(72,109,219,0.4);
background: black;
color: white;
#486ddbを20%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(72,109,219,0.2);
background: black;
color: white;

#486ddbを文字の影の色として利用する

#486ddbを黒文字の影の色として表示する
#486ddbの影に囲まれています
text-shadow: 2px 2px 3px #486ddb;
color: #4a4a4a;
#486ddbを80%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(72,109,219,0.8);
color: #4a4a4a;
#486ddbを60%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(72,109,219,0.6);
color: #4a4a4a;
#486ddbを40%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(72,109,219,0.4);
color: #4a4a4a;
#486ddbを20%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(72,109,219,0.2);
color: #4a4a4a;
#486ddbを白文字の影の色として表示する
#486ddbの影に囲まれています
text-shadow: 2px 2px 3px #486ddb;
background: black;
color: white;
#486ddbを80%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(72,109,219,0.8);
background: black;
color: white;
#486ddbを60%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(72,109,219,0.6);
background: black;
color: white;
#486ddbを40%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(72,109,219,0.4);
background: black;
color: white;
#486ddbを20%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(72,109,219,0.2);
background: black;
color: white;