컬러 변환기 / 그라데이션 생성기

컬러 변환기 / 그라데이션 생성기

웹디자인이나 퍼블리싱 작업을 하다 보면 HEX, RGB, HSL 같은 색상 코드를 서로 변환해야 할 때가 많습니다. 아래 컬러 변환기는 색상 값을 입력하면 HEX, RGB, RGBA, HSL, HSLA, CSS 변수 형식으로 바로 바꿔주고, 색상 대비와 그라데이션 코드까지 확인할 수 있도록 만든 도구입니다.

디자인 시안에서 받은 컬러를 CSS 코드로 바꾸거나, 투명도를 적용한 색상 값을 만들 때 빠르게 사용할 수 있습니다. 그라데이션 생성 기능을 함께 제공하므로 버튼, 배경, 카드 UI 등에 사용할 CSS 코드를 간단히 만들 수 있습니다.

사용 방법

1. HEX, RGB, HSL 형식의 색상 값을 입력하거나 컬러 피커에서 색상을 선택합니다.
2. 투명도 슬라이더를 조절하면 RGBA, HSLA, HEX Alpha 값이 함께 바뀝니다.
3. 필요한 색상 코드 옆의 복사 버튼을 눌러 CSS에 붙여넣습니다.
4. 그라데이션 유형, 각도, 색상, 위치 값을 조정해 원하는 배경을 만듭니다.
5. CSS 코드 영역에서 완성된 그라데이션 코드를 복사해 사용합니다.

색상 코드 차이

HEX는 웹에서 가장 많이 쓰이는 16진수 색상 표기 방식입니다. RGB는 빨강, 초록, 파랑 값을 숫자로 표현하며, RGBA는 여기에 투명도 값을 추가한 형식입니다. HSL은 색상, 채도, 밝기를 기준으로 표현하기 때문에 색을 조금 더 밝게 하거나 채도를 조절할 때 직관적으로 사용할 수 있습니다.

컬러 변환기 · 그라데이션 생성기

HEX/RGB/HSL 변환 · Alpha(투명도) · 대비비율 · CSS 코드/변수 · 선형/원형 그라데이션 생성

컬러 입력

색상

HEX(#RRGGBB/#RRGGBBAA), RGB, HSL 모두 입력 가능

컬러 피커

#5B4BFF

투명도

100%

RGBA/HSLA, #RRGGBBAA 반영

 

변환 결과

HEX

#5B4BFF

HEX (Alpha)

#5B4BFFFF

RGB

rgb(91, 75, 255)

RGBA

rgba(91, 75, 255, 1)

HSL

hsl(248, 100%, 65%)

HSLA

hsla(248, 100%, 65%, 1)

CSS 변수

--kk-color: #5B4BFF;

대비(가독성)

흰색(#fff)

-

검정(#000)

-

WCAG 대비비율(예: 4.5 이상 권장)

그라데이션 생성

Preview linear

유형

선형(linear-gradient) 원형(radial-gradient)

각도

135°

색상 1

%

위치(Stop)

색상 2

%

위치(Stop)

3번째 색

사용 %

반복

repeating background-image

반복은 패턴형 그라데이션

CSS 코드

 

컬러 변환기를 활용하면 좋은 경우

디자인 툴에서 받은 HEX 색상을 CSS의 rgba 값으로 바꾸거나, 기존 RGB 색상을 HSL로 변환해 밝기와 채도를 조절할 때 유용합니다. CSS 변수를 함께 복사할 수 있어 디자인 시스템이나 공통 스타일 파일에 색상을 정리할 때도 편합니다.

대비비율은 텍스트 가독성을 확인할 때 참고할 수 있습니다. 배경색 위에 흰색 또는 검정 텍스트를 올렸을 때 어느 쪽이 더 읽기 좋은지 확인하면 버튼, 배너, 카드 UI를 만들 때 도움이 됩니다.

그라데이션은 색상 조합과 각도에 따라 분위기가 크게 달라집니다. 너무 강한 색 조합은 텍스트 가독성을 떨어뜨릴 수 있으므로, 실제 적용 전에는 배경 위에 들어갈 글자와 버튼까지 함께 확인하는 것이 좋습니다.