liminfo

Color Picker

HEX/RGB/HSL/CMYK/OKLCH 색상 선택 및 변환 도구

색조220
채도80%
명도50%
HEX
#195ee6
RGB
rgb(25, 94, 230)
HSL
hsl(220, 80%, 50%)
흰색 대비AA
샘플 텍스트 5.55:1
검은색 대비AA Large
샘플 텍스트 3.79:1

색상 조화

보색
+
유사색
+
삼각 보색
+
분할 보색
+
사각 보색
+

팔레트 프리셋

red
orange
amber
yellow
lime
green
teal
cyan
sky
blue
indigo
violet
purple
pink
rose
slate
gray

Color Picker 소개

색상 선택기는 HSL(색조, 채도, 명도) 범위 슬라이더 또는 16진수 코드 직접 입력으로 원하는 색상을 선택하고, HEX·RGB·HSL 세 가지 형식으로 즉시 출력하는 다기능 색상 도구입니다. 슬라이더를 드래그하면 라이브 미리보기 견본이 실시간으로 업데이트됩니다. 각 형식마다 원클릭 복사 버튼이 있어 CSS, 디자인 토큰 등 어느 도구에든 바로 붙여넣을 수 있습니다.

디자이너, 프론트엔드 개발자, UI 엔지니어들은 이 도구로 색상 관계를 탐색하고, 팔레트를 프로토타이핑하며, 접근성 기준을 검증합니다. 내장된 WCAG 대비 검사기는 선택한 색상과 흰색·검은색의 대비비를 계산하고 소수점 형식(예: 4.50:1)으로 표시하며 WCAG AA·AAA 기준 통과 여부를 보여줍니다. 색상 히스토리 패널은 최근 20개의 색상 견본을 저장하여 세션 중 색상을 비교·재방문할 수 있습니다.

내부적으로 이 도구는 양방향 색상 공간 변환을 사용합니다. HSL → RGB는 색도, 색조 섹터, 명도 오프셋을 포함하는 표준 단계별 공식을, RGB → HSL은 16진수 값 입력 시 역방향 경로를 사용합니다. WCAG 상대 휘도 공식(IEC 61966-2-1 sRGB 선형화 후 0.2126 R + 0.7152 G + 0.0722 B 가중 합산)으로 대비비를 계산합니다. 모든 연산은 React useMemo 훅을 통해 브라우저에서 실행됩니다.

주요 기능

  • 색조(0~360°), 채도(0~100%), 명도(0~100%) HSL 슬라이더와 라이브 미리보기
  • 블러 시 HSL로 자동 변환되는 16진수 텍스트 입력
  • HEX, RGB, HSL 세 가지 형식의 동시 출력
  • HEX·RGB·HSL 값을 개별 복사할 수 있는 원클릭 복사 버튼
  • AA·AAA 기준 레이블을 포함한 흰색·검은색 대비 실시간 WCAG 대비비 확인
  • 최근 저장한 색상 20개를 보관하는 색상 히스토리 팔레트
  • 표준 색채과학 공식을 사용한 HSL↔RGB↔HEX 양방향 변환
  • 다크 모드 지원 및 모든 기기에서 사용 가능한 완전 반응형 레이아웃

자주 묻는 질문

HSL이란 무엇이며 왜 슬라이더로 조작하나요?

HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)의 약자로, RGB보다 인간의 색 인지에 더 직관적으로 대응하는 원통형 색상 모델입니다. 색조는 색상 각도(0° = 빨강, 120° = 초록, 240° = 파랑), 채도는 선명도, 명도는 밝기를 제어합니다. HSL 슬라이더를 사용하면 나머지 속성을 변경하지 않고 색조, 선명도, 밝기를 독립적으로 조절할 수 있습니다.

이 도구로 16진수 색상을 RGB로 변환하는 방법은?

16진수 코드(예: #3b82f6)를 Hex 입력 필드에 입력하고 Enter를 누르거나 다른 곳을 클릭하세요. 도구가 즉시 동등한 RGB와 HSL 값으로 변환하고 슬라이더도 맞게 업데이트합니다. HEX, RGB, HSL 출력 행이 모두 동시에 업데이트됩니다.

WCAG 대비비란 무엇인가요?

WCAG(웹 콘텐츠 접근성 지침) 대비비는 두 색상의 휘도 차이를 1:1(동일)에서 21:1(검은색 바탕에 흰색)까지의 척도로 측정합니다. 일반 텍스트에는 최소 4.5:1(WCAG AA), 더 엄격한 AAA 기준에는 7:1이 필요합니다. 이 도구는 흰색과 검은색에 대한 대비비를 모두 보여주므로 어떤 텍스트 색상이 기준을 충족하는지 즉시 확인할 수 있습니다.

WCAG AA와 AAA의 차이는 무엇인가요?

WCAG AA는 일반 크기 텍스트(18pt 미만 또는 14pt 볼드 미만)에 최소 4.5:1, 큰 텍스트에 3:1의 대비비를 요구합니다. 더 엄격한 WCAG AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 대부분의 접근성 가이드라인은 최소 AA 준수를 요구합니다. AAA는 저시력 사용자를 위한 텍스트에 권장됩니다.

상대 휘도는 어떻게 계산되나요?

WCAG 상대 휘도 공식은 먼저 sRGB 감마 곡선에서 각 RGB 채널을 선형화합니다: 0.03928 이하의 값은 12.92로 나누고, 나머지는 ((값 + 0.055) / 1.055)^2.4 공식을 사용합니다. 선형화된 채널은 L = 0.2126 × R + 0.7152 × G + 0.0722 × B로 결합되며, 이는 각 원색에 대한 인간 눈의 민감도와 일치합니다.

브라우저 세션 간에 색상을 저장할 수 있나요?

색상 히스토리 패널은 현재 브라우저 세션 중 메모리에 최대 20개의 색상 견본을 저장합니다. 페이지를 닫거나 새로고침하면 히스토리가 지워집니다. 영구 저장을 위해서는 HEX 값을 텍스트 파일, 디자인 시스템 토큰, 또는 CSS 변수 파일에 복사하세요.

CSS에서 RGB와 HSL의 차이는 무엇인가요?

둘 다 유효한 CSS 색상 형식입니다. RGB는 더 전통적이고 널리 지원됩니다(rgb(59, 130, 246)). HSL은 색상을 프로그래밍 방식으로 조정할 때 선호됩니다. 세 채널을 모두 다시 계산하지 않고 명도만 증감하여 색조와 음영을 만들 수 있기 때문입니다(hsl(220, 90%, 56%)). 이 도구는 워크플로에 맞는 형식을 선택할 수 있도록 두 형식을 모두 제공합니다.

특정 배경에서 충분한 대비를 가진 색상을 찾는 방법은?

16진수 입력에 배경색을 입력하세요. "흰색 대비"와 "검은색 대비" 비율을 확인하세요. 어느 쪽도 4.5:1을 충족하지 않으면 명도 슬라이더를 사용하여 원하는 대비가 달성될 때까지 색상을 더 어둡게 또는 밝게 만드세요. 일반적으로 명도가 약 55~60% 이상인 색상은 검은색 텍스트에 대해 더 좋은 대비를 보이고, 40~45% 이하인 색상은 흰색 텍스트에 대해 더 좋은 대비를 보입니다.