컬러 팔레트 생성기
스페이스 바로 새 팔레트를, 마음에 드는 색은 고정해서.
또는 스페이스 바
- rgb(237, 221, 187)hsl(41, 58%, 83%)
- 흰 글자
- 1.34:1AAAAA
- 검은 글자
- 15.66:1AAAAA
- rgb(143, 173, 255)hsl(224, 100%, 78%)
- 흰 글자
- 2.19:1AAAAA
- 검은 글자
- 9.59:1AAAAA
- rgb(92, 123, 230)hsl(227, 73%, 63%)
- 흰 글자
- 3.87:1AAAAA
- 검은 글자
- 5.43:1AAAAA
- rgb(59, 91, 219)hsl(228, 69%, 55%)
- 흰 글자
- 5.67:1AAAAA
- 검은 글자
- 3.71:1AAAAA
- rgb(60, 52, 31)hsl(43, 32%, 18%)
- 흰 글자
- 12.33:1AAAAA
- 검은 글자
- 1.70:1AAAAA
어떤 데이터도 기기 밖으로 나가지 않습니다
이 도구는 브라우저 안에서만 작동합니다. 여기서 입력하거나 연주하거나 녹음한 내용은 기기에만 남고, 서버로 전송되거나 저장되지 않습니다.
사용 방법
- 생성하기 버튼이나 스페이스 바를 누르면 새 팔레트가 나옵니다. 기준 색을 입력하고 보색, 삼각 배색 같은 규칙을 고를 수도 있습니다.
- 마음에 드는 색은 고정하세요. 다음 팔레트는 그 색을 그대로 두고 나머지를 어울리게 만듭니다. 색을 클릭하면 헥스 코드가 복사됩니다.
- 대비 배지와 색각 미리보기로 확인한 뒤 CSS 변수를 복사하거나 PNG, SVG로 내려받습니다.
자주 묻는 질문
- 배색 규칙에는 어떤 것이 있나요?
- 색상환에서 나온 규칙입니다. 유사색은 이웃한 색(±30°), 보색은 정반대 색, 분할 보색은 보색 양옆의 두 색, 삼각 배색은 120°씩 떨어진 세 색, 사각 배색은 90°씩 떨어진 네 색, 단색은 한 색의 밝고 어두운 단계, 파스텔은 색상환 전체의 부드럽고 밝은 색입니다.
- 색이 고르게 어울려 보이는 이유는요?
- 눈에 보이는 밝기에 맞춘 색 공간인 OKLCH에서 계산하기 때문에 밝기 단계가 고르게 느껴집니다. 화면에 표현할 수 없는 색은 표현할 수 있을 때까지 채도를 낮춥니다.
- 대비 배지는 무슨 뜻인가요?
- 각 색 위에 흰 글자와 검은 글자를 올렸을 때의 WCAG 명암비입니다. 일반 글자는 AA 기준 4.5, AAA 기준 7 이상이어야 합니다. 색 위의 글자는 더 잘 읽히는 쪽 색으로 표시됩니다.
- 사진에서 색 조합을 뽑을 수도 있나요?
- 네. ‘이미지에서 색 뽑기’ 도구가 사진의 주요 색을 골라 줍니다. 이 도구는 새로운 색 조합을 만듭니다.
- 업로드되는 것이 있나요?
- 아니요. 팔레트는 브라우저 안에서 만들어지고, 공유 링크에는 색 값만 담깁니다.