색조는 색상 계열을 고릅니다
빨강, 노랑, 초록, 시안, 파랑, 마젠타를 색상환에서 이동합니다. 채도가 0이면 색조 변화가 거의 보이지 않습니다.
무료 브라우저 색상 도구
HSB 색상 선택기와 HEX RGB 변환기
색조, 채도, 밝기로 색을 고르거나 정확한 HEX 또는 RGB 값을 입력하세요. 모든 형식이 동기화되어 화면에서 색을 조정하고 필요한 코드를 복사할 수 있습니다.
2026년 7월 18일 업데이트
HSB 색상 선택기
이 HSB 색상 선택기로 할 수 있는 일
색조를 0~360도, 채도와 밝기를 0~100퍼센트로 편집하고 같은 화면 색상을 6자리 HEX와 RGB로 변환합니다. 모든 입력이 동기화되며 결과를 바로 복사할 수 있습니다. 카툰 스타일 팔레트 조정, 디자인 토큰 확인, 색이 달라진 원인 학습, Toon Tone Delta E 계산기로 비교할 두 색 준비에 사용할 수 있습니다.
HSB · HEX · RGB
색상 선택 및 변환
슬라이더, 숫자, 프리셋, HEX 입력 중 무엇을 사용해도 미리 보기와 모든 형식이 같은 색상에서 업데이트됩니다.
실시간 색상 미리 보기#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
CSS 변수
--toon-color: #2FB8D8;카툰 스타일 색상 프리셋
편집 가능한 Toon Tone 예시이며 작품이나 브랜드의 공식 지정 색상이 아닙니다.
HSB 세 채널 읽기
HSB는 색상 결정을 계열, 강도, 밝기 수준으로 나눕니다. 차이의 원인을 알고 싶다면 한 채널씩 바꾸세요.
채도는 강도를 조절합니다
낮추면 회색에 가까워지고 높이면 색조가 선명해집니다. 단순히 더 어둡거나 밝게 만드는 값은 아닙니다.
밝기는 빛의 상한을 정합니다
0은 검정입니다. 값을 올리면 선택한 색조와 채도가 나타나지만 지각 밝기는 색상 계열과 화면에도 영향을 받습니다.
작업에 맞는 조절 항목 선택
각 형식은 같은 색상을 다른 관점에서 설명합니다. 먼저 필요한 결정을 정하고 그 질문에 답하는 채널이나 측정을 사용하세요.
| 작업 | 먼저 사용할 값 | 다음 확인 |
|---|---|---|
| 빨강, 초록, 파랑 등의 계열 선택 | 색조 | 채도, 그다음 밝기 |
| 선명하거나 차분하게 만들기 | 채도 | 색조를 고정하고 비교 |
| 더 밝거나 어둡게 만들기 | 밝기 | 실제 배경에서 대비 확인 |
| 웹 또는 디자인 토큰 복사 | HEX 또는 RGB | 출처와 색상 프로필 기록 |
| 두 색상의 차이 측정 | Delta E 계산기 | 색상 견본과 HSB 차이 확인 |
HSB가 색상 결정을 정리하는 방식
HSB는 색조, 채도, 밝기를 뜻합니다. 색조는 원형 색상환의 위치를 나타내고, 채도는 중성 회색에서 얼마나 멀리 떨어졌는지를 설명하며, 밝기는 표시되는 채널의 최대 수준을 조절합니다. 이 구분은 자연스러운 편집 순서와 닮았습니다. 먼저 넓은 색상 계열을 고르고, 그 계열이 얼마나 강하게 느껴질지 정한 뒤, 마지막으로 최종 색상의 밝고 어두운 정도를 맞춥니다. 세 숫자가 함께 하나의 디지털 색상을 표현하며 어느 하나도 그 자체로 품질 점수가 되지 않습니다.
같은 모델은 HSV라고도 하며 Value가 Brightness 대신 사용됩니다. 일반적인 디지털 색상 도구에서 HSB와 HSV는 보통 같은 수학 모델을 뜻합니다. HSL은 다릅니다. Lightness 축은 순수한 색을 중간 값에 두고 그 위에서 흰색으로 섞이므로 HSL 퍼센트를 같은 숫자의 HSB 입력칸에 넣으면 다른 색이 나올 수 있습니다. 이 페이지는 채널 이름과 변환된 HEX, RGB를 함께 보여 주어 응용 프로그램마다 다른 용어와 범위를 쉽게 확인하게 합니다.
색조, 채도, 밝기를 조정하는 안정적인 순서
먼저 채도와 밝기를 색상 계열이 충분히 보이는 수준으로 두고 색조를 맞춥니다. 작은 숫자 차이를 쫓기 전에 빨강, 주황, 노랑, 초록, 시안, 파랑, 보라 중 어디에 속하는지 정하세요. 다음으로 채도를 낮춰 필요한 부드러움을 찾습니다. 기억 속 카툰 색상은 이름이 주는 인상보다 덜 선명한 경우가 많습니다. 그림자, 압축, 주변 색상이 느낌을 바꾸기 때문입니다. 밝기는 마지막에 조정하면 올바른 색조의 어두운 버전을 다른 색상 계열로 혼동하는 일을 줄일 수 있습니다.
정밀한 작업에서는 한 번에 한 채널만 바꾸고 이전 값을 기록하세요. 세 값을 동시에 크게 움직이면 보기 좋은 결과가 나와도 어떤 수정이 문제를 해결했는지 알기 어렵습니다. 시각 조정 뒤에는 동기화된 HEX와 RGB를 안정적인 전달 값으로 사용할 수 있습니다. 승인된 디자인 토큰이 이미 있다면 슬라이더로 다시 만들지 말고 직접 입력하세요. 선택기는 탐색을 정확한 값으로 연결하는 도구이며 알려진 원본을 새로운 근삿값으로 바꾸는 도구가 아닙니다.
HEX, RGB, HSB 변환에서 일어나는 일
HEX와 RGB는 디지털 화면의 빨강, 초록, 파랑 양을 기록합니다. 6자리 HEX는 각 채널을 두 자리 16진수로 저장하고 RGB는 보통 같은 채널을 0부터 255까지의 10진수로 표시합니다. 선택기는 이 값을 HSB로 바꾸고, HSB 좌표를 편집한 다음, 결과를 다시 표시 가능한 RGB 색상으로 변환합니다. 3자리 HEX는 변환 전에 6자리로 확장됩니다. 연속된 퍼센트를 화면에 표시하는 정수로 반올림하므로 왕복 변환에서 아주 작은 표시 차이가 생길 수 있습니다.
변환은 공식 색상 이름, 브랜드 규격, 페인트 배합, 물리적 견본을 찾아 주지 않습니다. 모니터를 보정하거나 이미지의 색상 프로필을 추론하거나 다른 기기에서 같은 모습으로 보이게 보장하지도 않습니다. 정확한 재현이 중요하다면 원본 토큰을 보관하고 값이 디자인 시스템, 원본 그림, 캡처 이미지 중 어디에서 왔는지 기록하세요. 압축된 이미지는 픽셀이 이미 바뀌었을 수 있습니다. 입력값에 대한 계산이 정확해도 그 입력이 찾고 있던 권위 있는 색상이라는 뜻은 아닙니다.
카툰 팔레트와 일러스트에 활용하기
카툰 그림은 분명한 색상 계열을 자주 사용하지만 기억에 남는 색의 개성은 단순한 이름만으로 정해지지 않습니다. 노랑은 초록이나 주황 쪽으로 기울 수 있고, 파랑은 옅거나 깊게 포화될 수 있으며, 빨강은 코럴, 주황, 마젠타로 이동할 수 있습니다. HSB 선택기로 시작 색조를 유지한 채 관련 색상을 만들고, HEX 값을 메모에 복사한 뒤 채도나 밝기만 의도적으로 바꾸세요. 하이라이트, 그림자, 인터페이스 강조색, 비교용 견본을 변화 방향이 분명한 상태로 만들 수 있습니다.
이 페이지의 프리셋은 일반적인 Toon Tone 예시입니다. 조절 방법을 배우는 시작점일 뿐 스튜디오, 캐릭터, 작품, 인쇄소, 상품의 공식 코드는 아닙니다. 프로젝트에 승인된 팔레트가 있다면 그 출처를 따르세요. 이미지를 연구할 때는 샘플링한 영역과 시청 조건을 함께 남겨야 합니다. 작은 장식, 그림자가 있는 프레임, 넓고 평평한 몸체 영역은 사람들이 같은 일상 색상 이름으로 부르더라도 서로 다른 대표 값을 만들 수 있습니다.
화면, 대비, 지각 색상 차이
미리 보기는 브라우저가 생성하므로 화면 보정, 밝기 설정, 색상 관리, 시야각, 주변 조명, 이웃 색상의 영향을 받습니다. HSB 밝기는 지각 밝기의 측정값도 아니고 접근성 대비 비율도 아닙니다. HSB 밝기가 모두 100인 노랑과 파랑도 실제 명도는 매우 다르게 느껴질 수 있습니다. 텍스트, 아이콘, 포커스 표시, 컨트롤은 실제 전경색과 배경색 조합을 사용해 적절한 대비 계산으로 확인해야 합니다.
저장된 두 색상을 비교하려면 Delta E 계산기를 별도의 측정으로 사용하고 숫자 옆의 색상 견본도 함께 보세요. Delta E는 전체적인 지각 차이를 모델링하고 HSB 채널은 직관적인 편집 방향을 제공합니다. 어느 쪽도 브랜딩, 접근성, 인쇄, 제조에 공통으로 적용되는 보편적인 합격 기준을 만들지 않습니다. 최종 결정은 일반 브라우저 도구의 편리한 숫자 하나가 아니라 관련 규격, 보정된 작업 흐름, 실제 출력 조건을 따라야 합니다.
색상 탐색에서 Toon Tone 연습으로 이동하기
Toon Tone이 색조, 채도, 밝기를 사용하는 이유는 기억한 색상 오류를 진단하기 쉽기 때문입니다. 게임에서 정답을 공개한 뒤 목표와 추측을 한 채널씩 비교하세요. 색조가 비슷하지만 너무 강렬해 보이면 채도를 낮추고, 계열은 맞지만 무거워 보이면 밝기를 올립니다. 독립 선택기에는 숨겨진 목표와 점수가 없으므로 자유롭게 컨트롤을 살펴본 다음 참고 색상이 가려지는 기억 라운드로 돌아가기 좋습니다.
효율적인 반복은 짧습니다. 선택기에서 한 색을 탐색하고 값을 복사한 다음 참고를 닫고 게임에서 인상을 다시 만드세요. 이후 정답 공개나 Delta E를 사용해 가장 큰 차이를 살펴봅니다. 바로 이어지는 반복은 숫자 기억이 시각 기억을 잠시 대신할 수 있으므로 장기적인 향상의 증거로 보지 마세요. 나중 세션에 익숙하지 않은 색을 섞고 정답 목록을 외우기보다 차분한 색을 항상 너무 밝게 고르는 것 같은 반복 편향 하나를 교정하세요.
이 색상으로 계속 작업하기
HSB 색상 선택기 질문
HSB와 HSV는 같은가요?
보통 같은 디지털 색상 모델입니다. HSB는 세 번째 채널을 밝기, HSV는 값이라고 부릅니다. 앱 사이에 숫자를 옮기기 전에 범위를 확인하세요.
HSB와 HSL은 같은가요?
아닙니다. 둘 다 색조와 채도라는 이름을 쓰지만 HSL 명도는 HSB 밝기와 다르게 계산되어 같은 퍼센트도 다른 색상을 만들 수 있습니다.
3자리 HEX도 변환할 수 있나요?
네. #0af 같은 축약 값은 #00AAFF로 확장한 뒤 변환합니다. 6자리는 앞의 # 기호가 있거나 없어도 됩니다.
도구가 색상을 업로드하거나 저장하나요?
계정이나 서버 업로드가 필요 없습니다. 선택기는 브라우저에서 작동하고 복사 버튼은 허용된 경우 화면의 텍스트만 클립보드에 넣습니다.
HSB 밝기로 접근성 대비를 확인할 수 있나요?
아닙니다. 접근성 대비는 전경과 배경의 상대 휘도를 비교합니다. HSB 밝기만으로는 WCAG 대비 계산이 되지 않습니다.
다른 선택기와 숫자가 조금 다른 이유는 무엇인가요?
반올림, HSL 사용, 색상 관리, 소수점 정밀도가 다를 수 있습니다. 최종 HEX 또는 RGB와 문서화된 모델을 비교하세요.