RGB 색상 변환기
색 하나를 넣으면 RGB, HEX, HSL 등 모든 색상 코드와 밝기 조절, 배색을 한 번에 보여 줍니다.
밝기 조절
막대를 움직여 흰색이나 검은색을 섞습니다. 색 칸을 클릭하면 HEX가 복사됩니다.
배색
색상환에서 각도를 돌린 색입니다. 클릭하면 HEX가 복사됩니다.
입력한 내용은 이 브라우저에서만 처리됩니다.
RGB 색상 변환기
RGB 색상 변환기는 색 하나를 HEX, RGB, HSL, HSB, CMYK, OKLCH와 Android, iOS, Flutter, React Native 코드로 한 번에 바꾸는 도구입니다. 밝기 조절과 배색도 함께 보여 주고, 모든 계산은 브라우저 안에서 합니다.
화면의 색은 빨강(R), 초록(G), 파랑(B) 빛을 섞어 만듭니다. 각 값은 0부터 255까지 256단계라서 만들 수 있는 색은 다음과 같습니다.
256 × 256 × 256 = 16,777,216가지
HEX는 같은 값을 16진수 두 자리씩 이어 쓴 표기입니다. ff는 255, 63은 99, 47은 71이라서 #ff6347은 rgb(255, 99, 71)과 같은 색입니다.
사용법
- "색 입력"에 아는 형식으로 색을 넣습니다. HEX 코드, rgb()와 hsl() 값, tomato 같은 색 이름을 모두 읽습니다. 왼쪽 네모를 눌러 색을 고를 수도 있고, 지원하는 브라우저에서는 스포이트로 화면의 색을 찍을 수 있습니다.
- R, G, B와 투명도 막대로 색을 조절합니다.
- 오른쪽에서 필요한 형식의 줄을 클릭하면 복사됩니다.
- 아래 막대로 밝게 또는 어둡게 바꿔 보고, 배색을 확인합니다. 색 칸을 클릭하면 HEX가 복사됩니다.
관련 용어
HEX
#RRGGBB처럼 R, G, B를 16진수 두 자리씩 쓴 표기입니다. 세 자리(#f63)는 각 자리를 두 번 쓴 것(#ff6633)이고, 여덟 자리(#ff634780)의 마지막 두 자리는 투명도입니다. 00은 완전히 투명하고 ff는 불투명합니다.
HSL
색상(0~360°), 채도, 밝기로 나타냅니다. 밝기는 R, G, B 중 가장 큰 값과 가장 작은 값의 평균이라서 눈으로 느끼는 밝기와 다를 수 있습니다.
HSB(HSV)
색상, 채도, 명도로 나타냅니다. 명도는 R, G, B 중 가장 큰 값이고, 채도는 가장 큰 값과 가장 작은 값의 차이를 명도로 나눈 값입니다.
OKLCH
CSS Color 4에 들어간 표기로, 밝기(L), 채도(C), 색상(H)로 나타냅니다. Oklab 색 공간을 바탕으로 해서 밝기 값이 눈으로 느끼는 밝기를 더 잘 반영합니다.
CMYK
인쇄 잉크인 청록(C), 자홍(M), 노랑(Y), 검정(K)의 비율입니다. 이 도구는 CSS Color 5의 단순 변환식을 써서 잉크와 종이의 특성을 반영하지 않습니다. 실제 인쇄 색은 인쇄소의 기준으로 확인하세요.
같은 50% 밝기인데 노랑이 더 밝아 보이는 이유
HSL로 파랑은 hsl(240, 100%, 50%), 노랑은 hsl(60, 100%, 50%)입니다. 둘 다 밝기가 50%이지만 눈으로 보면 노랑이 훨씬 밝습니다.
OKLCH로는 파랑의 밝기가 0.452, 노랑은 0.968입니다. 실제로 보이는 밝기 차이가 숫자에 드러납니다. 그래서 같은 밝기의 색을 여러 개 고르거나 밝기를 고르게 바꿀 때는 OKLCH가 편합니다.
CSS 색 이름 148개
CSS에는 tomato처럼 이름으로 쓰는 색이 148개 있습니다. 그중 16개는 옛 VGA 화면의 기본 색에서, 나머지 대부분은 유닉스 계열에서 쓰던 X11 색 체계에서 왔습니다.
오래 쓰여 온 이름을 표준으로 정리한 것이라 일관되지는 않습니다. 예를 들어 darkgray는 gray보다 밝습니다. gray와 grey처럼 철자만 다른 같은 색도 있습니다.
이 도구는 입력한 색과 OKLab 거리가 가장 가까운 이름을 보여 줍니다.
앱 코드는 투명도 위치가 다릅니다
CSS의 여덟 자리 HEX는 투명도를 맨 뒤에 씁니다(#RRGGBBAA). Android와 Flutter의 색 정수는 투명도를 맨 앞에 씁니다(0xAARRGGBB). 반투명한 빨강은 CSS에서 #ff000080, Android에서 0x80FF0000입니다.
iOS의 UIColor는 R, G, B, 투명도를 0~1 사이 값으로 받습니다. 그래서 255로 나눈 값을 넣습니다.
React Native는 CSS와 같은 색 문자열을 받습니다. 그런데 숫자로 쓰는 색은 0xRRGGBBAA로 투명도를 맨 뒤에 써서 Android와 순서가 반대입니다. 이 도구는 헷갈리지 않도록 문자열로 보여 줍니다.
밝기 조절과 배색을 만드는 방법
막대를 왼쪽으로 옮기면 흰색을, 오른쪽으로 옮기면 검은색을 표시된 비율만큼 섞습니다. CSS의 color-mix()로 sRGB에서 섞은 결과와 같습니다.
배색은 HSL 색상환에서 채도와 밝기를 그대로 두고 각도만 돌립니다. 보색은 180°, 유사색은 ±30°, 삼각 배색은 120°와 240°입니다.
자주 묻는 질문
HEX와 RGB는 다른 색인가요?
아니요. 같은 R, G, B 값을 HEX는 16진수로, RGB는 10진수로 쓴 것입니다. #ff6347과 rgb(255, 99, 71)은 같은 색입니다.
CMYK 값으로 인쇄하면 화면과 같은 색이 나오나요?
아니요. 이 도구의 CMYK는 잉크와 종이의 특성을 모르는 단순 변환이라 근사값입니다. CSS Color 5 명세도 이 변환이 실제 인쇄 결과와 크게 다를 수 있다고 설명합니다.
스포이트 버튼이 보이지 않아요.
스포이트는 브라우저의 EyeDropper API를 쓰는데, 아직 모든 브라우저가 지원하지는 않습니다. 지원하는 브라우저에서만 버튼이 보이고, HTTPS 페이지에서 버튼을 눌렀을 때만 동작합니다.
입력한 색이 저장되나요?
서버로는 보내지 않습니다. 새로고침해도 이어서 쓸 수 있도록 마지막 색 하나만 이 브라우저에 저장합니다.