색상 코드 변환

Colour Format Converter

HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.

CSS 색이면 무엇이든 읽습니다. 16진수, `rgb()`, `hsl()`, `lab()`, `oklch()`, 색 이름까지요. 그리고 모든 표기법으로 한꺼번에 보여 주며, 밝은 배경과 어두운 배경에 나란히 놓습니다. sRGB 밖의 색이면 그 사실과 표현 가능한 가장 가까운 색도 알려 줍니다.

🔒 브라우저 안에서만 처리colorconvertoklchhex

CSS 색이면 무엇이든

HEX로 읽었습니다 · 가장 가까운 키워드는 mediumslateblue(#7b68ee), ΔEok 0.050

밝은 배경에서

이 색으로 쓴 글자

크기 비교용 본문 글자.

색을 채운 블록. 글자는 배경색으로 썼습니다.

어두운 배경에서

이 색으로 쓴 글자

크기 비교용 본문 글자.

색을 채운 블록. 글자는 배경색으로 썼습니다.

같은 색을 모든 표기법으로
HEX	`#5b6cff`디자인 도구가 복사해 주는 그 값.
RGB	`rgb(91 108 255)`디스플레이가 받는 그대로의 채널 값.
HSL	`hsl(233.78 100% 67.84%)`sRGB를 다시 배열한 것. 여기서 말하는 "명도"는 지각적인 값이 아닙니다.
HWB	`hwb(233.78 35.69% 0%)`같은 색상환을 색상과 흰색·검은색의 조합으로 말한 것.
LAB	`lab(50.851% 29.157 -76.75)`CIE Lab*. CSS가 정한 대로 D50 기준입니다.
LCH	`lch(50.851% 82.102 290.8)`Lab*를 극좌표로. 채도는 150 근처까지 갑니다.
OKLAB	`oklab(60.153% 0.0114 -0.2164)`직교 좌표의 OKLab. 여기서의 유클리드 거리가 곧 지각적 차이입니다.
OKLCH	`oklch(60.153% 0.2167 273.01)`기본으로 삼을 만한 것. 아래 설명을 보세요.

OKLCH를 기본으로 삼을 만한 이유

보간해도 채도가 살아 있습니다. sRGB에서 두 색을 직선으로 이으면 중립축 근처를 지나가서, 파랑에서 노랑으로 가는 그러데이션의 가운데가 회색이 됩니다. OKLCH에서는 경로가 색상환을 돌기 때문에 중간점도 채도를 유지합니다. 눈에 가장 크게 보이는 차이이고, CSS에 in oklch가 생긴 이유입니다.
명도가 정말 명도를 뜻합니다. HSL에서 50%인 두 색의 체감 밝기가 세 배까지 차이 납니다. hsl(60 100% 50%)은 노랑이고 hsl(240 100% 50%)은 남색입니다. OKLCH의 L은 지각에 맞춰 보정되어 있어서, 그 위에 세운 50–950 스케일은 중간에 절벽이 생기지 않고 고르게 나아갑니다.
거리가 곧 차이입니다. OKLab에서의 유클리드 거리가 쓸 만한 ΔE입니다. 위의 "가장 가까운 색 이름"이 그럴듯한 답을 내는 이유이고, RGB 거리로 재면 짙은 보라를 darkslateblue라고 부르게 됩니다.

이 색은 L 60.2%, C 0.2167, H 273.0°입니다. L과 H를 고정하고 C만 움직이면 농도 램프가 되고, L과 C를 고정하고 H를 움직이면 조화로운 팔레트가 됩니다. HSL에서는 둘 다 되지 않습니다.

사용 방법

색을 붙여넣습니다
어느 표기법이든 됩니다. 입력 상자 아래에 무엇으로 읽었는지 나오고, 가장 가까운 CSS 색 이름과 그것까지의 지각적 거리도 함께 나옵니다.
두 배경을 함께 봅니다
어떤 배경 위에 놓이는지 없이는 색이 절반만 정해진 것입니다. 흰 배경에서 또렷하던 중간 파랑이 어두운 배경에서는 꺼진 것처럼 보이는데, 표기법으로는 그게 드러나지 않습니다.
필요한 표기법을 복사합니다
줄마다 복사 버튼이 있고, 그 색 공간이 무엇을 위한 것인지 한 줄 설명이 붙습니다. 입력한 표기법에 해당하는 줄은 강조됩니다.

자주 묻는 질문

왜 자꾸 OKLCH를 권하나요?

확인 가능한 이유가 셋입니다. 보간해도 채도가 살아 있어서 파랑에서 노랑으로 가는 그러데이션의 가운데가 회색이 되지 않습니다. 명도가 지각적이라 50–950 램프의 단계가 고르게 나아갑니다. 그리고 그 안에서의 거리가 곧 지각적 차이라, "가장 가까운 색 이름"이 그럴듯한 답을 냅니다.

"sRGB 밖"이라는 건 무슨 뜻인가요?

그 색을 정확히 내려면 채널 값이 0보다 작거나 1보다 커야 하는데, 디스플레이가 그런 값을 낼 수 없다는 뜻입니다. 색 견본은 표현할 수 있는 가장 가까운 색입니다. 명도와 색상은 두고 채도만 낮춰서, 화면이 애초에 낼 수 없던 채도만 포기합니다. P3 디스플레이라면 더 많이 보여 줍니다.