16進数を入力し、その色をライブで表示するだけです。
HTMLの記述はJavaScriptにどっぷり
（しかし、スクリプト系はダラダラ作っていると自分でもワケワカメになりますね）
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>test</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<h4 style="margin:20px;">6桁の16進数カラーコードを入力</h4>
<div style="margin:20px;">
＃<input type="text" id="inp_code" maxlength="6"
style="width:100px;" onkeyup="getValue();">
<input type="button" id="inp_btn" value="リセット"
onclick="del();" style="width:70px;"> 
アルファベットは大文字でも小文字でもOK
<div id="out_code" style="border:solid #dcdcdc 1px;
margin:10px; width:100%;height:500px;"></div>
</div>
<script src="links/action.js"></script>
<!-- linksフォルダーのaction.jsを利用する -->
</body>
</html>
<!-- index.html -->
JavaScriptは16進数入力対応とクリア処理
/* action.js */
function getValue(){
try{
let hexadec = document.getElementById("inp_code").value;
let regex = new RegExp(/([a-fA-F0-9]{6})/);
if (regex.test(hexadec)){
document.getElementById('out_code')
/*入力値を16進数に変換。
RegExp（正規表現）は
文字列パターンのマッチングや検索、置換
16進数表記文字か否かを確認*/
.style.backgroundColor = '#' + hexadec;
}else{
document.getElementById('out_code')
.style.backgroundColor = 'transparent';
}
}catch(e){
document.getElementById('out_code')
.style.backgroundColor = 'transparent';
}
}
/* コード入力値は6桁以上入力不可で不自然な値の場合は色表記しない。 正しい値の場合はライブで合致色を表示 。
getElementByIdメソッドはHTMLドキュメント内で一意なので、
一致する要素が複数ある場合は、最初に一致した要素のみを返す。*/
function del(){
document.getElementById("inp_code").value = '';
document.getElementById('out_code').style.backgroundColor = 'transparent';
document.getElementById("inp_code").focus();
/*リセットがクリックされたら入力値と表示色をクリア
transparentは透明（無し）
focusは、入力位置に自動移動でキーボード入力待ち。*/
}
/* action.js */
CSSはいつもの通り
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
html {
overflow-y:scroll;
}
body *, ::before, ::after {
box-sizing: border-box;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
}
body {
text-align: center;
padding: 100px;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
color: gray;
background-color: white;
cursor: pointer; /* カーソルをポインターに変更 */
}
input[type="text"]{
font-size: 100%;
}
/* rule.css */
実行直後の画面
16進数でを入力するとライブで色表示
