본문으로 건너뛰기
도구탐험대

색상 코드 변환기

HEX, RGB, HSL 색상 코드를 서로 변환하고 명도 단계 팔레트를 만들어요.

#이미지#개발#변환
서버 전송 없이 브라우저에서 처리IMG-017

색상 코드 변환기란?

웹 디자인과 개발에서 쓰이는 HEX(#1b2433), RGB, HSL 색상 표기를 서로 변환합니다. 컬러 피커로 색을 고르거나 코드를 입력하면 모든 형식의 값과 함께 밝기 단계별 팔레트, 흰색/검정 배경 대비 가독성(명암비)까지 확인할 수 있습니다.

사용법

  1. 1

    컬러 피커로 색을 고르거나, 입력창에 HEX·RGB·HSL 값 중 하나를 입력하세요.

  2. 2

    변환된 모든 형식의 코드를 복사해 사용하세요.

  3. 3

    아래 팔레트에서 같은 색상의 밝기 단계를 클릭하면 해당 색으로 바뀝니다.

활용 예시

디자인 시안 → CSS

디자인 툴의 HEX 값을 rgb()나 hsl()로 변환해 투명도 조절에 활용합니다.

버튼 색 접근성 점검

흰 글자와의 명암비가 4.5:1 이상인지 확인해 읽기 쉬운 버튼 색을 고릅니다.

자주 묻는 질문

어떤 형식을 입력할 수 있나요?+

#abc, #aabbcc, rgb(10, 20, 30), hsl(210, 50%, 40%) 형식을 인식합니다.

도구 검색

이름, 설명, 키워드, 초성으로 도구를 찾아보세요