색상 선택기는 어떻게 작동하나요?
이 페이지는 브라우저가 제공하는 HTML color 입력을 사용합니다. 색상 영역을 누르면 운영체제와 브라우저에 맞는 컬러 선택창이 열리고, 선택한 값은 표준 6자리 HEX 코드로 전달됩니다. 생활계산소는 이 값을 빨강·초록·파랑의 0~255 숫자로 풀어 RGB를 만들고, 가장 큰 채널과 작은 채널의 차이를 이용해 HSL의 색상각·채도·명도를 계산합니다. 외부 팔레트 서비스나 색상 API에 값을 보내지 않습니다.
색상 선택창의 모양과 기능은 Safari, Chrome, 모바일 브라우저마다 다릅니다. 일부 데스크톱 환경은 화면의 특정 색을 집는 스포이트 기능을 제공하지만 모든 브라우저에서 보장되지는 않습니다. 선택 결과의 HEX, RGB, HSL 버튼을 각각 누르면 해당 코드만 복사되고, 아래 전체 복사 버튼은 세 형식을 함께 복사합니다.
사용 방법
색상 열기
큰 색상 입력 영역을 누릅니다. 키보드 사용자는 Tab으로 이동한 뒤 Enter나 Space로 선택창을 열 수 있습니다.
색상 조절
기기의 색상환, 슬라이더 또는 숫자 입력을 이용해 원하는 색을 고르면 페이지 미리보기가 실시간으로 바뀝니다.
코드 복사
HEX, RGB, HSL 중 필요한 표시값을 누르거나 전체 복사 버튼을 사용해 CSS와 디자인 문서에 붙여 넣습니다.
구체적인 상황으로 이해하는 활용 예시
다음 세 상황은 도구의 처리 과정과 결과 해석을 설명하기 위한 가상 예시입니다. 입력 조건을 바꾸면 결과도 달라지므로 자신의 조건과 비교해 확인하세요.
1. 기본 빨강을 선택한 경우
색상 창에서 #FF0000을 고르면 RGB는 255·0·0, HSL은 0도·100%·50%로 표시됩니다. HEX 버튼과 RGB 버튼은 같은 색의 다른 문자열을 복사합니다. 브라우저 색상 창의 모양이 다르더라도 최종 코드를 확인하면 문서와 코드에서 같은 색을 지정할 수 있습니다.
2. 흰색을 선택해 배경 코드 기록
#FFFFFF을 선택하면 RGB 세 값은 모두 255이고 HSL은 채도 0%·명도 100%입니다. 이 값은 흰색 배경을 지정하는 코드일 뿐 인쇄물의 종이색이나 화면 밝기를 고정하는 값은 아닙니다. 버튼 배경으로 적용할 때는 글자색과 함께 실제 화면에서 확인하세요.
3. 중간 회색을 골라 테마 기준으로 사용
#808080을 선택하면 RGB 128·128·128과 HSL 명도 약 50%가 표시됩니다. 이를 기준색으로 기록한 뒤 더 밝고 어두운 변형이 필요하면 색상 변환 도구에서 HSL 값을 조절할 수 있습니다. 운영체제의 야간 모드에 따라 보이는 느낌이 달라도 복사되는 숫자 코드 자체가 자동 보정되지는 않습니다.
선택한 색을 실제 화면에 적용할 때는 기본색 하나만 정하기보다 hover, focus, disabled 상태와 밝고 어두운 배경에서의 대비도 함께 시험하는 것이 좋습니다. HEX, RGB와 HSL은 표현 방식만 다를 뿐 같은 화면 색을 가리키므로 협업 문서에서는 한 형식을 기준으로 정하면 혼선을 줄일 수 있습니다.
주의사항
모니터 밝기, 야간 모드와 색상 프로필에 따라 실제로 보이는 색은 달라질 수 있습니다. 인쇄 작업은 RGB가 아닌 CMYK 교정이 필요할 수 있습니다. 마지막으로 고른 색상만 현재 브라우저 설정에 저장되며 개인정보나 계정 정보와 연결되지 않습니다.