웹사이트 배색 미리보기
다섯 가지 색상을 웹페이지 예시에 적용하고 텍스트 명암비를 확인한 뒤 CSS 변수로 내보내세요.
함께 사용하면 좋은 도구: 읽기 쉬운 글자색 생성기 , 랜덤 그라데이션 생성기 , 랜덤 5색 팔레트 생성기 외 더 많은 도구
다섯 가지 색상의 역할 지정
불투명한 sRGB HEX 색상을 3자리 또는 6자리로 입력하세요. #은 생략할 수 있습니다. 변경 사항은 즉시 미리보기에 반영됩니다.
공백, 쉼표 또는 세미콜론으로 구분하세요. 순서는 페이지 배경, 카드 배경, 페이지 텍스트, 버튼 배경, 버튼 텍스트입니다. 유효한 색상이 정확히 5개이면 즉시 적용되며, 이후 역할을 맞바꿀 수 있습니다.
웹페이지 배색 실시간 미리보기
일반적인 웹 요소에 배색을 적용한 시각적 예시입니다. 내비게이션과 버튼은 모양을 확인하기 위한 표시용 요소입니다.
다음 아이디어를 위한 여유.
웹사이트, 포트폴리오, 대시보드를 만들기 전에 페이지 전체에서 색상이 어떻게 어우러지는지 확인해 보세요.
작은 아이디어도 명확하게
카드로 유용한 정보를 묶어 보세요. 페이지 배경과 카드 배경 모두에서 본문을 쉽게 읽을 수 있는지 확인하세요.
프로젝트 살펴보기표시된 텍스트와 배경의 명암비
페이지 텍스트 / 페이지 배경
#1E293B / #F1F5F9
명암비: 13.35:1
- 일반 텍스트 AA (4.5:1): 충족
- 일반 텍스트 AAA (7:1): 충족
- 큰 텍스트 AA (3:1): 충족
카드 텍스트 / 카드 배경
#1E293B / #FFFFFF
명암비: 14.63:1
- 일반 텍스트 AA (4.5:1): 충족
- 일반 텍스트 AAA (7:1): 충족
- 큰 텍스트 AA (3:1): 충족
버튼 텍스트 / 버튼 배경
#FFFFFF / #1D4ED8
명암비: 6.70:1
- 일반 텍스트 AA (4.5:1): 충족
- 일반 텍스트 AAA (7:1): 미충족
- 큰 텍스트 AA (3:1): 충족
WCAG 2 sRGB 공식으로 단색 글자와 배경 세 쌍을 확인합니다. 반올림 전 수치로 판정하고 소수점 둘째 자리까지 표시합니다. 큰 글자는 보통 굵기에서 24 CSS px 이상, 굵은 글씨에서 18⅔ CSS px 이상입니다.
배색을 CSS 변수로 내보내기
다섯 가지 사용자 지정 속성은 미리보기에 사용된 색상과 같습니다. 스타일시트에 추가한 뒤 var(--palette-background), var(--palette-surface), var(--palette-text), var(--palette-primary), var(--palette-on-primary)로 참조하세요.
웹사이트 배색을 미리 보는 방법
- HEX 색상 5개를 개별 입력하거나 목록을 붙여넣으세요. 5색 팔레트 생성기에서 열 수도 있습니다.
- 페이지, 카드, 텍스트, 버튼에 색상을 지정하세요. 맞바꾸기 메뉴로 다른 역할 조합을 시험해 보세요.
- 미리보기와 세 쌍의 명암비를 확인한 뒤 CSS 변수를 복사하거나 .css 파일을 다운로드하세요.
웹사이트 배색 활용 예시
- 옅은 페이지 배경, 흰색 카드, 어두운 텍스트, 파란색 버튼의 예시로 기업 웹사이트 배색을 검토해 보세요.
- 페이지 배경과 텍스트 색상을 맞바꿔 어두운 배색을 시험하고 카드와 버튼의 명암비를 다시 확인하세요.
- 사진이나 브랜드 팔레트의 다섯 가지 색상을 인터페이스 역할에 지정하고 텍스트가 잘 읽히는지 비교하세요.
자주 묻는 질문
색조 생성기와 어떻게 다른가요?
이 도구는 기존의 다섯 가지 색상을 페이지 역할과 웹페이지 예시에 적용합니다. 더 밝거나 어두운 색상을 새로 만들지는 않습니다. 역할을 맞바꿔 기존 팔레트가 실제 화면에서 어떻게 보이는지 확인할 수 있습니다.
어떤 색상끼리 명암비를 비교하나요?
페이지 텍스트와 페이지 배경, 페이지 텍스트와 카드 배경, 버튼 텍스트와 버튼 배경을 각각 비교합니다. 각 쌍에 대해 일반 텍스트 AA, 일반 텍스트 AAA, 큰 텍스트 AA 결과를 표시합니다.
4.50:1로 표시되는데 AA 미충족인 이유는 무엇인가요?
표시는 소수점 둘째 자리로 반올림하지만 판정에는 전체 계산값을 사용합니다. 실제 명암비가 4.5:1보다 조금 낮으면 표시값이 4.50:1이어도 일반 텍스트 AA를 충족하지 않습니다.
CSS를 내보내면 사이트에 바로 적용되나요?
CSS 사용자 지정 속성 다섯 개를 내보내고 사이트의 배경, 글자, 버튼 스타일에서 참조해 배색을 적용하세요.
입력한 색상이 저장되거나 업로드되나요?
편집한 색상은 현재 브라우저 탭에서 처리되며 분석 이벤트에는 포함되지 않습니다. 팔레트 생성기에서 열면 같은 탭의 임시 세션 저장소로 전달하고 정상적으로 읽은 후 삭제합니다. 보관하려면 복사하거나 다운로드하세요.
배색은 현재 브라우저 탭에서 처리되며 색상값은 분석 이벤트나 URL에 포함되지 않습니다. 생성기에서 직접 보낸 팔레트는 같은 탭의 임시 세션 저장소를 통해 전달되고 불러온 후 삭제됩니다. 보관하려면 복사하거나 다운로드하세요.
유용한 도구를 함께 사용하는 사람에게 공유하세요.
도구가 도움이 되었나요? 또는 으로 의견을 남겨 주세요.