색상 코드 일괄 변환기

색상 코드 목록이나 CSS 글을 붙여 넣으면 색만 골라 한꺼번에 바꿉니다

색상 코드 일괄 변환기는 붙여 넣은 글에서 색을 찾아 HEX, RGB, HSL, OKLCH 가운데 고른 형식으로 한꺼번에 바꾸는 도구입니다. 한 줄에 색 하나씩 적은 목록은 물론, CSS·SCSS 파일이나 디자인 토큰 JSON처럼 색 사이에 이름과 기호가 섞인 글도 그대로 넣을 수 있습니다. 위 예시를 RGB로 바꾸면 변수 --brand의 값 #3498DB는 rgb(52, 152, 219)로, 투명도가 있는 #00000080은 rgba(0, 0, 0, 0.5)로 바뀝니다. 결과를 '원문 그대로'로 두면 변수 이름·주석·들여쓰기는 남기고 색 값만 바꾸고, '값만 한 줄씩'으로 바꾸면 찾은 색의 값만 목록으로 적습니다.

입력 칸에서는 줄마다 왼쪽에 찾은 색의 견본이 붙고, 읽지 못한 줄에는 느낌표가 붙습니다. 위쪽 팔레트 띠에서 찾은 색 전체를 한눈에 보고, 아래 색 카드에서는 한 색의 HEX·RGB·HSL·OKLCH 값을 함께 확인하고 누르면 바로 복사할 수 있습니다. 정렬을 색상 순이나 밝은 순으로 바꾸거나 같은 색 합치기를 켜면, 팔레트의 견본이 새 자리로 움직이며 겹친 색과 비슷한 색이 드러납니다. 입력한 글과 파일은 서버로 보내지 않고 이 브라우저에서만 처리합니다.

색상 코드를 한꺼번에 바꿔야 하는 경우

• Tailwind CSS v4 색을 HEX로 옮길 때: Tailwind CSS v4는 기본 색 팔레트를 oklch() 값으로 정의합니다. 이메일 템플릿, 문서, 오래된 디자인 도구처럼 HEX나 RGB만 받는 곳에 같은 색을 써야 한다면 테마 변수 줄을 통째로 붙여 넣고 HEX로 바꾸면 됩니다.
• 디자인 시안의 색상표를 코드로 넘길 때: 디자이너가 HEX 목록으로 준 브랜드 색을 개발 쪽에서 rgb()나 hsl()로 쓰거나, 반대로 코드의 rgb() 값을 시안 도구에 HEX로 넣어야 할 때가 있습니다. 이름이 붙은 줄은 이름을 지키므로 색이 어느 변수의 값인지 헷갈리지 않습니다.
• 오래된 CSS를 OKLCH로 바꿀 때: OKLCH는 밝기·채도·색상각으로 색을 적기 때문에 같은 밝기의 색을 맞추거나 단계별 색을 만들기 쉽습니다. CSS 파일을 붙여 넣고 OKLCH로 바꾸면 선택자와 속성은 그대로 두고 값만 새 표기로 바뀝니다.
• 흩어진 색을 정리할 때: 여러 사람이 고친 스타일시트에는 #3498db와 #3498DB, rgb(52, 152, 219)처럼 표기만 다른 같은 색이 섞여 있기 쉽습니다. 같은 색 합치기를 켜면 몇 번 나왔는지와 어느 줄에 있었는지 보이고, 색상 순으로 정렬하면 거의 같은 색이 나란히 놓여 통합할 후보를 고르기 쉽습니다.
• 스프레드시트의 R·G·B 세 열을 바꿀 때: 표에서 R·G·B 세 칸을 복사해 붙여 넣으면 한 줄에 탭으로 나뉜 숫자 세 개가 들어옵니다. 이 줄도 색으로 읽으므로 그대로 HEX 목록을 만들 수 있습니다.

색을 찾는 규칙

