색상 도구
HEX·RGB·HSL 변환, 팔레트·그라디언트 생성, 명암 대비 검사까지 디자인 작업에 필요한 색상 도구를 브라우저에서 바로 사용할 수 있습니다.
자주 쓰는 색상 도구
HEX RGB 변환기 — 색상 코드 변환
HEX 색상 코드를 RGB 값으로 변환하고 HSL 값도 함께 확인합니다.
HEX HSL 변환기 — 색상 코드 변환
HEX 색상 코드를 HSL 색상 값으로 변환합니다.
랜덤 색상 생성기 — HEX 색상
무작위 HEX 색상과 RGB/HSL 값을 생성합니다.
색상 피커 — 색상·디자인 계산기
브라우저 색상 입력으로 HEX/RGB/HSL 값을 확인하는 브라우저 기반 색상·디자인 도구입니다.
RGB-CMYK 변환기 — 색상·디자인 계산기
RGB 색상을 인쇄용 CMYK 비율로 변환하는 브라우저 기반 색상·디자인 도구입니다.
팔레트 생성기 — 색상·디자인 계산기
기준 HEX 색상으로 조화 색상 팔레트를 생성하는 브라우저 기반 색상·디자인 도구입니다.
그라데이션 생성기 — 색상·디자인 계산기
두 HEX 색상을 CSS linear-gradient 값으로 조합하는 브라우저 기반 색상·디자인 도구입니다.
색상 혼합 계산기 — 색상·디자인 계산기
두 HEX 색상을 지정한 비율로 혼합하는 브라우저 기반 색상·디자인 도구입니다.
Tint/Shade 생성기 — 색상·디자인 계산기
HEX 색상의 밝은 tint와 어두운 shade 값을 생성하는 브라우저 기반 색상·디자인 도구입니다.
CSS named color lookup — 색상·디자인 계산기
CSS 색상 이름을 HEX/RGB 값으로 조회하는 브라우저 기반 색상·디자인 도구입니다.
Tailwind 색상 근사값 찾기 — 색상·디자인 계산기
HEX 색상과 가까운 Tailwind 기본 색상 토큰을 찾는 브라우저 기반 색상·디자인 도구입니다.
Opacity 색상 계산기 — 색상·디자인 계산기
HEX 색상과 투명도를 CSS rgba 값으로 변환하는 브라우저 기반 색상·디자인 도구입니다.
Box-shadow 생성기 — 색상·디자인 계산기
offset, blur, spread, 색상으로 CSS box-shadow를 생성하는 브라우저 기반 색상·디자인 도구입니다.
Border-radius preview — 색상·디자인 계산기
네 모서리 radius 값을 CSS border-radius로 정리하는 브라우저 기반 색상·디자인 도구입니다.
CSS clamp 생성기 — 색상·디자인 계산기
최소·선호·최대 값을 CSS clamp()로 조합하는 브라우저 기반 색상·디자인 도구입니다.
rem-px 변환기 — 색상·디자인 계산기
px와 rem 값을 기준 폰트 크기로 상호 변환하는 브라우저 기반 색상·디자인 도구입니다.
Aspect ratio 계산기 — 색상·디자인 계산기
가로·세로 값으로 CSS aspect-ratio와 축소 비율을 계산하는 브라우저 기반 색상·디자인 도구입니다.
Tailwind 색상 스케일 생성기 — 디자인 생성기
base color에서 50-950 스케일을 생성하는 브라우저 도구입니다.
팔레트 시각화 — 디자인 생성기
팔레트를 UI mockup에 적용해 보는 브라우저 도구입니다.
색상 이름 찾기 — 디자인 생성기
HEX에 가까운 색상 이름을 찾는 브라우저 도구입니다.
CSS 삼각형 생성기 — 디자인 생성기
border 기반 CSS 삼각형 코드를 생성하는 브라우저 도구입니다.
색상 대비 검사 — WCAG AA/AAA 체크
전경색과 배경색의 대비율을 계산하고 WCAG AA/AAA 통과 여부를 확인합니다.
이미지 팔레트 추출 — 브라우저 색상 분석
이미지에서 대표 HEX 색상 팔레트를 추출하는 색상·디자인 도구입니다. 입력값은 브라우저에서 처리됩니다.
색맹 시뮬레이터 — 브라우저 색상 분석
HEX 색상을 주요 색각 이상 유형으로 근사 변환하는 색상·디자인 도구입니다. 입력값은 브라우저에서 처리됩니다.
자주 묻는 질문
HEX와 RGB는 어떻게 변환하나요?
HEX 코드의 두 자리씩(RR·GG·BB)을 16진수에서 10진수로 바꾸면 RGB 값이 됩니다. 변환 도구가 양방향으로 즉시 계산합니다.
명암 대비는 어떤 기준으로 검사하나요?
WCAG 기준 대비율을 계산합니다. 일반 텍스트는 4.5:1, 큰 텍스트는 3:1 이상이 AA 통과 기준입니다.
팔레트·그라디언트 결과는 어떻게 쓰나요?
생성된 색상 코드와 CSS 스니펫을 복사해 디자인 도구나 스타일시트에 바로 붙여넣을 수 있습니다.
색상 값이 서버로 전송되나요?
아니요. 모든 색상 계산은 브라우저에서 처리되며 입력값을 서버로 보내지 않습니다.