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

rgb(136,236,221)

色の変へん換かん

形式表し方
Hex#88ecdd
RGB136,236,221
RGB(%)53%,93%,87%
CMY0.47,0.07,0.13
CMYK0.42,0.0,0.06,0.07
HSV171°,42%,93%
HSL171°,72%,73%

この色について

#88ecddは明るめの色です

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

この色に似ている色(類似色)は#88c9ec,#88b0ecや#88ecab,#88ec92です

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

この色より明るい色

#88ecddより10%明るい色:

#b4f3ea

#88ecddより20%明るい色:

#e0faf6

#88ecddより27%明るい色:

#ffffff

この色より暗い色

#88ecddより10%暗い色:

#5ce5d1

#88ecddより20%暗い色:

#30dec4

#88ecddより30%暗い色:

#1ebda5

#88ecddより40%暗い色:

#17917f

#88ecddより50%暗い色:

#106558

#88ecddより60%暗い色:

#093932

#88ecddより70%暗い色:

#020d0c

#88ecddより73%暗い色:

#000000

この色よりあざやかな色

#88ecddより11%あざやかな色:

#81f3e2

#88ecddより19%あざやかな色:

#7bf9e6

#88ecddより28%あざやかな色:

#75ffea

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

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

#8fe5d8

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

#96ded3

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

#9dd7ce

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

#a4d0c9

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

#abc9c5

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

#b2c2c0

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

#b9bbbb

#88ecddより72%あざやかさを下げた色:

#bababa

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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