Softonic

HEX 색상 선택기

단계 1 / 4 Hex color

디자이너와 개발자는 하루에 수십 번씩 동일한 색상을 네 가지 표시 방식에서 사용해야 합니다. 2차원 포화도/명도 필드의任意 위치를 클릭하거나, 색조 슬라이더를 드래그하거나 값을 붙여넣으면 이 색상 선택 도구가 HEX, RGB, HSL, HSV, CMYK 값을 나란히 표시합니다. 또한 WCAG 기준에 따라 흑백 이미지와 비교하여 색상이 명확하게 읽힐 수 있는지 즉시 확인할 수 있습니다.

색상을 어떻게 선택해야 할까요?

  1. 1

    색조를 선택하세요

    수직 색조 슬라이더를 0~360°의 전체 스펙트럼에 걸쳐 드래그하세요.

  2. 2

    픽 포화도 및 값

    2차원 사각형 내부를 클릭하거나 드래그하여 색상의 생생함과 밝기를 설정하세요.

  3. 3

    입력값을 사용하여 미세 조정하세요

    HEX, RGB, HSL, HSV 또는 CMYK 형식의 정확한 값들을 입력하세요. 다섯 개의 필드는 모두 동기화됩니다.

  4. 4

    접근성과 복사 여부를 확인하세요

    검정색 및 흰색 대비의 대비 비율이 내장된 형태로 표시되며, 한 번 클릭하면 필요한 표기 방식을 복사할 수 있습니다.

실제 적용에서의 색상 표기법

각 색상 모델은 약간 다른 질문에 답합니다.

표기 참조

표기법 구성 요소 사용 위치
HEX #RRGGBB CSS, 디자인 도구, 브랜드 가이드
RGB 빨간색 0–255, 초록색 0–255, 파란색 0–255 CSS rgb(), 이미지 편집기
HSL 색조 범위 0–360°, 포화도%, 밝기 비율 CSS hsl(), 디자인 시스템
HSV/HSB 색조 범위: 0–360°, 포화도(%) 및 밝기 비율(%) Photoshop 및 Figma 색상 선택 도구
CMYK 시안 %, 마젠타 %, 노란색 %, 키/검정색 % 인쇄 및 프리프레스용
OKLCH 밝기%, 색도, 색조 현대 CSS 컬러 모듈 4가지 팔레트

접근성 대비

WCAG 2.2는 텍스트와 배경 간의 최소 대비 비율을 규정합니다:

피커는 백색과 검정색에 대한 비율을 실시간으로 계산합니다. 사용자 정의 전경 색상이 중요하다면 각 색 조합마다 별도의 대비 검사 도구를 사용하십시오.

■ 팁

자주 묻는 질문

포토샵은 색상 프로파일을 적용합니다(일반적으로 화면용에는 sRGB를 사용하며, 인쇄용에서는 종종 다른 프로파일이 사용됩니다). 브라우저는 태그가 없는 HEX 값을 sRGB로 표현합니다. 문서가 Adobe RGB 또는 ProPhoto로 설정되어 있으면 픽셀 값은 동일하지만 인식되는 색상이 달라집니다.

네 — 두 경우 모두 완전한 빨간색을 나타내며, 빨간색은 255, 녹색과 파란색은 각각 0에 해당합니다. HEX는 각 채널 값(0~255)을 나타내는 2자리의 16진수 표기법입니다.

주 색상을 선택한 후 HSL 모드로 전환하고, 색조와 포화도를 고정한 상태에서 밝기를 10% 단위로 조절하세요. 이렇게 하면 동일한 색조 위에 배열된 일관된 색조 계열이 생성됩니다.

최근 사용한 색상들은 브라우저의 로컬 저장소에 저장되어 페이지를 갱신하더라도 그대로 유지됩니다. 어떤 데이터도 서버로 전송되지 않으며, 팔레트 사용 기록은 언제든지 삭제할 수 있습니다.