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

rgb(175,173,220)

色の変へん換かん

形式表し方
Hex#afaddc
RGB175,173,220
RGB(%)69%,68%,86%
CMY0.31,0.32,0.14
CMYK0.2,0.21,0.0,0.14
HSV243°,21%,86%
HSL243°,40%,77%

この色について

#afaddcは明るめの色です

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

この色に似ている色(類似色)は#c6addc,#d2addcや#adc3dc,#adcedcです

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

この色より明るい色

#afaddcより10%明るい色:

#d2d1eb

#afaddcより20%明るい色:

#f5f4fa

#afaddcより23%明るい色:

#ffffff

この色より暗い色

#afaddcより10%暗い色:

#8c89cd

#afaddcより20%暗い色:

#6965bd

#afaddcより30%暗い色:

#4c48a8

#afaddcより40%暗い色:

#3c3884

#afaddcより50%暗い色:

#2c2961

#afaddcより60%暗い色:

#1b1a3d

#afaddcより70%暗い色:

#0b0b19

#afaddcより77%暗い色:

#000000

この色よりあざやかな色

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

#aaa7e2

#afaddcより21%あざやかな色:

#a4a1e8

#afaddcより29%あざやかな色:

#9f9ced

#afaddcより39%あざやかな色:

#9a96f3

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

#9490f9

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

#8f8aff

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

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

#b4b3d6

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

#bab9d0

#afaddcより31%あざやかさを下げた色:

#bfbfca

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

#c5c5c5

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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