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

rgb(206,231,238)

色の変へん換かん

形式表し方
Hex#cee7ee
RGB206,231,238
RGB(%)81%,91%,93%
CMY0.19,0.09,0.07
CMYK0.13,0.03,0.0,0.07
HSV193°,13%,93%
HSL193°,48%,87%

この色について

#cee7eeは明るめの色です

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

この色に似ている色(類似色)は#ced7ee,#cecfeeや#ceeee5,#ceeeddです

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

この色より明るい色

#cee7eeより10%明るい色:

#f4f9fb

#cee7eeより13%明るい色:

#ffffff

この色より暗い色

#cee7eeより10%暗い色:

#a8d4e1

#cee7eeより20%暗い色:

#82c2d4

#cee7eeより30%暗い色:

#5cafc7

#cee7eeより40%暗い色:

#3e99b2

#cee7eeより50%暗い色:

#31788c

#cee7eeより60%暗い色:

#235866

#cee7eeより70%暗い色:

#163740

#cee7eeより80%暗い色:

#09171b

#cee7eeより87%暗い色:

#000000

この色よりあざやかな色

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

#cbe9f1

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

#c8ebf4

#cee7eeより31%あざやかな色:

#c4ecf8

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

#c1eefb

#cee7eeより49%あざやかな色:

#bef0fe

#cee7eeより52%あざやかな色:

#bdf1ff

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

#cee7eeより9%あざやかさを下げた色:

#d1e5eb

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

#d5e3e7

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

#d8e1e4

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

#dbdfe1

#cee7eeより48%あざやかさを下げた色:

#dedede

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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