색상 변환기

hex, rgb(), hsl() 어느 형식이든 붙여 넣으면 세 형식 전부와 디자인 시스템에 바로 쓸 틴트·셰이드 행을 만들어 줍니다. 설치도 가입도 필요 없습니다.

Color (hex, rgb() or hsl())

#0071e3

rgb(0, 113, 227)

hsl(210, 100%, 45%)

Not a color we can read. Try #0071e3, rgb(0, 113, 227) or hsl(211, 100%, 45%).

Tints & shades

The swatch row mixes the color with white (left) and black (right) at 20/40/60/80% — handy for hover states and dark-mode variants.

이 도구는 전부 브라우저 안에서 실행됩니다. 데이터는 기기를 떠나지 않으며 어떤 서버로도 업로드되지 않습니다.

사용 방법

1세 형식 중 아무거나 — hex, rgb(), hsl() — 색을 붙여 넣기.
2변환된 값을 읽고 필요한 형식을 복사하기.
3아래 스와치 행에서 틴트와 셰이드를 가져다 쓰기.

색상 변환기

#0071e3, rgb(0, 113, 227), hsl(211, 100%, 45%) 중 무엇을 넣어도 — 파서가 형식을 자동 감지해 hex, RGB, HSL을 동시에 출력하며 각각 클릭 한 번으로 복사됩니다.

값 아래에는 틴트·셰이드 행이 흰색과 검은색을 20/40/60/80% 단계로 섞어 보여 줍니다. 디자인 도구를 열지 않고도 호버 상태, 보더, 다크 모드 변형이 만들어집니다.

자주 묻는 질문

HSL은 RGB로 어떻게 변환되나요?

표준 원통형–RGB 매핑을 씁니다. 채도 c = (1 − |2L − 1|) × S, 색상 구간이 정하는 중간값 x, 그다음 각 채널에 m = L − c/2를 더합니다. 교과서 공식 그대로라 디자인 도구와 결과가 일치합니다.

색 코드가 유효하지 않다고 나오는 이유는?

받는 형식은 #RGB / #RRGGBB, rgb(r, g, b), hsl(h, s%, l%)입니다. 채널이 범위 안에 있어야 하고(RGB는 0–255, 색상은 0–360, 나머지는 0–100%) 각 부분은 쉼표나 공백으로 구분됩니다.

틴트와 셰이드는 어디에 쓰나요?

틴트(흰색 혼합)는 호버 배경, 배지, 카드에, 셰이드(검은색 혼합)는 눌림 상태, 보더, 다크 모드 표면에 씁니다. 브랜드 색 하나에서 둘 다 파생하면 모든 UI 상태가 시각적으로 일관됩니다.

관련 도구

생활 전체 도구 →

도구 삽입

한 줄로 사이트에 도구를 넣으세요. 방문자의 브라우저에서 실행됩니다.

<iframe src="https://zoyku.com/ko/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>

100% local processing

색상 변환기

사용 방법

색상 변환기

자주 묻는 질문

관련 도구

색상 피커

QR 코드 생성기

화면비 계산기

UUID 생성기

도구 삽입