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

rgb(174,218,221)

色の変へん換かん

形式表し方
Hex#aedadd
RGB174,218,221
RGB(%)68%,85%,87%
CMY0.32,0.15,0.13
CMYK0.21,0.01,0.0,0.13
HSV184°,21%,87%
HSL184°,41%,77%

この色について

#aedaddは明るめの色です

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

この色に似ている色(類似色)は#aec2dd,#aeb7ddや#aeddc9,#aeddbdです

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

この色より明るい色

#aedaddより10%明るい色:

#d0eaeb

#aedaddより20%明るい色:

#f4fafa

#aedaddより23%明るい色:

#ffffff

この色より暗い色

#aedaddより10%暗い色:

#88c9cd

#aedaddより20%暗い色:

#65b8be

#aedaddより30%暗い色:

#47a3a9

#aedaddより40%暗い色:

#388085

#aedaddより50%暗い色:

#295d61

#aedaddより60%暗い色:

#1a3b3d

#aedaddより70%暗い色:

#0b1819

#aedaddより77%暗い色:

#000000

この色よりあざやかな色

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

#a8dfe3

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

#a2e4e9

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

#9de9ee

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

#97eef4

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

#91f3fa

#aedaddより59%あざやかな色:

#8cf8ff

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

#aedaddより11%あざやかさを下げた色:

#b4d5d7

#aedaddより19%あざやかさを下げた色:

#b9d0d2

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

#bfcbcc

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

#c5c6c6

#aedaddより41%あざやかさを下げた色:

#c6c6c6

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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