팔레트 생성기

이 배색 생성기는 HSL 색 모델로 계산합니다. H(색상)는 색상환의 0~360° 각도이고 S(채도)와 L(명도)은 백분율입니다. 기준 색을 고르면 색채학의 대표 규칙에 따라 색상환을 회전해 한 번에 5가지 색을 만듭니다. 색상만, 또는 명도와 채도만 바꾸기 때문에 색들 사이에 분명한 수학적 관계가 있어 아무렇게나 고른 것이 아닌 자연스러운 조화를 이룹니다.

다섯 가지 모드는 쓰임새가 다릅니다. "단색"은 색상을 고정하고 명도와 채도만 바꾸는 가장 안전한 방식으로 브랜드나 정보가 많은 UI에 적합합니다. "보색"은 180° 반대편 색으로 대비가 가장 강해 버튼과 강조 표시를 돋보이게 합니다. "유사색"은 ±15°, ±30°의 이웃 색으로 일러스트나 풍경 사진처럼 부드럽고 자연스럽습니다. "삼각 배색"은 색상환을 3등분(120°, 240°)해 풍부하지만 비율 조절이 필요합니다. "무작위"는 적당한 채도·명도 범위에서 색을 뽑아 영감을 얻을 때 좋습니다.

실제로 적용할 때는 60-30-10 법칙을 참고하세요. 60%는 주색으로 배경과 넓은 면적에, 30%는 보조색으로 섹션과 카드에, 10%는 강조색으로 버튼과 링크에 씁니다. 보색이나 삼각 배색을 똑같은 비율로 쓰면 산만해 보이므로 주인공 색을 하나 정하고 나머지는 채도를 낮추세요. 또한 글자와 배경의 대비는 WCAG AA 기준 4.5:1 이상이어야 하며, 이 사이트의 색상 대비 검사기로 확인할 수 있습니다.

색상 카드를 클릭하면 HEX 코드가 복사되고, CSS 변수, SCSS 변수, Tailwind 설정, JSON으로 한 번에 내보낼 수도 있습니다. 아래 CSS 그라데이션 생성기로 배색을 배경 그라데이션으로 만들 수도 있습니다. 모든 계산은 브라우저에서 이루어집니다.