在 html/php 中为输入 RGB 值在框中显示颜色答案

【问题标题】：Display the Color in a box for input RGB values in html/php在 html/php 中为输入 RGB 值在框中显示颜色
【发布时间】：2021-04-25 18:30:22
【问题描述】：

下面给出的代码将在提交后给出十六进制值，但我还需要一个方形框，并在框中填充相应的颜色。想要得到红色、绿色和蓝色的值，并且想要在一个方框中显示那个 RGB 值的颜色。

<head>
<style type="text/css">

#redv:focus {
  background-color: PowderBlue;
}
#bluev:focus {
  background-color: PowderBlue;
}

#greenv:focus {
  background-color: PowderBlue;
}

#button1:hover {
  background-color: CadetBlue; 
  font-size: 16px;
  color: white; 
  border: 2px solid #008CBA;
}

#button1 {
  background-color: #008CBA;
  font-size: 16px;
  color: white;
}



input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 102px;
    height: 102px;
}



</style>
</head>

<body>  
<form>  
Enter Red Value:  
<input type="number" id="redv" name="red" value="0" max="255"/> (Max:255)<br><br>

Enter Green Value:  
<input type="number" id="greenv" name="green" value="0" max="255"/> (Max:255) <br><br>

Enter Blue Value:  
<input type="number" id="bluev" name="blue" value="0" max="255"/>(Max:255) <br><br>

<input  type="submit" name="submit" value="Generate" id="button1"> 
 
</form>  


</body>  



<?php      
@$red=$_GET['red'];   
@$green=$_GET['green']; 
@$blue=$_GET['blue'];     




function rgb2hex($rgb) {
   $hex = "#";
   $hex .= str_pad(dechex($rgb[0]), 2, "0", STR_PAD_LEFT);
   $hex .= str_pad(dechex($rgb[1]), 2, "0", STR_PAD_LEFT);
   $hex .= str_pad(dechex($rgb[2]), 2, "0", STR_PAD_LEFT);

   return $hex; // returns the hex value including the number sign (#)
}

$rgb = array( $red, $green, $blue );
$hex = rgb2hex($rgb);
echo $hex;

?>

我们的目标是得到这样的东西，我们将从用户那里获得红色、绿色和蓝色的输入，并将该颜色显示在一个方框中，如下所示。

【问题讨论】：

标签： php html

【解决方案1】：

最小化 rgb2hex 函数并添加了一个 div 和必需的 style 而不是 input[type=color]

<?php      

$color = sprintf("#%02x%02x%02x", $_GET['red'], $_GET['green'] , $_GET['blue']);
echo '<div style="width:102px; height:102px; background-color:'.$color.';"></div>';

?>

或

<style>
  div{
    width: 102px;
    height: 102px;
    border: none;
  }
</style>

<?php      

$color = sprintf("#%02x%02x%02x", $_GET['red'], $_GET['green'] , $_GET['blue']);
echo '<div style="background-color:'.$color.';"></div>';

?>

【讨论】：