如何在 php 中将十六进制颜色代码值转换为精确阴影？

Question

选项标签中显示的#codes 值实际上是颜色代码值。除了这个值之外，我还需要显示确切的颜色阴影，以便任何人都可以了解他选择的颜色。我如何在 php 和 javascript 中做到这一点？ 请帮我

Answer 1

以下是当用户选择颜色时如何设置颜色的示例。 这应该很容易理解。 每当用户更改选择选项时，我都会获取值并设置 #color-picked 元素的背景。 这是使用纯 JS 而不是 jQuery 完成的。

<?php
$colors = ['#ff0000','#00ff00','#0000ff'];
?>
<select onchange="colorChange()" id = "color-picker">
    <?php
    foreach ($colors as $color) {
        echo "<option value='$color'>$color</option>";
    }
    ?>
</select>
<div id="color-picked">

</div>

<style type="text/css">
    #color-picker {
        float: left;
        height: 20px;
    }

    #color-picked {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        float: left;
        margin-left: 20px;
    }
</style>

<script type="text/javascript">
    function colorChange() {
        colorPicker = document.getElementById('color-picker');
        colorPicked = document.getElementById('color-picked');
        colorPicked.style.background = colorPicker.value
        console.log(colorPicker.value)
    }
</script>