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

rgb(72,86,72)

色の変へん換かん

形式表し方
Hex#485648
RGB72,86,72
RGB(%)28%,34%,28%
CMY0.72,0.66,0.72
CMYK0.16,0.0,0.16,0.66
HSV120°,16%,34%
HSL120°,9%,31%

この色について

#485648は暗めの色です

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

この色に似ている色(類似色)は#48564f,#485653や#4f5648,#535648です

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

この色より明るい色

#485648より10%明るい色:

#5f725f

#485648より20%明るい色:

#778d77

#485648より30%明るい色:

#93a493

#485648より40%明るい色:

#aebcae

#485648より50%明るい色:

#cad3ca

#485648より60%明るい色:

#e6eae6

#485648より69%明るい色:

#ffffff

この色より暗い色

#485648より10%暗い色:

#313a31

#485648より20%暗い色:

#1a1f1a

#485648より30%暗い色:

#020302

#485648より31%暗い色:

#000000

この色よりあざやかな色

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

#405e40

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

#386638

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

#306e30

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

#287628

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

#207e20

#485648より61%あざやかな色:

#188618

#485648より69%あざやかな色:

#118d11

#485648より80%あざやかな色:

#099509

#485648より90%あざやかな色:

#019d01

#485648より91%あざやかな色:

#009e00

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

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

#4f4f4f

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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