색상 팔레트

언제 사용하나요?

디자인 작업 중 원하는 색상의 HEX/RGB/HSL 값을 확인하거나, 선택한 색상과 조화로운 보색·유사색을 찾아 팔레트를 구성해야 할 때 사용합니다.

사용 방법

• 색상 피커에서 원하는 색상을 선택하거나 HEX 코드를 직접 입력합니다.
• HEX, RGB, HSL 값이 자동으로 표시됩니다.
• 보색과 유사색을 확인해 팔레트를 구성합니다.

입력값 안내

마우스로 색상 스펙트럼에서 원하는 색을 클릭하거나, 이미 알고 있는 HEX/RGB 등 색상 코드를 텍스트로 직접 입력합니다.

계산·변환 기준

선택된 색상의 RGB 값을 기반으로 HSL 색 공간으로의 변환 공식(Color Space Conversion Formulas)을 거쳐 색조(H), 채도(S), 명도(L)를 추출하고, 색조 값을 ±180도 회전시켜 보색을 계산하며 ±30도 조정을 통해 유사색 팔레트를 생성합니다.

사용 예시

• 색상 값 확인 - 색상 피커로 원하는 색상을 선택하고 HEX/RGB/HSL 값을 확인합니다.
• 조화로운 색상 찾기 - 선택한 색상의 보색과 유사색을 확인해 팔레트를 구성합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.

예시

• 빨간색(#FF0000) 선택 → 보색 시안색(#00FFFF), 유사색 주황/자주색 팔레트 자동 제안
• 브랜드 색 HEX 입력 → 보색과 유사색으로 배색 팔레트 구성

주의사항

• 모니터와 인쇄물 간 색상 표현이 다를 수 있습니다. 최종 디자인 적용 전 실제 출력·화면에서 확인하세요.
• HEX 값 등 입력·생성 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

색상 선택과 코드 복사

색상 팔레트나 스포이드로 원하는 색상을 선택하면 HEX, RGB, HSL 코드를 바로 복사할 수 있습니다.

색상 코드 변환 연계

선택한 색상의 다른 형식이 필요하다면 색상 코드 변환기를 함께 활용하세요. 대비 비율 확인이 필요하면 접근성 도구에서 텍스트와 배경 색 조합을 체크하세요.

자주 묻는 질문

보색은 어떻게 계산하나요?

HSL에서 H(색조) 값을 180° 반대로 이동한 색상이 보색입니다.

색상 값을 직접 입력할 수 있나요?

네, HEX 코드를 직접 입력하면 피커와 다른 형식 값이 자동으로 업데이트됩니다.

유사색은 어떻게 고르나요?

기준 색의 색조(H)를 양옆으로 조금씩 이동해 자연스럽게 어울리는 색을 제안합니다.

HEX, RGB, HSL은 어떻게 다른가요?

같은 색을 다른 방식으로 표기한 값입니다. HEX는 웹에서, RGB는 화면, HSL은 색조·채도·명도를 직관적으로 조절할 때 편리합니다.

관련 도구

• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.
• JWT 디코더 - JWT의 header와 payload를 디코딩해 JSON과 주요 클레임을 확인합니다.
• 정규식 테스터 - 정규식 패턴을 입력해 텍스트에서 매칭 결과를 실시간으로 확인합니다.
• QR 코드 생성기 - 텍스트나 URL을 QR 코드로 변환하고 이미지로 다운로드합니다.