색상 팔레트 생성기
브라우저에서 로컬로 실행잠글 수 있는 배색 팔레트, OKLCH 톤 스케일, 디자인 토큰 만들기
알파 HEX, RGB, HSL, OKLCH 및 CSS 색 이름을 지원합니다.
팔레트 색상
채도를 줄여 sRGB에 맞췄습니다.
검사기 및 토큰
검사
색상 1
- HEX
- #6366F1
- RGB
- rgb(99 102 241)
- HSL
- hsl(238.732 83.529% 66.667%)
- OKLCH
- oklch(58.54% 0.2041 277.117)
밝은 변형
#767FF5#8B96F8#A1ADFA#B9C2FC#D1D8FD
어두운 변형
#5154C6#40439D#303376#202351#12142E
대비
비율은 색 조합을 설명하며 페이지 인증이 아닙니다. 일반 텍스트 AA 4.5:1, AAA 7:1. 투명 색은 배경과 합성합니다.
| 전경색 \ 배경색 | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
1 #6366F1 | 1.00 실패 | 1.18 실패 | 1.23 실패 | 1.42 실패 | 1.49 실패 |
2 #3C69C0 | 1.18 실패 | 1.00 실패 | 1.45 실패 | 1.20 실패 | 1.76 실패 |
3 #8F72EA | 1.23 실패 | 1.45 실패 | 1.00 실패 | 1.74 실패 | 1.22 실패 |
4 #0063A3 | 1.42 실패 | 1.20 실패 | 1.74 실패 | 1.00 실패 | 2.11 실패 |
5 #B27FE0 | 1.49 실패 | 1.76 실패 | 1.22 실패 | 2.11 실패 | 1.00 실패 |
내보내기
내보낼 색상 수: 5 (일반 팔레트)
:root {
--primary-1: #6366F1;
--primary-2: #3C69C0;
--primary-3: #8F72EA;
--primary-4: #0063A3;
--primary-5: #B27FE0;
}가져오기
CSS/SCSS, Tailwind v3 JSON 설정, JSON 토큰, 배열 또는 쉼표/줄 구분 색상을 붙여넣으세요. 11개 톤은 밝은 순서여야 합니다.
연동
그라디언트 선택: 0 / 6
원하는 순서로 2–6개 색상을 선택하세요. 자동으로 잘라내지 않습니다.
생성, 대비 및 내보내기는 로컬에서 실행됩니다. 색상을 업로드하지 않습니다.
색상 팔레트 생성기
편집하고 잠글 수 있는 색상 시스템을 OKLCH 톤과 실용적인 디자인 토큰으로 만드세요.
옵션
기준 색상 또는 무작위를 선택하고 색상을 편집한 뒤 유지할 색상을 잠그고 섞으세요. 배색은 지각적 색상 차이를 사용하며 수동 잠금으로 바꿀 수 있습니다. 톤 스케일은 일반 팔레트를 유지하고 50–950을 생성합니다. 기준 색상이 500과 일치할 필요는 없습니다. 밝고 어두운 변형, 네 형식과 대비를 검사한 뒤 다섯 토큰 형식으로 내보내세요.
대비
알파를 유지하며 불투명 배경 위에 배경과 전경을 순서대로 합성하여 대비를 계산합니다. 접근성 인증이 아닙니다. 11개 톤 가져오기는 밝기 내림차순이어야 합니다. 색상은 로컬에 유지되고 저장은 선택입니다. 2–6개를 선택해 현재 언어의 그라데이션으로 전달하세요. 초기화와 가져오기는 취소할 수 있습니다.
