색상 팔레트·그라데이션
랜덤 조화 팔레트와 CSS 그라데이션 코드를 만듭니다.
CSS 그라데이션
작업을 시작할 때 가장 막막한 순간이 "무슨 색으로 하지"입니다. 이럴 때는 처음부터 고민하기보다 몇 가지 조합을 눈으로 훑으면서 마음에 드는 방향을 찾는 편이 빠릅니다.
이 도구는 서로 어울리는 5색 팔레트를 무작위로 만들어 주고, 아래쪽에서는 두 색으로 CSS 그라데이션 코드를 뽑을 수 있게 되어 있습니다.
어떻게 계산되나요
랜덤 팔레트
랜덤 팔레트 생성 버튼을 누르면 5개의 색상 카드가 새로 만들어집니다. 마음에 드는 카드를 클릭하면 그 HEX 값이 클립보드로 복사됩니다. 원하는 조합이 나올 때까지 버튼을 여러 번 눌러 보세요.
색은 완전한 무작위가 아니라 규칙을 따릅니다. 색상환에서 기준 색조를 하나 뽑은 뒤, 그 근처(+25°, +50°)에서 세 색을, 반대편(+200°, +225°)에서 두 색을 가져옵니다. 앞쪽 세 색은 서로 자연스럽게 이어지는 유사색이 되고, 뒤쪽 두 색은 강조나 포인트로 쓰기 좋은 보색 계열이 됩니다. 채도와 명도도 카드마다 다르게 배분해, 배경·본문·강조로 역할을 나눠 쓸 수 있습니다.
CSS 그라데이션
아래 영역에서 시작색과 끝색을 고르고 각도 슬라이더(0~360°)를 움직이면, 미리보기와 함께 코드가 만들어집니다.
background: linear-gradient(120deg, #1a56db, #0e9f6e);각도는 그라데이션이 흐르는 방향입니다. 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 흐릅니다. CSS 복사 버튼으로 background: 선언 전체를 그대로 가져가 붙여 넣으면 됩니다.
색상이 강하게 대비되는 그라데이션 위에 글자를 올릴 때는 가독성이 떨어질 수 있으니, [색상 대비 검사](/tool/contrast)로 함께 확인해 보는 것을 권합니다.
용어 정리
- 팔레트
- 한 디자인에서 함께 쓰기로 정한 색들의 묶음.
- 유사색(Analogous)
- 색상환에서 서로 가까이 있는 색들. 함께 쓰면 차분하고 통일감이 있습니다.
- 보색
- 색상환에서 마주 보는 위치의 색. 강조나 포인트 색으로 자주 쓰입니다.
- linear-gradient
- CSS에서 직선 방향으로 색이 섞여 흐르게 만드는 배경 함수.
- 각도(deg)
- 그라데이션이 흐르는 방향. 0deg는 아래→위, 90deg는 왼쪽→오른쪽입니다.
- HEX
- 색을 `#RRGGBB` 형태의 16진수 여섯 자리로 적는 표기법.
자주 묻는 질문
만든 팔레트를 저장할 수 있나요?
따로 저장 기능은 없습니다. 마음에 드는 색이 나왔다면 카드를 눌러 HEX를 복사한 뒤 메모나 작업 파일에 옮겨 두세요. 새로 생성하면 이전 팔레트는 사라집니다.
원하는 색을 기준으로 팔레트를 만들 수 있나요?
현재는 기준 색을 지정하는 기능이 없어 매번 무작위 색조에서 출발합니다. 특정 색 계열이 필요하면 원하는 색조가 나올 때까지 다시 생성하거나, [색상 변환기](/tool/color-converter)에서 HSL의 색상(H)만 바꿔 가며 직접 조합하는 방법이 있습니다.
5개 색을 어떻게 배분해서 쓰면 좋나요?
정해진 규칙은 없지만, 가장 옅은 색을 배경, 진한 색을 글자와 제목, 반대 계열의 색을 버튼이나 링크 같은 강조 요소에 쓰는 식으로 나누면 정리가 쉽습니다. 강조색은 화면에서 차지하는 면적을 적게 유지하는 편이 보기 좋습니다.
그라데이션 색을 3개 이상 넣을 수 있나요?
이 도구는 두 색만 지원합니다. 색을 더 넣고 싶다면 만들어진 코드에 색을 추가하면 됩니다. 예를 들어 `linear-gradient(120deg, #1a56db, #7c3aed, #0e9f6e)`처럼 쉼표로 이어 쓰면 됩니다.
복사 버튼을 눌러도 붙여넣기가 안 됩니다
브라우저의 클립보드 접근이 차단된 환경일 수 있습니다. 이때는 코드 칸의 내용을 직접 선택해 복사하면 됩니다. 주소가 `https`가 아닌 환경에서도 클립보드 기능이 제한될 수 있습니다.
어떤 문제가 있었는지 알려주시면 빠르게 고치겠습니다. (회신이 필요하면 이메일을 남겨주세요)