색상환 컬러 피커란?

둥근 색상환에서 원하는 색을 손으로 골라, 그 색의 코드를 얻는 도구입니다. 숫자를 직접 입력하는 변환기와 달리, 눈으로 보면서 원 위의 점을 움직여 색조를 바꾸고 밝기를 조절해 색을 정할 수 있습니다. 색을 고르면 곧바로 HEX·RGB·HSL 세 가지 형식의 코드가 함께 표시되어, 필요한 형식을 바로 가져다 쓸 수 있습니다.

디자인 감각으로 "이 정도 색"을 찾아야 할 때, 코드를 미리 알기 어렵습니다. 이럴 때 색상환에서 마음에 드는 색을 집은 뒤 나오는 코드를 복사하면 됩니다. 아래 HEX 입력창에 코드를 직접 넣으면 색상환이 거꾸로 그 색으로 맞춰지므로, 기존 색을 불러와 미세하게 조정할 수도 있습니다.

사용 방법

1. 둥근 색상환 위의 점을 움직여 색조를 고르고, 밝기 막대로 밝고 어두운 정도를 맞춥니다.
2. 오른쪽 표에 나타난 HEX·RGB·HSL 값 가운데 필요한 형식을 확인합니다.
3. 이미 아는 색이 있으면 아래 입력창에 #4169E1처럼 HEX 코드를 넣어 색상환을 그 색으로 맞춥니다.

세 가지 출력 형식

같은 색이라도 쓰이는 곳에 따라 표기 형식이 다릅니다. 이 도구는 고른 색을 세 형식으로 동시에 보여 줍니다. 아래는 색상환의 초기 색인 빨강을 기준으로 한 예시입니다.

HEX와 RGB는 같은 빨강·초록·파랑 값을 각각 16진수 코드와 0~255 숫자로 적은 것입니다. HSL은 조금 다르게, 색조(Hue)·채도(Saturation)·밝기(Lightness)로 색을 나눕니다. 색조는 색상환의 각도를 뜻하는 0~360도 값이라, 색상환에서 점을 돌리는 동작과 바로 연결됩니다. 예를 들어 빨강은 색조 0도, 초록은 120도, 파랑은 240도에 놓입니다.

자주 묻는 질문

고른 색의 코드를 어떻게 가져가나요?

색을 고르면 오른쪽 표에 HEX·RGB·HSL 값이 나타나고, HEX 코드는 아래 입력창에도 함께 채워집니다. 필요한 형식의 값을 그대로 복사해 CSS나 편집 프로그램에 붙여 넣으면 됩니다. 대부분의 웹 작업에는 HEX 코드를 가장 많이 씁니다.

이미 아는 색을 색상환에 불러올 수 있나요?

네. 아래 입력창에 #4169E1처럼 HEX 코드를 넣으면 색상환이 그 색의 위치로 이동합니다. 기존 색을 기준으로 조금 더 밝게 또는 다른 색조로 바꾸는 작업을 할 때 편리합니다.

HSL은 언제 쓰면 좋나요?

같은 색조를 유지하면서 밝기나 채도만 바꾸고 싶을 때 유용합니다. 예를 들어 hsl(0, 100%, 50%)인 빨강에서 밝기 값만 30%로 낮추면 hsl(0, 100%, 30%)가 되어 더 어두운 빨강이 됩니다. HEX나 RGB로는 이런 규칙적인 조정이 눈에 잘 안 보이지만, HSL은 숫자만으로 방향을 가늠하기 쉽습니다.

숫자를 직접 넣어 변환하고 싶을 때는요?

색상환으로 고르는 대신 정확한 값을 입력해 바꾸고 싶다면, 코드끼리 변환하는 전용 도구가 더 편합니다. HEX 코드를 RGB로 풀 때는 HEX to RGB 변환기, RGB 숫자를 HEX로 합칠 때는 RGB to HEX 변환기를 함께 쓰면 됩니다.

출력 3종(HEX·RGB·HSL)과 초기 색은 도구 실제 동작 기준 · 마지막 검토: 2026년 7월 11일.