색상을 고르거나 붙여넣어 HEX, RGB, HSL, OKLCH 값과 명암 단계, 흰색 및 검은색 대비 점수를 확인하는 무료 색상 선택기입니다.
HEX 색상 선택기
색상을 고르거나 HEX, RGB, HSL 값을 붙여넣어 디자인과 코드에 필요한 모든 형식을 확인하세요. HEX, RGB, HSL, OKLCH 값을 제공합니다. 밝고 어두운 단계도 표시하며 흰색과 검은색 배경에서 텍스트를 읽기 쉬운지 확인할 수 있습니다.
색상 선택기를 사용하거나 #4F98FB, rgb(79, 152, 251), hsl(215, 95%, 65%) 같은 값을 입력하세요.
한 번 클릭해 원하는 형식을 복사하세요. OKLCH는 색상 계열이 달라도 명도를 일정하게 유지하는 최신 CSS 형식입니다.
명암 단계 중 하나를 클릭해 현재 색상으로 설정하세요.
대비율을 확인해 해당 색상에 흰색 또는 검은색 텍스트 중 무엇이 적합한지 판단하세요.
버튼은 텍스트와 버튼 색상 사이에 최소 4.5:1의 대비를 목표로 하세요.
브랜드 색상 하나로 팔레트를 만드세요. 배경에는 밝은 색조, 버튼에는 기본 색상, 마우스 오버 상태와 텍스트에는 어두운 색조를 사용하세요.
화면마다 색상이 다르게 보입니다. 노트북뿐 아니라 휴대폰에서도 브랜드 색상을 확인하세요.
자주 묻는 질문
HEX 색상 코드는 무엇인가요?
화면 색상을 나타내는 6자리 코드입니다. # 뒤에 빨강, 초록, 파랑을 나타내는 16진수 숫자 세 쌍이 옵니다. #FF0000은 순수한 빨간색, #000000은 검은색, #FFFFFF는 흰색입니다.
HEX, RGB, HSL은 어떻게 다른가요?
같은 색을 서로 다른 방식으로 표현합니다. HEX와 RGB는 빨강, 초록, 파랑의 값을 나타냅니다. HSL은 색상환에서의 각도인 색상, 채도, 명도를 나타내므로 직접 조정하기 쉽습니다.
OKLCH란 무엇이며 사용해야 하나요?
OKLCH는 사람이 색상을 인식하는 방식을 바탕으로 한 최신 CSS 색상 형식입니다. L 값이 같은 두 색은 비슷한 밝기로 보여 일관된 팔레트를 만들기 쉽습니다. 현재 주요 브라우저에서 모두 지원합니다.
대비는 어떻게 계산하나요?
WCAG 2 공식을 사용합니다. 더 밝은 색의 상대 휘도에 0.05를 더한 값을 더 어두운 색의 상대 휘도에 0.05를 더한 값으로 나눕니다. 두 색 조합을 자세히 확인하려면 We.Inc 색상 대비 검사기를 사용하세요.
웹사이트에 어울리는 브랜드 색상 고르기
브랜드 색상은 여러 역할을 해야 합니다. 버튼에서 눈에 띄고 흰색 텍스트 뒤에서도 읽기 쉬우며 페이지 전체에 사용해도 눈이 피로하지 않아야 합니다. 중간 밝기의 파랑, 초록, 짙은 빨강은 보통 이 세 조건을 만족합니다. 노랑이나 파스텔 분홍처럼 매우 밝은 색은 로고에는 잘 어울려도 버튼 색상으로는 적합하지 않습니다. 조정하지 않으면 흰색이나 검은색 텍스트가 잘 읽히지 않기 때문입니다.
대비 패널에서 바로 확인할 수 있습니다. 흰색 텍스트의 점수가 4.5:1 미만이면 검은색 텍스트를 사용하거나 버튼에 색상 단계 중 더 어두운 색을 선택하세요.
밝은 색조, 어두운 색조, 간단한 팔레트
밝은 색조는 기본 색상에 흰색을 섞고, 어두운 색조는 검은색을 섞습니다. 실용적인 웹사이트 팔레트에는 몇 가지 색이면 충분합니다. 섹션 배경에는 아주 밝은 색조, 버튼과 링크에는 기본 색상, 마우스 오버 상태에는 어두운 색조를 사용하세요. 텍스트와 테두리에 중성 회색을 추가하면 일관된 팔레트가 완성됩니다.
예를 들어 색이 들어간 배경에 회색 텍스트를 놓는 경우처럼 특정 텍스트와 배경의 조합을 확인하려면 WCAG AA와 AAA 점수를 모두 제공하는 색상 대비 검사기를 사용하세요.