[HTML] input type color 사용하여 rgb 값 받아오기

<input type color 사용하여 rgb 값 받아오기>

html

<form action="" name ="fom" id ="fom">
  <label for="favcolor">Select your favorite color</label> 
  <input type="color" id="favcolor" name="favcolor">
  <button type="button" onclick="sendColor()" >등록</button>
</form>

javascript

function sendColor() {
   var form = document.fom;
    var selectedColor = document.getElementById("favcolor").value;
    var rgbColor = hexToRgb(selectedColor); 
    alert("r : "+rgbColor.r+", g : "+rgbColor.g+", b : "+rgbColor.b);
   
 }
   
function hexToRgb(hex) {
  // Convert hex color to RGB
  var r = parseInt(hex.slice(1, 3), 16);
  var g = parseInt(hex.slice(3, 5), 16);
  var b = parseInt(hex.slice(5, 7), 16);

  return { r: r, g: g, b: b };
}

css

#fom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  /* 라벨 스타일링 */
  label {
    font-weight: bold; /* 글자 굵기를 두껍게 설정 */
  font-size: 24px; /* 글자 크기를 크게 설정 */
  color: #2ecc71; /* 밝은 녹색으로 설정 */
  margin-bottom: 18px; /* 라벨 아래 여백 추가 */
  }

  #favcolor {
  padding: 10px;
  border-radius: 5px;
  border: none;
  background: linear-gradient(to right, #fff, var(--color), #fff); /* 입력란에 그라데이션 효과 추가 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 그림자 효과 추가 */
  width: 200px; /* 입력란 너비 지정 */
  height: 60px; /* 입력란 높이 지정 */
  margin-bottom: 20px;
}

/* 버튼 스타일링 */
button {
  padding: 12px 18px; /* 패딩을 늘려서 버튼 크기를 늘림 */
  background-color: #2ecc71; /* 밝은 녹색으로 설정 */
  color: white; /* 텍스트 색상을 흰색으로 설정 */
  border: none;
  border-radius: 25px; /* 더 둥근 모양으로 버튼을 만듦 */
  font-size: 16px; /* 글자 크기를 크게 설정 */
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* 그림자 효과 추가 */
}

/* 버튼 호버 효과 */
button:hover {
  background-color: #27ae60; /* 호버 시 조금 더 진한 녹색으로 변경 */
}

코드펜에서 테스트해보세요.