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

rgb(71,60,190)

色の変へん換かん

形式表し方
Hex#473cbe
RGB71,60,190
RGB(%)28%,24%,75%
CMY0.72,0.76,0.25
CMYK0.63,0.68,0.0,0.25
HSV245°,68%,75%
HSL245°,52%,49%

この色について

#473cbeは暗めの色です

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

この色に似ている色(類似色)は#8839c1,#aa39c1や#3972c1,#3993c1です

この色とバランスが良い色(トライアド配色)は#c14539と#39c145です

この色より明るい色

#473cbeより10%明るい色:

#6960cd

#473cbeより20%明るい色:

#8e87d9

#473cbeより30%明るい色:

#b2aee5

#473cbeより40%明るい色:

#d7d4f2

#473cbeより50%明るい色:

#fbfbfe

#473cbeより51%明るい色:

#ffffff

この色より暗い色

#473cbeより10%暗い色:

#383097

#473cbeより20%暗い色:

#2a2370

#473cbeより30%暗い色:

#1c174a

#473cbeより40%暗い色:

#0d0b23

#473cbeより49%暗い色:

#000000

この色よりあざやかな色

#473cbeより13%あざやかな色:

#3a2cce

#473cbeより23%あざやかな色:

#2f1fdb

#473cbeより34%あざやかな色:

#2412e8

#473cbeより44%あざやかな色:

#1a05f5

#473cbeより48%あざやかな色:

#1600ff

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

#473cbeより8%あざやかさを下げた色:

#5046b4

#473cbeより18%あざやかさを下げた色:

#5a53a7

#473cbeより29%あざやかさを下げた色:

#65609a

#473cbeより39%あざやかさを下げた色:

#706d8d

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

#7b7a80

#473cbeより52%あざやかさを下げた色:

#7d7d7d

この色に似ている色

色のブレピュー

#473cbeを背景色として利用する

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

#473cbeを文字色として利用する

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

#473cbeを線の色として利用する

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

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

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

#473cbeを文字の影の色として利用する

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