무작위 색상 팔레트 생성기
조화된 색상 조합은 서로 인접한 다섯 가지 무작위 색보다 훨씬 유용합니다. 이 도구는 기본 색상을 선택한 후 고전적인 색이론의 관계(유사색, 보완색, 분할보완색, 삼원색 또는 사원색)를 기반으로 네 가지 관련 색상을 생성합니다. 원하는 색표는 잠금한 후 나머지 색상을 재생산할 수 있습니다.
팔레트를 생성하는 방법
-
1
화성 유형을 선택하세요
유사한(바퀴 상의 인접점), 보완적인(반대 방향), 삼각형 형태(120도 간격), 사각형 형태, 또는 단색적(동일 색조의 다양한 음영)
-
2
기반을 굽습니다
첫 번째 샘플은 포화도와 밝기가 중간 수준인 무작위 색조로, 출발점 역할을 합니다.
-
3
형제자매는 계산됩니다
나머지 샘플들은 선택된 화성법을 사용하여 기반 색상에서 유도된 후 대비를 조정합니다.
-
4
잠금하고 다시 롤링하세요
좋은 색상 샘플은 그대로 보관하세요. 나머지 색들은 팔레트가 완벽하게 어우러질 때까지 다시 감아보세요.
샤모니 체트시트
| 스케줄 | 휠의 화이트 오프셋 | 분위기 |
|---|---|---|
| 단색 | 0도 (색조는 동일하지만 밝기/L/S 값은 달라짐) | 평온하고 최소한의 요소만 포함됨 |
| 유사한 색조 | +/- 30도 | 따뜻하고 자연스러운 색감 |
| 보완형 | 180도 | 높은 대비율, 선명하고 강렬한 이미지 |
| 부분 보완형 | 150/210도 | 긴장 없이 뚜렷한 대비 구현 |
| 삼각형 형태 | 0, 120, 240도 | 생동감 있고 균형 잡힌 |
| 사각형 구조 | 0°, 90°, 180°, 270° | 구성이 복잡하고 균형을 맞추기 어렵다 |
실용적인 팁들
- 주요 색상 하나, 보조 색상 두 가지, 강조 색상 두 개. 우수한 사용자 인터페이스 색조 페일릿은 60/30/10 비율을 따릅니다. 즉, 화면의 3분의 2를 주요 색상으로, 3분의 1을 보조 색상으로, 나머지 소수 부분을 강조 색상으로 사용하는 것입니다.
-
- 대비 조합을 한 쌍씩 확인하세요. 조화로 보이는 색조 템플릿이라도 배경 위의 텍스트가 읽기 어려운 경우가 있을 수 있으므로, 배포할 모든 조합을 반드시 테스트해 보세요.
- 선택한 색상을 확정하세요. 평균화하지 마세요. 두 색상 샘플 중 어느 하나도 마음에 들지 않는다면, 자신이 선호하는 색상을 확정하고 다시 도색하세요. 평균값을 산출해 타협하지 마세요. 인간의 시각은 조화를 인식하지만 평균값은 그렇지 않습니다.
업계에서 사용하는 주요 도구들
디자이너들은 수년에 걸쳐 다양한 색상 휠을 선호해 왔습니다. RYB 휠(빨간색, 노란색, 파란색)은 교육 현장에서 표준으로 사용되고 있습니다. 컴퓨터 환경에서는 HSL이 단순화된 추상 표현 방식으로 활용되며, OKLCH는 지각적 일관성을 확보하기 위한 최신 기준으로, 접근 가능한 색상 체계를 다루는 경우 반드시 익혀야 할 방법입니다.
자주 묻는 질문
고정된 포화도와 밝기 값은 색조에 관계없이 시각적으로 유사한 색표를 생성하기 때문이다. 팔레트 내의 색표들 간의 밝기(연한 색, 중간 밝기 색, 짙은 색)를 다양하게 조절하면 팔레트의 활용성이 즉시 향상된다.
유사하고 단색적인 디자인은 거의 우연히도 조화를 이루는 느낌을 준다. 삼원조 및 사원조는 디자인에 대한 신뢰감을 높여주지만, 실행이 부실하면 쉽게 혼란스러워 보일 수 있다.
네 — 헥스 코드를 쉼표로 구분된 목록, CSS 사용자 정의 속성 블록 또는 JSON 배열 형태로 복사하세요. 디자인 도구가 지원하는 형식을 선택하세요.
각 샘플에 대해 흰색과 검은색과의 대비가 표시되어 있어, 어떤 색상 조합이 텍스트에 적합한지 한눈에 확인할 수 있습니다. WCAG의 쌍별 대비 기준은 출시 전 반드시 확인해야 합니다.