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

rgb(190,239,255)

色の変へん換かん

形式表し方
Hex#beefff
RGB190,239,255
RGB(%)75%,94%,100%
CMY0.25,0.06,0.0
CMYK0.25,0.06,0.0,0.0
HSV195°,25%,100%
HSL195°,100%,87%

この色について

#beefffは明るめの色です

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

この色に似ている色(類似色)は#beceff,#bebeffや#beffee,#beffdeです

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

この色より明るい色

#beefffより10%明るい色:

#f0fbff

#beefffより13%明るい色:

#ffffff

この色より暗い色

#beefffより10%暗い色:

#8ae2ff

#beefffより20%暗い色:

#57d6ff

#beefffより30%暗い色:

#24c9ff

#beefffより40%暗い色:

#00b5f0

#beefffより50%暗い色:

#008ebd

#beefffより60%暗い色:

#00688a

#beefffより70%暗い色:

#004157

#beefffより80%暗い色:

#001b24

#beefffより87%暗い色:

#000000

この色よりあざやかな色

この色が一番あざやかな色です

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

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

#c1edfc

#beefffより18%あざやかさを下げた色:

#c4ecf9

#beefffより31%あざやかさを下げた色:

#c8eaf5

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

#cbe8f2

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

#cee7ef

#beefffより61%あざやかさを下げた色:

#d1e5eb

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

#d5e3e8

#beefffより80%あざやかさを下げた色:

#d8e2e5

#beefffより89%あざやかさを下げた色:

#dbe0e2

#beefffより100%あざやかさを下げた色:

#dedede

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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