✅ 색상 선택기 (HEX와 RGB 상호 변환)

 

이 색상 선택기는 사용자가 원하는 색상을 쉽게 선택하고 HEX 및 RGB 형식으로 변환할 수 있도록 도와줍니다. 색상 선택기, HEX 입력 필드, RGB 입력 필드가 상호 연동되어 있으며, 선택된 색상은 실시간 미리보기 박스에 반영됩니다. 색상 값을 입력하거나 변경할 때 자동으로 업데이트되므로 색상 조합을 빠르고 편리하게 확인할 수 있습니다.

 

✅ 색상 선택기 (Color Picker)

기능 설명 : 색상 팔레트를 클릭하여 색상을 선택할 수 있는 입력 필드입니다. 색상 선택기에서 선택한 값은 HEX 및 RGB 입력 필드와 미리보기 박스에도 반영됩니다.

✅ HEX 입력 필드

기능 설명 : 사용자가 HEX 형식(예: #ffffff)으로 색상을 직접 입력할 수 있는 텍스트 필드입니다. 유효한 HEX 값이 입력되면, 색상이 미리보기 박스와 RGB 필드, 색상 선택기에 즉시 반영됩니다.

용어 설명 : HEX는 색상을 16진수로 표현하는 방식으로, # 뒤에 이어지는 6자리 수가 빨강, 초록, 파랑의 강도를 나타냅니다.

✅ RGB 입력 필드

기능 설명 : 사용자가 RGB 형식(예: RGB: 255, 255, 255)으로 색상을 입력할 수 있는 텍스트 필드입니다. 유효한 RGB 값이 입력되면 색상이 미리보기 박스와 HEX 필드, 색상 선택기에 반영됩니다.

용어 설명 : RGB는 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 색상 값으로 이루어진 모델로, 각각의 값 범위는 0부터 255까지입니다.

✅ 색상 미리보기 박스 (Color Display)

기능 설명 : 선택한 색상이 실시간으로 반영되는 정사각형 영역입니다. 색상 선택기, HEX 입력, RGB 입력 중 어느 하나를 변경해도 미리보기 박스에 적용됩니다.

용어 설명 : 미리보기 박스는 선택된 색상의 시각적 피드백을 즉시 제공하여 사용자가 선택한 색상을 확인할 수 있습니다.

 

 

색상 선택기

HEX 값 RGB 값