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

rgb(173,186,204)

色の変へん換かん

形式表し方
Hex#adbacc
RGB173,186,204
RGB(%)68%,73%,80%
CMY0.32,0.27,0.2
CMYK0.15,0.09,0.0,0.2
HSV215°,15%,80%
HSL215°,23%,74%

この色について

#adbaccは明るめの色です

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

この色に似ている色(類似色)は#b0adcc,#b7adccや#adcacc,#adccc7です

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

この色より明るい色

#adbaccより10%明るい色:

#cdd5e0

#adbaccより20%明るい色:

#eceff3

#adbaccより26%明るい色:

#ffffff

この色より暗い色

#adbaccより10%暗い色:

#8ea0b9

#adbaccより20%暗い色:

#6e85a5

#adbaccより30%暗い色:

#566c8a

#adbaccより40%暗い色:

#42536b

#adbaccより50%暗い色:

#2f3b4b

#adbaccより60%暗い色:

#1b222c

#adbaccより70%暗い色:

#080a0d

#adbaccより74%暗い色:

#000000

この色よりあざやかな色

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

#a7b9d2

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

#a0b8d9

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

#99b7e0

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

#93b6e6

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

#8cb5ed

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

#85b4f4

#adbaccより69%あざやかな色:

#7fb3fa

#adbaccより77%あざやかな色:

#7ab2ff

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

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

#b4bbc5

#adbaccより21%あざやかさを下げた色:

#bbbcbe

#adbaccより23%あざやかさを下げた色:

#bdbdbd

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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