컬러 팔레트 생성기는 디자이너와 개발자를 위한 웹 기반 색상 도구입니다. HSL/HEX/RGB 색상 선택기, 다섯 가지 색상 조화 규칙 기반 팔레트 생성, WCAG 대비 검사기, 팔레트 저장 및 CSS/JSON 내보내기 기능을 제공합니다. 모든 기능은 클라이언트 측에서 작동하며 서버 업로드가 필요 없습니다.
HSL(색조, 채도, 명도)은 인간의 색상 인식에 가장 직관적인 모델입니다. RGB(빨강, 초록, 파랑)는 디스플레이 장치의 기본 색상 모델입니다. HEX는 RGB 값을 16진수로 표현한 것으로 웹 개발에서 가장 널리 사용됩니다. 이 도구에서는 세 가지 형식을 모두 지원하며 실시간으로 변환됩니다.
색상 조화 규칙은 색상환에서 기하학적 관계를 기반으로 합니다. 선택한 기준 색상의 위치에 따라 다른 색상들의 위치를 계산합니다. 예를 들어 보색은 기준 색상에서 180도 반대편에 위치하고, 유사색은 30도 간격으로 인접한 색상을 선택합니다. 이 규칙들은 수세기 동안 예술과 디자인에서 검증된 원칙입니다.
WCAG(Web Content Accessibility Guidelines) 대비 비율은 텍스트와 배경색 간의 명도 차이를 수치화한 값입니다. 1:1에서 21:1 사이의 값을 가지며, 높을수록 가독성이 좋습니다. 일반 텍스트(18px 미만)는 AA 기준 4.5:1, AAA 기준 7:1 이상이 필요합니다. 큰 텍스트는 AA 3:1, AAA 4.5:1 이상이면 충분합니다.
모노크롬 팔레트는 하나의 색조(Hue)를 기준으로 명도(Lightness)와 채도(Saturation)만을 변화시켜 구성합니다. 이 방법은 항상 일관되고 세련된 느낌을 주며, 브랜드 디자인 시스템에서 기본으로 자주 사용됩니다. 우리 도구는 기준 색상에서 명도 ±20%, 채도 조절 등 5가지 변형을 생성합니다.
보색 팔레트는 색상환에서 정반대에 위치한 두 색상을 사용합니다. 강한 대비와 생동감을 주므로 주목성이 필요한 요소(CTA 버튼, 강조 텍스트, 아이콘)에 효과적입니다. 단, 너무 많은 영역에 사용하면 시각적 피로를 줄 수 있으므로 주요 색상과 포인트 색상으로 구분하여 사용하는 것이 좋습니다.
유사색 팔레트는 색상환에서 인접한 색상들로 구성되어 매우 부드럽고 자연스러운 조화를 만듭니다. 대비가 강하지 않아 장시간 봐도 편안하며, 배경색이나 큰 영역의 색상에 적합합니다. 자연 풍경에서 자주 발견되는 색상 구성으로, 사용자에게 친숙하고 안정적인 느낌을 줍니다.
트라이어딕은 색상환에서 120도 간격으로 떨어진 세 가지 색상을 사용하며, 균형 잡힌 생동감을 제공합니다. 테트라딕(또는 직사각형)은 두 쌍의 보색을 사용한 네 가지 색상 구성으로 가장 다양한 색상 조합을 제공합니다. 트라이어딕은 세 가지 색상으로도 풍부한 표현이 가능하고, 테트라딕은 더 복잡하지만 다양한 디자인에 활용할 수 있습니다.
저장된 팔레트는 브라우저의 로컬 스토리지(LocalStorage)에 저장됩니다. 서버로 전송되지 않으며, 같은 브라우저에서만 접근 가능합니다. 브라우저 캐시를 삭제하면 저장된 팔레트도 함께 사라지므로 중요한 팔레트는 CSS 또는 JSON으로 내보내기하여 별도로 보관하는 것을 권장합니다.
CSS 변수(사용자 정의 속성)로 내보내면 :root 선택자 아래에 --color-1, --color-2 등의 변수가 생성됩니다. 이 변수들을 CSS 파일에 추가한 후, var(--color-1) 형식으로 어디서든 사용할 수 있습니다. 예를 들어 background: var(--color-1)처럼 사용하면 디자인 시스템 전체에서 일관된 색상을 유지할 수 있고, 나중에 한 곳에서만 수정하면 됩니다.
JSON 내보내기는 각 색상의 HEX, HSL, RGB 값을 모두 포함하는 구조화된 데이터를 생성합니다. 프로그래밍 방식으로 색상 데이터를 처리해야 할 때 유용합니다. 예를 들어 디자인 토큰 시스템, Figma 플러그인, 자동화된 스타일 가이드 생성 등에 활용할 수 있습니다. 형식은 다음과 같습니다: { "palette": [{ "hex": "#...", "hsl": {...}, "rgb": {...} }], "mode": "monochromatic" }
색상환은 스펙트럼의 색상을 원형으로 배열한 것입니다. 일반적으로 빨강, 주황, 노랑, 초록, 파랑, 보라 등 12가지 주요 색상이 포함됩니다. 색상환은 색상 간의 관계를 시각화하여 보색(180도 반대), 유사색(인접), 삼색(120도 간격) 등의 조화 규칙을 쉽게 이해할 수 있게 해줍니다. Johannes Itten이 현대 색상환의 기초를 확립했습니다.
웹 디자인에서 색상을 선택할 때는 다음 사항을 고려하세요: (1) WCAG 대비 비율을 확인하여 텍스트 가독성 확보, (2) 색맹 사용자를 위해 색상 외의 추가 식별자(아이콘, 텍스트) 제공, (3) 브랜드 아이덴티티와 일관성 유지, (4) 60-30-10 규칙(주요 60%, 보조 30%, 강조 10%) 적용, (5) 다양한 화면과 조명 조건에서도 색상이 적절히 보이는지 테스트.
색맹(특히 적색-녹색 색맹) 사용자를 고려할 때는: (1) 빨강-초록 조합을 피하고 대신 파랑-주황 조합 사용, (2) 명도 대비를 충분히 확보하여 색상 구분이 어려워도 명도 차이로 식별 가능하게 함, (3) 색상만으로 정보를 전달하지 말고 아이콘이나 텍스트 레이블을 함께 제공, (4) ColorBrewer와 같은 색맹 친화적인 팔레트 참고. 우리 도구의 대비 검사기를 사용하면 명도 대비를 확인할 수 있습니다.
60-30-10 규칙은 인테리어 디자인에서 시작된 색상 비율 원칙으로, 웹 디자인에도 널리 적용됩니다. 전체 디자인의 60%는 중립적인 주 색상(배경, 큰 영역), 30%는 보조 색상(헤더, 사이드바), 10%는 강조 색상(CTA 버튼, 링크, 포인트)으로 구성합니다. 이 규칙은 시각적 균형을 유지하면서도 지루하지 않은 디자인을 만드는 데 효과적입니다.
따뜻한 색상(빨강, 주황, 노랑 계열)은 에너지, 열정, 친근감을 전달하며 주목성을 높입니다. 차가운 색상(파랑, 초록, 보라 계열)은 차분함, 신뢰, 전문성을 전달합니다. 웹사이트에서는 목적에 따라 적절히 선택하세요. 예를 들어 소셜 미디어나 엔터테인먼트 사이트는 따뜻한 색상이, 금융이나 의료 사이트는 차가운 색상이 효과적입니다.
랜덤 팔레트 생성은 무작위로 기준 색조를 선택하고, 적절한 채도(50-100%)와 명도(40-70%) 범위 내에서 색상을 생성합니다. 완전히 무작위가 아니라 시각적으로 보기 좋은 범위 내에서 색상을 생성하도록 설계되었습니다. 새로운 색상 조합에 대한 영감이 필요할 때 유용하며, 예상치 못한 흥미로운 조합을 발견할 수 있습니다.
브랜드 컬러 가이드라인을 만들려면: (1) 브랜드의 핵심 색상(로고 색상)을 선택기에 입력하세요. (2) 다양한 조화 규칙을 적용하여 확장 팔레트를 생성하세요. (3) 대비 검사기로 모든 색상 조합의 접근성을 확인하세요. (4) 마음에 드는 팔레트를 저장하세요. (5) CSS 변수나 JSON으로 내보내어 디자인 시스템에 통합하세요. 이렇게 구성된 팔레트는 브랜드의 일관된 색상 정체성을 유지하는 데 도움이 됩니다.