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

rgb(173,236,219)

色の変へん換かん

形式表し方
Hex#adecdb
RGB173,236,219
RGB(%)68%,93%,86%
CMY0.32,0.07,0.14
CMYK0.27,0.0,0.07,0.07
HSV164°,27%,93%
HSL164°,62%,80%

この色について

#adecdbは明るめの色です

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

この色に似ている色(類似色)は#addeec,#adceecや#adecbc,#aeecadです

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

この色より明るい色

#adecdbより10%明るい色:

#d6f5ed

#adecdbより20%明るい色:

#ffffff

この色より暗い色

#adecdbより10%暗い色:

#83e2c8

#adecdbより20%暗い色:

#59d9b6

#adecdbより30%暗い色:

#30cfa4

#adecdbより40%暗い色:

#26a683

#adecdbより50%暗い色:

#1d7c62

#adecdbより60%暗い色:

#135342

#adecdbより70%暗い色:

#0a2921

#adecdbより80%暗い色:

#000000

この色よりあざやかな色

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

#a8f1dd

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

#a3f6e0

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

#9efbe2

#adecdbより38%あざやかな色:

#9affe4

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

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

#b2e7d9

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

#b7e2d6

#adecdbより29%あざやかさを下げた色:

#bcddd4

#adecdbより39%あざやかさを下げた色:

#c1d8d2

#adecdbより49%あざやかさを下げた色:

#c6d3cf

#adecdbより59%あざやかさを下げた色:

#cbcecd

#adecdbより62%あざやかさを下げた色:

#cdcdcd

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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