🎨
무료 색상 선택기 및 팔레트 생성기
색상 선택, HEX/RGB/HSL 변환, 조화로운 팔레트 생성.
한 번 로드하면 오프라인에서도 작동
HEX
HSV
h217°
s76%
v96%
표시만RGB
r
g
b
HSL
H
S
L
더 많은 형식
HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)
WCAG 명암비
가장 가까운 색상 이름: dodgerblue · 여기서는 검은색 텍스트가 더 읽기 쉬워요 (5.71:1)
흰색 배경의 텍스트3.68:1AA 큰 글자
검은색 배경의 텍스트5.71:1AA
#ffffff 위의 텍스트3.68:1AA 큰 글자
음영 및 색조 (50–950)
색상 팔레트
유사색
#3b82f6
#f6af3c
삼각 배색
#3b82f6
#f63c83
#83f63c
유사
#3ce0f6
#3b82f6
#523cf6
단색
#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd
주요 용도
- 웹 디자인용 색상 선택기웹사이트용 색상 선택 및 생성 — HEX, RGB 및 HSL 값과 조화로운 팔레트 획득.
- 브랜딩용 색상 선택기브랜드 색상 팔레트 구축 — 함께 작동하는 기본, 보조 및 강조 색상 선택.
- 소셜 미디어용 색상 선택기소셜 미디어 게시물, 스토리 및 프로필 디자인용 눈에 띄는 색상 팔레트 생성.
- 인쇄 디자인용 색상 선택기인쇄 자료의 색상 선택 — 전단지, 명함, 브로셔 — 정확한 색상 미리보기 포함.
- 프레젠테이션용 색상 선택기슬라이드 색상 구성표 디자인 — 읽기 쉬운 텍스트 색상, 차트 팔레트 및 일관된 강조 음영 선택.
사용 방법
모든 작업은 직접 작성한 변환 수식으로 브라우저에서 직접 실행됩니다. 색상 라이브러리도, 서버 왕복도 없습니다. 브라우저 기본 색상 입력이나 EyeDropper API로 색을 고르면 도구가 즉시 6가지 형식으로 변환하고 WCAG 대비율을 계산하며 조화 팔레트를 생성합니다.
- 1기본 API로 색상 입력브라우저 내장 <input type="color"> 위젯으로 색을 고르거나, Chromium 기반 브라우저에서는 EyeDropper API로 화면의 아무 픽셀이나 추출할 수 있습니다. 두 경로 모두 유일한 기준값이 되는 16진 문자열을 반환합니다.
- 2직접 작성한 형식 변환도구는 외부 라이브러리 없이 자체 수학 함수로 16진 값을 RGB, HSL, HSV, CMYK, OKLCH로 변환합니다. OKLCH 변환은 sRGB 채널을 선형화하고 OKLab 세제곱근 행렬을 적용한 뒤 채도와 색조 각도를 도출하며, 최신 CSS Color Level 4 출력과 일치합니다.
- 3WCAG 대비율 계산상대 휘도는 WCAG 2.x 공식으로 선형화된 RGB 채널에서 계산합니다. 그런 다음 순백색과 순흑색에 대한 대비율을 계산하고 WCAG 기준(3:1, 4.5:1, 7:1)에 따라 AA-large, AA, AAA, Fail로 표시합니다.
- 4조화 팔레트 생성과 로컬 저장보색, 삼각, 유사색, 단색 견본은 HSL 색조와 명도 값을 수학적으로 회전하거나 단계적으로 바꿔 도출합니다. 저장한 팔레트는 브라우저의 localStorage에 기록되며 기기를 떠나지 않습니다.