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

rgb(125,191,251)

色の変へん換かん

形式表し方
Hex#7dbffb
RGB125,191,251
RGB(%)49%,75%,98%
CMY0.51,0.25,0.02
CMYK0.5,0.24,0.0,0.02
HSV209°,50%,98%
HSL209°,94%,74%

この色について

#7dbffbは明るめの色です

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

この色に似ている色(類似色)は#7d80fb,#997dfbや#7dfbf8,#7dfbd8です

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

この色より明るい色

#7dbffbより10%明るい色:

#b0d8fd

#7dbffbより20%明るい色:

#e1f0fe

#7dbffbより26%明るい色:

#ffffff

この色より暗い色

#7dbffbより10%暗い色:

#4da7fa

#7dbffbより20%暗い色:

#1b8ff8

#7dbffbより30%暗い色:

#0775da

#7dbffbより40%暗い色:

#055ba8

#7dbffbより50%暗い色:

#044077

#7dbffbより60%暗い色:

#022545

#7dbffbより70%暗い色:

#010b14

#7dbffbより74%暗い色:

#000000

この色よりあざやかな色

#7dbffbより6%あざやかな色:

#79bfff

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

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

#84bff4

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

#8abeee

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

#91bee7

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

#98bee0

#7dbffbより51%あざやかさを下げた色:

#9fbdd9

#7dbffbより60%あざやかさを下げた色:

#a5bdd3

#7dbffbより70%あざやかさを下げた色:

#acbdcc

#7dbffbより81%あざやかさを下げた色:

#b3bcc5

#7dbffbより90%あざやかさを下げた色:

#b9bcbf

#7dbffbより94%あざやかさを下げた色:

#bcbcbc

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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