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

rgb(137,10,204)

色の変へん換かん

形式表し方
Hex#890acc
RGB137,10,204
RGB(%)54%,4%,80%
CMY0.46,0.96,0.2
CMYK0.33,0.95,0.0,0.2
HSV279°,95%,80%
HSL279°,91%,42%

この色について

#890accは暗めの色です

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

この色に似ている色(類似色)は#cc0aae,#cc0a7eや#280acc,#0a1dccです

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

この色より明るい色

#890accより10%明るい色:

#a716f4

#890accより20%明るい色:

#b946f6

#890accより30%明るい色:

#cc77f8

#890accより40%明るい色:

#dea7fb

#890accより50%明るい色:

#f0d8fd

#890accより58%明るい色:

#ffffff

この色より暗い色

#890accより10%暗い色:

#68089c

#890accより20%暗い色:

#48056b

#890accより30%暗い色:

#27033a

#890accより40%暗い色:

#07000a

#890accより42%暗い色:

#000000

この色よりあざやかな色

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

#8c00d6

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

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

#8614c2

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

#821fb7

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

#7f2aac

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

#7c34a2

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

#793f97

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

#754a8c

#890accより70%あざやかさを下げた色:

#725581

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

#6f5f77

#890accより90%あざやかさを下げた色:

#6b6a6c

#890accより91%あざやかさを下げた色:

#6b6b6b

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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