모든 처리는 브라우저 내부에서 실행됩니다 — 파일·입력은 서버로 전송되지 않습니다.
`#06B6A4`·`rgb(6, 182, 164)`·`hsl(174, 94%, 37%)` 중 어느 것을 붙여 넣어도 3 형식이 동시에 채워지고, 실시간 색상 스워치와 변환된 값이 바로 복사 가능한 상태가 됩니다. 3자리 HEX 단축(`#0F0`)도 받습니다. 알파가 있는 형식(`rgba(...)`·`hsla(...)`·8자리 HEX `#RRGGBBAA`)도 알파 채널을 파싱하지만 본 컨버터는 불투명 색상을 중심으로 다룹니다. 베이스 색상만 원한다면 알파를 빼고 붙여 넣으세요.
한 도구에서 가져온 색상을 다른 형식을 선호하는 다른 도구에 붙여 넣을 때 사용하세요. Figma는 HEX로 익스포트하고, 브라우저는 현대 CSS 컬러 구문을 선호하며, 디자인 토큰은 HSL을 자주 씁니다. 명도 조정해도 "같은 색의 더 밝은·더 어두운 버전"으로 지각적으로 가깝게 남기 때문입니다. 브랜드 가이드라인은 색상을 한 형식으로만 표기하는 경우가 많고, 에디터나 CSS-in-JS 라이브러리가 원하는 형식을 이 도구로 추출할 수 있습니다. 처리는 모두 브라우저 안에서 끝납니다.
#06B6A4
HEX: #06B6A4 RGB: rgb(6, 182, 164) HSL: hsl(174, 94%, 37%)
전형적인 청록계 강조 색상입니다. HEX는 인라인 복사·붙여 넣기에 가장 짧고, RGB는 GPU가 값을 보관하는 형태에 가까우며, HSL은 *지각상의 색*을 표현합니다(청록계, 채도가 매우 높고 중간보다 약간 어두움). 디자이너가 HSL을 선호하는 이유는 L 채널을 ±10만 움직여도 브랜드 동일성을 유지한 채 호버·비활성 상태를 만들 수 있기 때문입니다.
#0F0
HEX: #00FF00 RGB: rgb(0, 255, 0) HSL: hsl(120, 100%, 50%)
`#0F0`은 `#00FF00`으로 펼쳐집니다(각 자리가 복제, `0`→`00`, `F`→`FF`). 단축으로 표현 가능한 것은 각 채널의 16진 2자리가 동일한 색뿐이라 sRGB 1677만 7216색 중 4096색에 한정됩니다. 기본색과 강조색에는 충분하지만 미묘한 색에는 쓸 수 없습니다.
hsl(174, 94%, 47%) (original was hsl(174, 94%, 37%), L raised by 10)
HEX: #0FE9D0 RGB: rgb(15, 233, 208) HSL: hsl(174, 94%, 49%)
L 채널을 37%에서 47%로 올리면 같은 색상·채도로 명확히 밝은 청록색이 나옵니다. 버튼 호버나 알림 배경으로 쓰는 "밝은 변형"의 교과서 예입니다. 같은 작업을 HEX나 RGB로 하려면 세 좌표를 동시에 조정해야 하지만 HSL이면 슬라이더 하나입니다. 출력 L이 `49%`(`47%`가 아닌)인 이유는 RGB를 거친 왕복에서 정밀도가 조금 떨어지기 때문입니다.
HEX와 RGB는 정수로 양자화되어 있고(채널당 0~255, 8비트), HSL은 실수입니다. `rgb(6, 182, 164)` → HSL → RGB는 정확히 `rgb(6, 182, 164)`로 돌아옵니다. 반면 `hsl(174, 94%, 37%)` → RGB → HSL은 `hsl(174.3, 93.7%, 36.9%)` 같은 값이 나오고 반올림하면 `hsl(174, 94%, 37%)`이 됩니다. 반올림은 여러 번의 변환에서 누적되므로 같은 색을 여러 번 왕복시키지 마세요. 기준값(보통 HEX 또는 원본 HSL) 하나를 정해 그것을 기준으로 두세요.
둘 다 색을 "색상 + 채도 + 밝기 계열 세 번째 채널"로 표현하지만 세 번째 채널의 정의가 다릅니다. **HSL**은 Lightness(명도)를 사용해 0%가 검정, 50%가 순수한 그 색상, 100%가 흰색입니다. **HSV·HSB**는 Value(명도)를 사용해 0%가 검정, 100%가 순수한 그 색상입니다. 즉 HSL에서 "명도 50%·채도 100%"가 완전히 색이 입혀진 색이고, HSV에서는 "명도 100%·채도 100%"가 같은 색이 됩니다. Photoshop·Figma·주요 디자인 도구는 HSV를 기본으로 두고 CSS는 HSL을 씁니다. 변환은 간단하지만 항등은 아닙니다. `hsl(174, 94%, 37%)` ≠ `hsv(174, 94%, 37%)`.
OKLCH(CSS Color Module Level 4의 L*a*b* 패밀리이며 2023년 이후 모든 현대 브라우저가 지원)는 색을 Lightness + Chroma + Hue로 표현하지만 *지각적으로 균등한* 공간입니다. 수치상 등거리면 지각상으로도 등거리라는 성질이 있어 HSL이나 RGB에는 없는 장점입니다. 디자인 토큰에는 엄격하게 우수합니다 — `oklch(70% 0.15 200)`을 `oklch(60% 0.15 200)`으로 어둡게 만들면 HSL의 L을 낮춘 것만으로는 얻을 수 없는 "같은 색의 더 어두운 버전"으로 지각됩니다. 이 도구는 HEX·RGB·HSL만 다룹니다. OKLCH가 필요하면 브라우저 DevTools 콘솔(`getComputedStyle(document.body).color`가 현대 구문을 받습니다) 또는 전용 도구를 사용하세요.
`rgba(...)`·`hsla(...)`·8자리 HEX(`#RRGGBBAA`)의 알파는 파싱하지만 출력은 불투명 값을 중심으로 다룹니다. 대부분의 워크플로에서 "불투명 색상 자체"와 "불투명도"를 분리해 두고 싶어 하기 때문입니다. 완전한 알파 지원이 필요하면 CSS로 직접 쓰세요 — `rgb(6 182 164 / 0.5)`가 현대 구문(CSS Color Level 4)이며 현대 주요 브라우저에서 동작합니다. Photoshop과 Figma도 알파를 별도 슬라이더로 두므로 "베이스 색상 추출 → 조정 → 원래 알파와 함께 되돌리기"라는 본 도구와의 왕복이 깔끔합니다.
주된 이유는 두 가지입니다. **색공간**: `#06B6A4`는 기본적으로 sRGB로 해석되지만, P3(광색역) 디스플레이는 같은 코드를 P3로 해석하면 더 채도가 높은 색을 표시할 수 있고, 최근 Apple 기기에서 그 경향이 커지고 있습니다. **캘리브레이션**: sRGB 안에서도 모니터·휴대폰 화면마다 공장 출하 시점의 백색점과 감마 커브에 미세한 차이가 있습니다. 브랜드 중요 작업에서는 캘리브레이션된 디스플레이(Datacolor SpyderX·X-Rite i1)에서 확인하거나, 광색역 공간으로 명시(`color(display-p3 0.5 0.7 0.65)`)해 렌더링 파이프라인이 대상 색역에 맞춰 보정할 수 있게 하세요.
직접은 안 됩니다. 이 컨버터는 형식만 표시할 뿐 두 색상 간 WCAG 명도 대비 비율은 계산하지 않습니다. 접근성 확인에는 본 사이트의 Color Contrast 도구를 쓰세요. WCAG 2.1에 따라 상대 휘도를 계산하고 전경·배경 쌍이 AA(일반 텍스트 4.5:1)나 AAA(7:1)를 만족하는지 알려 줍니다. 드래프트 중인 WCAG 3은 지각적으로 조정된 대비 공식 APCA로 비율을 대체할 예정입니다. 같은 HEX 쌍이 WCAG 2를 통과해도 사용자에게는 대비가 부족해 보이는 경우에 중요해집니다.
화면 위의 색은 본질적으로 세 숫자 — R·G·B 서브픽셀의 강도입니다. **HEX**는 그 세 숫자를 콤팩트한 8비트 16진수로 적습니다(`#06B6A4` = R 0x06, G 0xB6, B 0xA4). 단축 `#RGB`는 각 니블을 복제합니다. **RGB**는 10진수 0~255로 적고(`rgb(6, 182, 164)`) 선택적으로 알파 채널을 동반합니다. 둘 다 GPU가 픽셀을 그리는 방식과 직결되지만 *사람의* 색 감각에는 깔끔히 대응하지 않습니다 — "이 색이 저 색보다 채도가 높은가?"를 답하려면 RGB 공간 안에서 계산이 필요합니다.
**HSL**(Hue·Saturation·Lightness)과 그 형제 **HSV·HSB**는 같은 색을 사람이 실제로 사용하는 축으로 재배열합니다. Hue는 빨강-노랑-초록-시안-파랑-마젠타-빨강을 한 바퀴 도는 0°~360° 휠입니다. Saturation은 색이 회색에서 얼마나 멀어졌는지를 나타냅니다. Lightness 또는 Value는 밝기를 나타냅니다 — 미묘한 차이가 있고(HSL에서는 50% L이 순수한 색상, HSV에서는 100% V가 순수한 색상), CSS는 HSL을, Photoshop·Figma·주요 디자인 픽커는 HSV를 기본으로 둡니다. 둘 다 RGB에서 단순한 식으로 유도되고 정수 양자화가 허용하는 범위에서는 깔끔하게 왕복합니다.
현대 웹 작업에서 중요한 인접 색공간이 3가지 있습니다. **sRGB**는 브라우저와 대부분의 모니터가 기본으로 가정하는 색공간입니다 — 이 도구의 HEX와 RGB는 별도 태그가 없는 한 sRGB로 다뤄집니다. **Display P3**는 최근 Apple 기기와 하이엔드 Android가 지원하는 광색역 공간으로 CSS Color Level 4의 `color(display-p3 r g b)` 구문으로 명시할 수 있습니다. **OKLCH**는 CSS Color Level 4에서 도입된 지각적으로 균등한 공간으로, 수치상 등거리면 지각상으로도 등거리이기 때문에 색 전반에 걸쳐 일관된 대비와 명도 사다리가 필요한 디자인 토큰 시스템에 적합합니다. 이 컨버터는 Figma와 CSS 사이에서 실제로 붙여 넣는 sRGB 기반 형식에 집중합니다. 본격적인 팔레트 설계가 필요해지면 브랜드 색상을 여기서 확정한 뒤 OKLCH 인식 도구로 넘어가세요.
선형·방사형 CSS 그라디언트를 시각적으로 생성합니다. 컬러 스톱 드래그, 각도 조정, background CSS 바로 복사를 지원합니다.
두 색상의 명도 대비를 WCAG 기준으로 확인합니다. 본문/큰 텍스트/UI 컴포넌트별로 AA·AAA 합격 여부를 즉시 표시.
종횡비를 유지한 채 가로와 세로를 계산합니다. 16:9 / 4:3 / 21:9 / 1:1 프리셋과 CSS `aspect-ratio` 선언을 함께 제공합니다.
camelCase / PascalCase / snake_case / kebab-case / CONSTANT_CASE / Title Case를 서로 변환합니다.
