색 조합·그라데이션 만들기

기준색 하나로 색 조합을 만들거나 무작위 팔레트를 뽑고, 그라데이션을 CSS 코드나 PNG 이미지로 저장합니다. 디자인, 발표 자료, 웹페이지에 쓸 색을 정할 때 씁니다.

사용 방법

1. '팔레트' 탭의 '기준색'에서 색을 고르고 '조합 방식'을 정합니다. 마음에 들면 '이 조합을 팔레트로 쓰기'를 누릅니다.
2. '무작위 생성 (스페이스바)'로 새 색을 만들고, 남길 색은 잠근 뒤 다시 생성합니다.
3. 'HEX 목록 복사', 'CSS 변수 복사', '이미지로 저장'으로 가져가고, 나중에 쓸 조합은 '팔레트 보관'을 누릅니다.
4. '그라데이션' 탭에서 '종류', '각도', '색 정지점'을 정하고 CSS 코드를 복사하거나 'PNG 저장'을 누릅니다.

계산 방식과 참고

• 조합은 HSL 색상환에서 색상을 돌려 만듭니다. 보색 180°, 유사색 ±30°, 삼각 120°, 분할 보색 150°와 210°, 사각 90°씩입니다.
• 대비 등급은 WCAG 2.2 기준입니다. AA는 4.5:1, AAA는 7:1, 큰 글자는 3:1 이상입니다.
• '색각 이상 시뮬레이션'은 Machado 외(2009) 모델에 따른 근사치입니다. 화면의 색만 바뀌고 복사·저장되는 값은 그대로입니다.
• 보관한 팔레트는 최대 40개까지 이 기기의 브라우저에 저장됩니다.

자주 묻는 질문

보색은 어떻게 찾나요?

색상환에서 정반대, 즉 180° 떨어진 색입니다. '조합 방식'을 '보색'으로 두면 바로 보이고, 견본을 누르면 HEX 값이 복사됩니다.

CSS 그라데이션 코드는 어떻게 만드나요?

'그라데이션' 탭에서 막대를 눌러 정지점을 넣고 색과 위치를 정하면 CSS 칸에 코드가 만들어집니다. 복사 버튼으로 가져갑니다.

그라데이션 중간색이 탁해 보여요.

'보간 색 공간'을 OKLCH로 바꾸면 중간색이 덜 탁해집니다. 이때 CSS에는 오래된 브라우저용 대체 줄도 함께 들어갑니다.

이 색 위의 글자가 잘 읽힐지 어떻게 알 수 있나요?

팔레트의 각 색에 흰색과 검은색 중 더 잘 읽히는 쪽의 대비비와 등급이 나옵니다. 대비비는 (L1 + 0.05) ÷ (L2 + 0.05)이고, L1과 L2는 밝은 색과 어두운 색의 상대 휘도입니다.