색상 팔레트 생성기
SeriousCode 색상 팔레트 생성기는 6가지 모드(보색, 유사색, 3색 조화, 분할 보색, 4색 조화, 단색 조화)로 조화로운 컬러 조합을 만듭니다. 각 팔레트에는 9단계 명도 스케일, WCAG 대비 체크, CSS 커스텀 프로퍼티/SCSS 변수/Tailwind 설정/JSON 내보내기가 포함됩니다.
팔레트 색상
명도 & 채도 단계
대비 체커
대비율: 3.64:1
WCAG 등급: AA Large
큰 텍스트 (18px+)
보통 텍스트 (16px) — The quick brown fox jumps over the lazy dog.
작은 텍스트 (12px) — 0123456789 ABCDEF abcdef
내보내기
:root {
--color-1: #3c83f6;
--color-1-100: #e7f0fe;
--color-1-200: #b1cefb;
--color-1-300: #7bacf9;
--color-1-400: #4186f6;
--color-1-500: #0b64f4;
--color-1-600: #094ebe;
--color-1-700: #063888;
--color-1-800: #04204e;
--color-1-900: #010a18;
--color-2: #f6af3c;
--color-2-100: #fef5e7;
--color-2-200: #fbdfb1;
--color-2-300: #f9c97b;
--color-2-400: #f6b141;
--color-2-500: #f49b0b;
--color-2-600: #be7909;
--color-2-700: #885706;
--color-2-800: #4e3104;
--color-2-900: #180f01;
}제안이 있으신가요?
새로운 도구를 요청하거나 개선 사항을 제안해 주세요 — Slack 커뮤니티에 참여하세요!
색상 팔레트 생성기란?
색상 팔레트 생성기는 색채 이론 원리를 기반으로 조화로운 색상 조합을 만드는 도구입니다. 색상환을 사용하여 기본 색상에서 보색, 유사색, 3색 조화 등의 하모니 관계를 계산합니다. 각 색상의 완전한 명도 스케일을 생성하고, WCAG 접근성 대비율을 확인하며, CSS 커스텀 프로퍼티, SCSS 변수, Tailwind CSS 설정 등 개발자 친화적 형식으로 팔레트를 내보낼 수 있습니다.
색상 팔레트 생성기 사용법
- 색상 선택기를 사용하거나 HEX 값을 직접 입력하여 기본 색상을 선택하세요
- 하모니 모드를 선택하세요: 보색, 유사색, 3색 조화, 분할 보색, 4색 조화, 또는 단색 조화
- 모든 하모니 색상과 명도 스케일이 포함된 생성된 팔레트를 확인하세요
- 대비 체커를 사용하여 WCAG AA/AAA 기준에 따른 텍스트 가독성을 확인하세요
- 색상 견본을 클릭하면 HEX 값이 클립보드에 복사됩니다
- 프로젝트에 사용할 전체 팔레트를 CSS, SCSS, Tailwind 설정, 또는 JSON으로 내보내세요
자주 묻는 질문
어떤 색상 하모니 모드를 사용할 수 있나요?
6가지 모드를 사용할 수 있습니다: 보색(색상환 반대편), 유사색(인접한 색상), 3색 조화(균등 간격의 세 색), 분할 보색(기본색 + 보색 양옆 두 색), 4색 조화(직사각형을 이루는 네 색), 단색 조화(하나의 색조에서 밝기 변화).
WCAG 대비 체크란 무엇인가요?
WCAG(웹 콘텐츠 접근성 지침)는 읽기 쉬운 텍스트를 위한 최소 대비율을 정의합니다. AA 등급은 일반 텍스트 4.5:1, 큰 텍스트 3:1이 필요합니다. AAA는 일반 텍스트 7:1이 필요합니다. 이 도구는 팔레트의 모든 전경/배경 조합에 대한 대비율을 계산합니다.
어떤 내보내기 형식을 지원하나요?
CSS 커스텀 프로퍼티(var(--color-1)), SCSS 변수($color-1), Tailwind CSS 설정(tailwind.config.js에 붙여넣기 가능), 또는 일반 JSON으로 팔레트를 내보낼 수 있습니다. 각 형식에는 기본 색상과 모든 명도 단계가 포함됩니다.
명도 스케일은 어떻게 생성되나요?
팔레트의 각 색상은 매우 밝은(흰색 근처)에서 매우 어두운(검정 근처)까지 9단계 명도를 갖습니다. HSL 색상 공간에서 색조와 채도를 유지하면서 밝기 값을 변화시켜 생성됩니다. 디자인 시스템에 바로 사용할 수 있는 완전한 스케일을 제공합니다.
특정 HEX 색상을 시작점으로 사용할 수 있나요?
네! 색상 선택기를 사용하거나 입력 필드에 HEX 값을 직접 입력할 수 있습니다. 선택한 기본 색상과 하모니 모드에 따라 팔레트가 즉시 재생성됩니다. 영감을 위해 랜덤 버튼도 클릭할 수 있습니다.