HEX 색상 선택기
자주 쓰는 프리셋
브라우저 기본 색상 컨트롤로 색을 고르거나 3자리 또는 6자리 HEX 값을 입력하세요. RGB, HSL, 근사 CMYK로 변환하고 상대 휘도와 흰색·검정에 대한 정확한 대비율을 계산합니다. 색상은 이 브라우저에서 처리되며 단계 URL에는 추가되지 않습니다.
색상을 선택하는 방법
-
1
예시 또는 색상 컨트롤로 시작하기
예시 색상을 고르거나 브라우저 기본 색상 선택기를 엽니다.
-
2
정확한 HEX 값 입력하기
#F60 같은 3자리 또는 #FF6600 같은 6자리 값을 입력하면 짧은 표기를 올바르게 확장합니다.
-
3
계산된 형식 확인하기
HEX, RGB, HSL, 근사 CMYK와 sRGB 상대 휘도를 한곳에서 확인합니다.
-
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에 추가되거나 당사 서버로 전송되지 않습니다. 다시 시작하거나 탭을 닫거나 브라우저 데이터를 지우거나 시간이 만료되면 삭제됩니다.
관련 도구
ASCII 표 참조
NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.
HTML 문자 참조
HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.
키보드 단축키 참고표
macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.
보색 찾기
어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.
색상 이름 찾기
HEX, RGB 또는 HSL 값에 가장 가까운 표준 CSS 색상 이름을 CIEDE2000으로 찾습니다.
프로그램 카운터 시뮬레이터
레이블, 분기, 점프, 호출, 반환과 16·24·32비트 주소를 사용해 단순화된 고정 길이 명령 목록의 PC 흐름을 추적합니다.
이 도구는 다른 언어로도 제공됩니다
- HEX-kleurkiezer [NL]
- Selector de color HEX [ES]
- Próbnik kolorów HEX [PL]
- محدد ألوان HEX [AR]
- Pemilih Warna HEX [ID]
- HEX Renk Seçici [TR]
- HEX 颜色选择器 [ZH]
- Seletor de cores HEX [PT]
- Bộ chọn màu HEX [VI]
- Sélecteur de couleur HEX [FR]
- HEX カラーピッカー [JA]
- HEX-Farbwähler [DE]
- เครื่องมือเลือกสี HEX [TH]
- HEX Color Picker [EN]
- HEX-färgväljare [SV]
- Selettore colore HEX [IT]
- Выбор цвета HEX [RU]