색상 팔레트 생성 방식
색상 팔레트 생성기는 하나의 기준 HEX 색상에서 여러 배색 관계를 만듭니다. 색상 선택기나 입력창으로 #RRGGBB 값을 지정하면 RGB와 HSL 정보가 표시되고, 보색, 유사색, 삼각 배색, 분할 보색, 사각 배색, 단색 단계가 생성됩니다. 보색은 강한 대비에 적합하고, 유사색은 부드러운 인터페이스나 배경에 어울립니다. 단색 단계는 같은 색상의 밝기를 달리해 배경, 테두리, hover, 비활성 상태처럼 UI 계층을 만들 때 유용합니다. 각 색상 견본은 클릭해서 복사할 수 있습니다.
CSS와 디자인 시스템에 활용
전체 팔레트를 복사하거나 CSS 형식으로 복사해 디자인 도구, CSS 변수, 컴포넌트 테마, 차트 색상에 적용할 수 있습니다. 오른쪽 패널에는 기준색 미리보기와 HEX, RGB, HSL 값이 함께 표시되어 같은 색을 여러 형식으로 확인하기 쉽습니다. 입력값이 올바른 6자리 HEX 가 아니면 유효하지 않은 값으로 처리됩니다. 브랜드 색상을 기준으로 보조색을 찾거나, 버튼과 배경의 조합을 빠르게 실험할 때 특히 유용합니다.
배색 선택 시 고려할 점
자동 생성된 팔레트는 출발점일 뿐 모든 화면에 그대로 적합한 것은 아닙니다. 텍스트와 버튼에 쓰는 색은 배경과 충분한 대비가 있어야 하며, 보색이나 사각 배색은 강조 효과가 강하므로 사용 비율을 조절해야 합니다. 업무용 화면에서는 주색, 보조색, 경고색, 배경색, 테두리색처럼 역할을 먼저 정하는 것이 좋습니다. 접근성을 고려해야 하는 서비스라면 색상만으로 상태를 전달하지 말고 텍스트, 아이콘, 패턴을 함께 사용하세요.
댓글