01
짧은 HEX도 입력할 수 있습니다
세 자리 또는 여섯 자리 HEX를 입력하거나 색상 선택기를 사용하세요. 초기 기준색은 #3B82F6이며 입력이 잠시 멈추면 자동으로 결과가 바뀝니다. 설정을 여러 개 한꺼번에 바꾸려면 자동 생성을 끄고 Ctrl 또는 Cmd와 Enter를 누르세요.
색상과 접근성
색상 팔레트 생성기— 기준색에서 바로 쓸 CSS 색상까지
HEX 기준색을 정하고 배색 규칙, 아홉 단계의 밝기와 흰 글자 대비를 살펴보세요.
색상 팔레트 생성기
색상 계산은 이 브라우저 탭에서만 이뤄지며 업로드하지 않습니다.
생성 결과
배색 팔레트
전체 5개 중 5개 표시
아홉 단계의 색상
두 색의 혼합
기준색 HEX
두 색의 혼합
두 번째 색 HEX
팔레트 준비 완료 · 표시 색 5개
CSS 변수
브랜드의 파란색은 정했는데 보조색과 버튼 색상이 여전히 애매할 때가 있습니다. 색상 팔레트 생성기는 그 기준색을 고정하고 유사색, 보색, 삼색 조합을 비교할 수 있게 합니다. 색상 조합 도구가 제시하는 것은 색상환의 규칙에 따른 후보이지, 브랜드에 가장 잘 어울리는 색을 자동으로 판정한 결과가 아닙니다.
이 색상 팔레트 생성기는 기준색을 아홉 단계로 밝고 어둡게 펼치고, 다른 색과 50% 비율로 혼합한 값도 보여 줍니다. 컬러 팔레트 생성기에서 흰 글자의 대비율을 확인한 뒤 후보를 거르면, 현재 남은 색과 전체 단계 색상 및 혼합색을 CSS 변수로 가져갈 수 있습니다.
색상 팔레트 생성기를 쓰는 이유
색의 조화와 실제 글자 가독성을 서로 다른 계산으로 확인합니다.
기준색은 그대로 두고 관계만 바꾸기
파란색 하나에서 가까운 유사색, 맞은편의 보색, 세 방향의 삼색 배색으로 전환할 수 있습니다. 색상 팔레트 생성기는 마음에 든 기준색을 무작위 색으로 바꾸지 않습니다. 아홉 단계의 명도도 같은 기준색을 사용해 규칙별 차이를 비교하기 쉽습니다.
흰 글자가 읽히는 후보만 남기기
각 색상 견본에 흰 글자와의 대비율이 숫자로 나타납니다. 4.5:1 필터를 켜면 일반 글자 AA 기준에 못 미치는 색이 화면과 CSS 출력에서 빠집니다. 보기 좋은 배색도 글자 배경으로는 실패할 수 있다는 차이를 바로 볼 수 있습니다.
기준색을 검증된 코드 값으로 옮기는 순서
02
배색 규칙과 두 색의 혼합을 구분하세요
초기 유사색 규칙은 가까운 색으로 차분한 조합을 만듭니다. 보색 찾기와 삼색 배색은 색상환의 다른 위치를 쓰며 견본 수가 달라집니다. 별도의 혼합 슬라이더는 두 번째 HEX 색상을 0~100% 섞고 RGB와 HSL 중 모델을 고릅니다.
03
필터를 켜기 전후의 개수를 확인하세요
흰 글자의 대비율과 표시된 견본 수를 먼저 보세요. AA 필터를 켜면 남는 색이 0개일 수도 있지만 입력색을 자동 수정하지는 않습니다. 견본 하나를 복사하거나 현재 팔레트와 아홉 단계의 색상, 혼합색을 CSS 변수로 저장할 수 있습니다.
배색 선택부터 CSS 반영까지
여섯 가지 배색 규칙
유사색, 보색, 삼색, 분할 보색, 사색, 단색을 같은 기준색에서 만듭니다. 색상환의 각도만 달라지므로 이미 정한 브랜드 색은 유지됩니다.
기준색 중심의 아홉 단계
밝은 색 네 개, 원래 색 한 개, 어두운 색 네 개를 제공합니다. 배경, 테두리, 마우스 올림 상태와 글자색을 검토할 때 사용할 수 있으며 RGB로 흰색과 검은색을 섞어 계산합니다.
비율을 보여 주는 혼합
두 번째 HEX와 0~100% 슬라이더로 혼합 정도를 지정합니다. RGB는 채널을 보간하고 HSL은 짧은 색상환 경로를 따르므로 중간 결과가 달라질 수 있습니다.
흰 글자 대비 필터
완성된 sRGB 색으로 대비율을 계산하고 4.5:1 미만인 견본을 선택적으로 숨깁니다. 이 검사는 흰 글자와 단색 배경에 한정되며, 색각 시뮬레이션과는 다릅니다.
현재 상태를 반영한 CSS
복사하거나 .css 파일로 내려받을 수 있습니다. 필터 뒤 화면에 보이는 팔레트, 아홉 단계와 혼합색이 들어가고 숨겨진 후보는 빠집니다.
조합과 대비 계산의 적용 범위
- 불투명 HEX만 입력
- 기준색과 두 번째 색은 #RGB 또는 #RRGGBB로 받습니다. 투명도와 넓은 색역은 지원하지 않습니다. 투명색은 어느 배경 위에 놓이는지 정해야 실제 대비율을 계산할 수 있습니다.
- 색상환 규칙은 취향을 판정하지 않습니다
- 유사색과 보색 등의 관계는 후보를 만드는 수학적 규칙입니다. 브랜드 의미, 각 색의 사용 면적과 실제 화면에서의 인상은 사람이 판단해야 합니다.
- AA 판정은 흰 글자 한 경우만
- WCAG 상대 휘도 공식으로 흰 일반 글자와 불투명 배경 견본의 대비를 구합니다. 4.5:1을 쓰며 검은 글자, 큰 글자 예외, 사진 배경, 반투명 층, 아이콘은 검사하지 않습니다.
- 필터는 색을 고치지 않습니다
- 기준 미달 배색만 화면과 CSS에서 제외합니다. 기준색, 아홉 단계, 혼합 결과는 그대로 남고 후보가 0개면 개수를 분명히 보여 줍니다.
- 디지털 혼합은 물감 혼합이 아닙니다
- RGB와 HSL 보간은 화면용 HEX를 만듭니다. 잉크나 물감의 재료 특성과 인쇄 환경까지 예측하지는 않습니다.
색상 팔레트 생성기 자주 묻는 질문
보색 찾기는 어떻게 하나요?
기준색을 정하고 배색 규칙에서 보색을 고르면 색상환 반대편 색이 표시됩니다. 실제 글자 배경으로 쓸 때는 색상의 반대 관계와 별개로 흰 글자 대비율도 확인하세요.
보색과 유사색의 차이는 무엇인가요?
보색은 기준색과 약 180도 떨어져 강한 색상 차이를 내고, 유사색은 주변 각도에서 차분한 연결감을 줍니다. 이 차이는 명도 대비나 브랜드 적합성을 자동으로 보장하지 않습니다.
삼원색, 분할 보색, 사각 배색은 어떤 차이가 있나요?
삼색은 세 방향, 분할 보색은 맞은편 색의 양옆, 사색은 네 방향으로 색상환을 나눕니다. 이 페이지에서 각 규칙은 고정된 견본 수를 가지며 아홉 단계의 명도 색상은 별도로 생성됩니다.
웹 화면에 색은 몇 개나 쓰는 게 좋나요?
배색 후보는 규칙마다 2~5개입니다. 여기에 같은 기준색의 아홉 단계가 따로 있으므로 배경과 상태별 색을 만들 때 무작정 새로운 색상을 늘릴 필요가 없습니다.
생성된 색을 그대로 브랜드 컬러로 써도 되나요?
그대로 사용할 수 있는 HEX 후보이지만 최종 브랜드 컬러의 적합성을 판정하지는 않습니다. 실제 UI에서 색의 사용 면적과 글자 대비를 검토한 뒤 선택하세요.
다른 색상 조합 문제도 있나요?