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

rgb(71,132,100)

色の変へん換かん

形式表し方
Hex#478464
RGB71,132,100
RGB(%)28%,52%,39%
CMY0.72,0.48,0.61
CMYK0.46,0.0,0.24,0.48
HSV149°,46%,52%
HSL149°,30%,40%

この色について

#478464は暗めの色です

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

この色に似ている色(類似色)は#478483,#477684や#498447,#588447です

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

この色より明るい色

#478464より10%明るい色:

#59a67e

#478464より20%明るい色:

#7ab897

#478464より30%明るい色:

#9cc9b1

#478464より40%明るい色:

#bddbcb

#478464より50%明るい色:

#deede5

#478464より60%明るい色:

#ffffff

この色より暗い色

#478464より10%暗い色:

#36634b

#478464より20%暗い色:

#244232

#478464より30%暗い色:

#122119

#478464より40%暗い色:

#000000

この色よりあざやかな色

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

#3d8e64

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

#339863

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

#29a263

#478464より40%あざやかな色:

#1ead62

#478464より50%あざやかな色:

#14b762

#478464より60%あざやかな色:

#0ac161

#478464より70%あざやかな色:

#00cb61

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

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

#517a65

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

#5b7065

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

#666666

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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