HEX 색상 선택기

HEX colour picker

자주 쓰는 프리셋

브라우저 기본 색상 컨트롤로 색을 고르거나 3자리 또는 6자리 HEX 값을 입력하세요. RGB, HSL, 근사 CMYK로 변환하고 상대 휘도와 흰색·검정에 대한 정확한 대비율을 계산합니다. 색상은 이 브라우저에서 처리되며 단계 URL에는 추가되지 않습니다.

색상을 선택하는 방법

  1. 1

    예시 또는 색상 컨트롤로 시작하기

    예시 색상을 고르거나 브라우저 기본 색상 선택기를 엽니다.

  2. 2

    정확한 HEX 값 입력하기

    #F60 같은 3자리 또는 #FF6600 같은 6자리 값을 입력하면 짧은 표기를 올바르게 확장합니다.

  3. 3

    계산된 형식 확인하기

    HEX, RGB, HSL, 근사 CMYK와 sRGB 상대 휘도를 한곳에서 확인합니다.

  4. 4

    대비 확인 후 복사하기

    흰색과 검정 대비를 비교한 뒤 필요한 HEX, RGB 또는 HSL 값을 복사합니다.

실무에서 쓰는 색상 표기

색상 모델마다 답하는 질문이 조금씩 다릅니다.

표기 참고표

표기 구성 요소 주로 쓰이는 곳
HEX #RRGGBB CSS, 디자인 도구, 브랜드 가이드
RGB 빨강 0~255, 초록 0~255, 파랑 0~255 CSS rgb(), 이미지 편집기
HSL 색상 0~360°, 채도 %, 명도 % CSS hsl(), 디자인 시스템
CMYK 시안 %, 마젠타 %, 노랑 %, 키/검정 % 인쇄, 프리프레스

접근성을 위한 대비

WCAG 2.2는 텍스트와 배경 사이의 최소 대비율을 정의합니다.

  • 일반 텍스트 AA: ≥ 4.5:1
  • 큰 텍스트 AA(18 pt 또는 14 pt 굵게): ≥ 3:1
  • 일반 텍스트 AAA: ≥ 7:1

이 선택기는 흰색과 검정색에 대한 대비율을 실시간으로 계산합니다. 특정 전경색이 중요하다면 각 색상 조합마다 전용 대비 검사 도구로 다시 확인하세요.

  • HEX는 대부분의 디자인 도구에서 기본 표기이지만, 3자리 축약형 (#F60)은 #FF6600과 같고 #F06060과는 다릅니다.
  • HSL은 팔레트를 만들 때 편합니다. 색상을 고정하고 명도만 바꾸면 밝은 색과 어두운 색 단계를 만들 수 있습니다.
  • CMYK와 RGB는 완벽하게 상호 변환되지 않습니다. 인쇄용 CMYK는 인쇄 프로파일에 따라 달라집니다. 실제 종이에 반드시 교정 인쇄를 해 보세요.
  • 최신 CSS를 위한 디자인이라면 지각적으로 균일한 명도 단계를 만들기 쉬운 OKLCH도 고려해 보세요.

자주 묻는 질문

Photoshop은 색상 프로파일을 적용합니다. 화면용은 보통 sRGB이고, 인쇄용은 다른 프로파일일 수 있습니다. 브라우저는 프로파일이 없는 HEX 값을 sRGB로 렌더링합니다. 문서가 Adobe RGB 또는 ProPhoto로 설정되어 있으면 픽셀 값은 같아도 보이는 색은 달라질 수 있습니다.

네. 둘 다 빨강 255, 초록 0, 파랑 0인 순수한 빨강을 뜻합니다. HEX는 0~255 범위의 각 채널 값을 두 자리 16진수로 쓴 표기일 뿐입니다.

기본 색상을 고르고 HSL 값을 복사하세요. CSS나 디자인 도구에서 색상과 채도는 고정하고 명도를 조절할 수 있습니다. 각 전경색과 배경색 조합의 대비를 따로 확인하세요.

현재 색상은 안내 단계를 진행하는 동안 이 브라우저 탭에 최대 30분 보관됩니다. URL에 추가되거나 당사 서버로 전송되지 않습니다. 다시 시작하거나 탭을 닫거나 브라우저 데이터를 지우거나 시간이 만료되면 삭제됩니다.

관련 도구