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

rgb(71,6,81)

色の変へん換かん

形式表し方
Hex#470651
RGB71,6,81
RGB(%)28%,2%,32%
CMY0.72,0.98,0.68
CMYK0.12,0.93,0.0,0.68
HSV292°,93%,32%
HSL292°,86%,17%

この色について

#470651は暗めの色です

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

この色に似ている色(類似色)は#510636,#510623や#220651,#0f0651です

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

この色より明るい色

#470651より10%明るい色:

#700980

#470651より20%明るい色:

#9a0db0

#470651より30%明るい色:

#c411df

#470651より40%明るい色:

#d733f0

#470651より50%明るい色:

#e062f3

#470651より60%明るい色:

#e992f7

#470651より70%明るい色:

#f3c1fa

#470651より80%明るい色:

#fcf1fe

#470651より83%明るい色:

#ffffff

この色より暗い色

#470651より10%暗い色:

#1d0221

#470651より17%暗い色:

#000000

この色よりあざやかな色

#470651より9%あざやかな色:

#4a0255

#470651より14%あざやかな色:

#4b0057

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

#470651より9%あざやかさを下げた色:

#440a4d

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

#410f48

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

#3d1344

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

#3a1740

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

#371c3b

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

#342037

#470651より71%あざやかさを下げた色:

#312532

#470651より80%あざやかさを下げた色:

#2d292e

#470651より86%あざやかさを下げた色:

#2b2b2b

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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