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

rgb(125,251,171)

色の変へん換かん

形式表し方
Hex#7dfbab
RGB125,251,171
RGB(%)49%,98%,67%
CMY0.51,0.02,0.33
CMYK0.5,0.0,0.32,0.02
HSV142°,50%,98%
HSL142°,94%,74%

この色について

#7dfbabは明るめの色です

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

この色に似ている色(類似色)は#7dfbea,#7dedfbや#8efb7d,#aefb7dです

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

この色より明るい色

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

#b0fdcc

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

#e1feec

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

#ffffff

この色より暗い色

#7dfbabより10%暗い色:

#4dfa8c

#7dfbabより20%暗い色:

#1bf86c

#7dfbabより30%暗い色:

#07da54

#7dfbabより40%暗い色:

#05a841

#7dfbabより50%暗い色:

#04772e

#7dfbabより60%暗い色:

#02451b

#7dfbabより70%暗い色:

#011408

#7dfbabより74%暗い色:

#000000

この色よりあざやかな色

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

#79ffaa

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

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

#84f4ad

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

#8aeeaf

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

#91e7b0

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

#98e0b2

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

#9fd9b4

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

#a5d3b6

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

#acccb8

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

#b3c5b9

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

#b9bfbb

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

#bcbcbc

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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