1. 줄 전체가 값 하나인 경우: #이 붙은 HEX(3·4·6·8자리), rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(), CSS 이름 색(tomato, rebeccapurple 등 148개)을 읽습니다. 글 전체가 한 줄에 하나씩 적은 목록이면(중괄호·대괄호·콜론·등호·세미콜론이 없으면) '#' 없는 HEX와 R·G·B도 받습니다. '#' 없는 HEX는 3·6자리를 받고, 8자리는 a~f 글자가 하나라도 있을 때만 받습니다. 20241020처럼 숫자만 있는 8자리는 날짜일 수 있어서 색으로 보지 않습니다. 12, 34, 56이나 탭으로 나뉜 정수 세 개는 R·G·B로 읽습니다.
2. 글 속에 섞인 경우: 줄 안에서 #으로 시작하는 HEX와 색 함수를 모두 찾습니다. border: 1px solid #ddd;처럼 다른 값과 함께 있어도 색 부분만 바꾸고, 한 줄에 색이 둘 이상이면 각각 바꿉니다. 이름 색은 "danger": "crimson"처럼 따옴표 안에 이름만 있거나, border: 1px solid red !important;처럼 값 안에 낱말로 있을 때 바꿉니다. 주석 속 낱말, JSON 키, .red-button처럼 다른 낱말의 일부는 바꾸지 않습니다.
3. 값 자리만 바꿈: #add, #bad, #face처럼 HEX 글자로만 된 ID 선택자는 색과 모양이 같습니다. 그래서 중괄호가 있는 글(CSS·SCSS·JSON·설정 파일)에서는 값 자리의 #값만 바꿉니다. 앞쪽의 가장 가까운 {, }, ; 뒤에 콜론(:)이나 등호(=)가 있어야 값 자리로 보고, 콜론 없이 {로 이어지는 선택자·@media 머리와 url(#…) 안의 값은 그대로 둡니다. a:hover #add { color: #fff; }에서는 #fff만 바뀝니다.
4. 이름 붙이기: --brand: …, $brand: …, "brand": …, brand = …처럼 줄 앞에 이름이 있으면 색 카드와 표에 그 이름을 적습니다. color·background·border 같은 CSS 속성 이름은 색의 이름이 아니므로 적지 않습니다.
5. 읽지 못한 줄: 자리 수가 맞지 않는 HEX(#12345), 범위를 넘는 R·G·B 숫자(256, 0, 0), 괄호 안 값의 개수나 단위가 틀린 함수는 오류로 표시하고 결과에서는 원문을 그대로 둡니다. 글 전체가 목록일 때는 코드 기호가 없는 짧은 한두 낱말 줄도 잘못 적은 값으로 표시합니다. CSS·JSON처럼 코드가 섞인 글에서는 @import 줄, 주석, margin: 0;처럼 색이 없는 줄을 오류로 보지 않고 그냥 지나갑니다.

형식마다 적는 방식

RGB와 HSL은 쉼표로 나누는 옛 표기로 적습니다. 요즘 CSS는 rgb(52 152 219)처럼 띄어 쓰는 표기도 읽지만, 쉼표 표기는 오래된 브라우저와 대부분의 디자인 도구도 읽기 때문입니다. 끝자리 0은 지워서 hsl(32, 100%, 50%)처럼 적습니다.

HSL과 OKLCH는 정수로 반올림하지 않습니다. 정수로 적으면 원래와 다른 색으로 돌아오는 경우가 많기 때문입니다. 예를 들어 #3498DB를 hsl(204, 70%, 53%)로 적었다가 다시 읽으면 #3398DB가 됩니다. 위 표의 자릿수로 적으면 8비트 sRGB 색 16,777,216개가 모두 다시 읽었을 때 처음과 같은 HEX로 돌아옵니다. OKLCH의 C를 넷째 자리까지만 적으면 표본 140,608색 가운데 94색이 한 단계 어긋나서 다섯째 자리까지 적습니다.

예시: 첫 화면의 열 줄을 RGB로 바꾸면

이 예시에서 찾은 색은 9개이고, 2줄과 9줄이 같은 색이라 서로 다른 색은 8개입니다. 같은 색 합치기를 켜면 팔레트와 색 카드에 #3498DB가 한 번만 남고 ×2와 줄 번호 2, 9가 붙습니다. 결과를 '값만 한 줄씩'으로 바꾸면 주석 줄과 변수 이름 없이 rgb() 값 9개(합치면 8개)만 남습니다.

sRGB 밖 색은 가장 가까운 색으로 맞춥니다

HEX와 RGB는 sRGB 색 공간의 값만 적을 수 있습니다. OKLCH, lab(), color(display-p3 …)로 적은 색은 sRGB보다 넓은 범위를 담을 수 있어서, 아주 선명한 색은 HEX로 그대로 옮길 수 없습니다. 이 도구는 이런 색을 HEX·RGB·HSL로 낼 때 W3C CSS Color 4의 색역 맞춤 방법을 따릅니다. OKLCH에서 밝기와 색상각은 그대로 두고 채도만 이분 탐색으로 줄이다가, sRGB 끝값으로 자른 색과의 차이(deltaEOK)가 눈으로 거의 구분되지 않는 0.02보다 작아지면 멈춥니다. 단순히 각 채널을 0~255로 자르는 방법보다 색상각이 덜 틀어집니다.

sRGB 밖 색은 색 카드에 'sRGB 밖' 표시가 붙고, 견본 위쪽에는 원래 색을, 아래쪽에는 맞춘 색을 칠합니다. 넓은 색역을 지원하는 화면이라면 위쪽이 더 선명하게 보입니다. OKLCH로 바꿀 때는 맞추지 않고 원래 값을 그대로 적으므로, 넓은 색역의 색을 잃지 않으려면 OKLCH 결과를 쓰고 HEX는 sRGB 화면용 대체 값으로 두는 방법이 안전합니다.

투명도는 8자리 HEX와 rgba()로 옮깁니다

8자리 HEX의 마지막 두 자리와 4자리 HEX의 마지막 한 자리는 알파(불투명도) 값입니다. 00이면 완전히 투명하고 FF면 불투명합니다. 이 도구는 알파 값을 0~255 단계로 맞춘 뒤, CSS Color 4가 정한 대로 rgba()·hsla()·oklch()에 적을 숫자를 고릅니다. 2.55배해 반올림하면 그 단계가 되는 0~100 정수가 있으면 그 수를 100으로 나눠 적고, 없으면 소수 셋째 자리까지 적습니다. 그래서 80(128단계)은 0.50196…이 아니라 0.5로 적힙니다.

자주 틀리는 경우

• 3자리 HEX의 앞을 0으로 채우는 경우: #f80은 #000F80이 아니라 한 자리씩 두 번 써서 #FF8800입니다. 4자리 #f808도 같은 방식으로 #FF880088이 됩니다.
• HSL을 정수로 줄이는 경우: 위에서 본 것처럼 hsl(204, 70%, 53%)은 #3498DB가 아니라 #3398DB입니다. 다른 도구의 정수 HSL 값을 그대로 옮겨 적었다면 HEX가 한두 단계 다를 수 있습니다.
• 범위를 넘은 rgb() 값: CSS는 rgb(300, 0, 0)을 잘못된 값으로 보지 않고 255로 잘라 rgb(255, 0, 0)으로 그립니다. 이 도구도 같은 방식으로 바꾸되 색 카드에 '범위 밖'을 표시합니다. 쉼표로 적은 숫자 세 개(256, 0, 0)는 CSS 문법이 아니므로 잘라 내지 않고 오류로 봅니다.
• '#' 없는 숫자: 2024처럼 숫자만 있는 4자리나 8자리는 색으로 읽지 않습니다. 4자리 HEX를 쓰려면 #2024처럼 #을 붙이세요. '#' 없는 HEX는 목록에서만 읽으므로 JSON 글 속 640 같은 숫자도 색으로 바뀌지 않습니다.
• 단어 속 이름 색: .red-button이나 /* blue */ 안의 red, blue는 바꾸지 않습니다. 이름 색은 줄 전체이거나 값 자리의 낱말일 때만 바꿉니다.
• 오류 줄을 빼고 붙여 넣는 경우: '값만 한 줄씩' 결과에는 읽지 못한 줄이 빠지므로 원래 표의 행과 개수가 달라집니다. 행을 맞춰야 한다면 상태 줄의 줄 번호를 보고 먼저 고치거나 '원문 그대로'를 쓰세요.

한계와 주의

• 한 번에 100,000자, 색 1,000개까지 바꿉니다. 더 큰 파일은 나누어 넣어 주세요. 파일 열기는 UTF-8 글 파일만 읽습니다.
• var(--brand)와 color-mix()는 다른 값을 계산해야 정해지는 색이라 그대로 둡니다. color-mix() 안에 직접 적은 #fff 같은 색은 각각 바꾸고, rgb(from …) 같은 상대 색이나 색 함수 안에 var()·calc()가 든 값은 읽지 못한 값으로 표시합니다. currentColor·inherit 같은 키워드도 그대로 둡니다.
• color()는 srgb, srgb-linear, display-p3, xyz(xyz-d65·xyz-d50) 색 공간만 읽습니다. a98-rgb, prophoto-rgb, rec2020은 오류로 표시합니다.
• HEX·RGB·HSL 값은 8비트(0~255) sRGB로 반올림한 색입니다. 같은 HEX라도 화면의 색 설정과 밝기에 따라 다르게 보일 수 있습니다.
• sRGB 밖 색을 맞춘 HEX는 CSS Color 4의 방법으로 계산한 값입니다. 브라우저가 넓은 색역 화면에 그 색을 그리는 방식이나 다른 도구가 자르는 방식과는 한두 단계 다를 수 있습니다.
• 인쇄용 CMYK나 ICC 프로파일은 다루지 않습니다. 인쇄할 색은 RGB CMYK 변환기를, 색 하나를 자세히 볼 때는 HEX to RGB 변환기를 쓰세요.
• HEX 결과는 대문자로 통일합니다. 엑셀 파일의 견본 칸은 투명도 없이 칠하고, 알파 값은 메모 칸에 적습니다. CSV는 =, +, -, @로 시작하는 칸 앞에 작은따옴표(')를 붙여 수식으로 실행되지 않게 하므로 --brand 같은 이름이 '--brand로 적힙니다. 이름을 그대로 남기려면 엑셀 파일을 쓰세요.

이 글의 표 값은 2026-10-20에 이 도구로 계산한 값입니다. 변환 식과 색역 맞춤은 W3C CSS Color 4 후보 권고안 초안(2026년 10월 9일 판)을 따르며 해마다 바뀌는 규칙이 아닙니다. Tailwind 색 값은 같은 날 Tailwind CSS 문서에서 확인한 값이라 Tailwind가 팔레트를 바꾸면 달라질 수 있습니다.

출처

• 01W3C — CSS Color Module Level 4§5.1 범위 밖 rgb() 값은 끝값으로 자름, §5.2 HEX 3·4·6·8자리, §6.1 이름 색 148개, §9.4 oklch() 백분율 기준, §14.2.2 색역 맞춤(JND 0.02), §16.1.1 투명도 직렬화
• 02MDN — <hex-color>#RGB, #RGBA, #RRGGBB, #RRGGBBAA 네 가지 표기, 한 자리 값은 두 번 반복
• 03MDN — oklch()밝기·채도·색상각과 투명도를 적는 법, 상대 색 문법
• 04Tailwind CSS — Tailwind CSS v4.0넓은 색역 화면에 맞춘 새 P3 색 팔레트
• 05Tailwind CSS — Colors기본 색을 oklch() 테마 변수로 정의, red-500 oklch(63.7% 0.237 25.331) 등
• 06Björn Ottosson — A perceptual color space for image processingOklab 색 공간의 설계 목적과 변환 식

자주 묻는 질문

함께 쓰는 도구