컬러 코드 변환기

HEX·RGB·HSL·OKLCH·LAB 등 색 코드를 한 번에 서로 바꾸고, SwiftUI·Android·Flutter 코드와 명도 단계, 글자 대비까지 보여줘요.

≈ mediumslateblue

화면 스포이트는 Chrome/Edge에서만 지원돼요 (Safari/Firefox 미지원)

불투명도100%

색 코드

옛 문법 (쉼표, rgba)

눌러서 그 색으로 바꿔요. 색상·채도는 그대로 두고 OKLCH 밝기만 바꿨어요.

흰 배경에 이 색 글자4.47:1 큰 글자만

검은 배경에 이 색 글자4.7:1 AA

컬러 코드 변환기란?

HEX, RGB, HSL 같은 색 표기를 서로 바꿔 주는 도구예요.

사용 방법

색 코드를 입력하거나 색을 고릅니다.

원하는 표기를 확인합니다.

복사해 CSS나 디자인 도구에 붙여 넣습니다.

사용 팁

투명도가 필요하면 8자리 HEX 또는 rgba() 값을 쓰세요.

자주 묻는 질문

어떤 형식의 색 코드를 입력할 수 있나요?

HEX(#6366F1), rgb(), hsl(), hwb(), oklch(), lab(), lch(), 색 이름(tomato), 숫자만(99, 102, 241)을 읽어요. 읽을 수 없는 값이면 입력창 테두리가 빨갛게 바뀌고 안내 문구가 나와요.

투명도가 있는 색은 어떻게 바꾸나요?

불투명도 슬라이더를 움직이면 100% 미만일 때 HEX는 8자리(#RRGGBBAA), RGB와 HSL은 알파값이 붙은 형태로 나와요. '옛 문법' 체크를 켜면 rgba(99, 102, 241, 0.5)처럼 쉼표 방식으로 바뀌어요.

SwiftUI나 Android 코드로도 복사할 수 있나요?

네. 아래 '개발 코드'에 CSS 변수, Tailwind, SwiftUI, UIKit, Android(<color>), Flutter용 코드가 만들어져요. 줄을 누르면 복사돼요. 같은 색의 명도 11단계와 흰색·검은색 배경 대비비도 함께 보여줘요.