원하는 단색 배경 만들기
사용자 지정 색상 화면
여섯 자리 HEX 값을 입력하거나 눈으로 색을 고른 뒤 전체 화면으로 열고 이전 선택과 비교하며 같은 색의 PNG를 내보내세요. 선택한 색을 계속 표시하면서 HEX, RGB와 HSL 형식의 값을 함께 보여 줍니다.
- 입력
- 색상 선택기 또는 여섯 자리 HEX
- 표시 값
- HEX, RGB, HSL과 계산한 밝기
- 기록
- 브라우저의 최근 색상 네 개
- 최대 이미지
- 7680 × 4320
사용자 지정 색상 화면 만드는 방법
정확도가 중요하면 알고 있는 값에서 시작하고 분위기를 고를 때는 눈으로 탐색하세요.
색상 입력하기
#3AB0A2 같은 값을 입력하거나 색상 선택기를 쓰세요. 브라우저가 제공하면 스포이트도 쓸 수 있습니다.
값 확인하기
RGB와 HSL 색상 값, 계산된 밝기와 대비가 큰 추천 글자색을 확인하세요.
선택지 비교하기
다른 색을 고르고 A/B 비교를 켜 이전 선택 옆에 놓으세요.
사용하거나 저장하기
배경을 전체 화면으로 열거나 필요한 크기의 단색 PNG를 다운로드하세요.
디자인과 화면에 같은 값 쓰기
HEX 코드는 함께 작업하는 사람에게 분명한 디지털 기준을 전달합니다. 이미지나 앱의 색상 설정에는 RGB를 복사하고 색조, 채도와 밝기를 따로 조절하고 싶으면 HSL을 쓰세요.
화면은 미리보기이며 모든 기기가 같은 값을 똑같이 재현한다는 증거는 아닙니다. 패널 종류, 기기 색상 설정, 밝기와 방의 빛은 모두 보이는 모습에 영향을 줍니다.
색상을 비교하는 실용적인 순서
첫 번째 후보를 설정하고 두 번째 색을 고른 뒤 A/B 비교를 여세요. 색을 기억하는 대신 두 색을 동시에 판단하세요. 색 위에 글자를 올리기 전에 대비 값을 확인하세요.
중립적인 기준이 필요하면 선택한 색을 순수한 검정이나 흰 배경과 비교하세요. 두 페이지에는 검사와 조명에 맞는 각자의 빠른 설정도 있습니다.
사용자 지정 색상 화면 조절 기능
색상 선택, 비교, 브라우저 동작과 파일 생성을 조절합니다.
사용자 지정 빠른 설정
색을 고르면 그 색을 바탕으로 선택한 색 그대로, 어둡게, 짙게와 밝게 값을 만듭니다.
밝기와 글자색
LUM은 웹 접근성 검사에 쓰는 계산된 상대 밝기를 표시합니다. TEXT는 검정과 흰색 중 대비가 더 큰 글자색을 보여 줍니다.
최근 색상
유효한 색상 네 개까지 기기에 저장해 최근 작업으로 돌아갈 수 있습니다.
현재 화면에 맞추기
브라우저가 알려 주는 크기로 내보냅니다. 화면 단위 하나에 실제 픽셀이 몇 개 쓰이는지를 뜻하는 픽셀 비율도 반영합니다.
중요: 대비 안내는 검정이나 흰색 글자에 대한 계산입니다. 프로젝트에 적용되는 접근성 기준에 맞춰 전체 화면 구성을 확인하세요.
사용자 지정 색상 화면 자주 묻는 질문
어떤 HEX 형식을 입력할 수 있나요?
# 뒤에 여섯 개의 16진수 문자를 입력하세요. 예를 들면 #1A2B3C입니다.
최근 색상은 업로드되나요?
아니요. 최근 목록은 현재 기기의 브라우저 저장 공간에 보관됩니다.
모니터를 보정할 수 있나요?
아니요. 요청한 브라우저 색상을 표시하지만 실제 패널의 빛 출력을 측정하거나 바로잡지는 못합니다.