색상 코드 변환 (HEX·RGB·HSL·OKLCH)

여러 줄을 한 번에

한 줄에 색 하나씩 넣으면 전부 바꿔 줍니다. 디자인 파일에서 팔레트를 통째로 복사해 다른 표기로 받아 가는 게 실제로 제일 흔한 쓰임입니다. 쉼표나 세미콜론으로 끊어 넣어도 됩니다.

읽을 수 있는 표기입니다.

• #3366cc · #36c · #3366cc80 (투명도 포함)
• rgb(51 102 204) · rgb(51, 102, 204) · rgb(20% 40% 80% / 50%)
• hsl(220 60% 50%) · hwb(220 20% 20%)
• oklch(52% 0.14 262) · oklab(52% -0.02 -0.14)
• tomato · rebeccapurple 같은 CSS 색 이름

HSL 의 L 과 OKLCH 의 L 은 다릅니다

hsl(60 100% 50%) 노랑과 hsl(240 100% 50%) 파랑은 L 이 똑같이 50% 인데, 눈에는 노랑이 훨씬 밝습니다. HSL 의 L 은 사람이 느끼는 밝기가 아니라 빨강·초록·파랑 값의 최대와 최소를 평균한 숫자일 뿐이기 때문입니다.

OKLCH 의 L 은 실제로 느끼는 밝기에 맞춰 만든 값입니다. 그래서 이런 일이 됩니다.

• 색조만 바꾸고 밝기는 그대로 두기 — 버튼 색을 계열별로 만들 때
• 밝기를 일정 간격으로 나눠 50·100·…·900 팔레트 만들기
• 다크모드에서 색조를 유지한 채 밝기만 뒤집기

HSL 로 같은 일을 하면 어떤 색은 튀고 어떤 색은 죽습니다.

sRGB 밖의 색

OKLCH 는 화면이 낼 수 있는 것보다 넓은 범위를 가리킬 수 있습니다. 그런 값을 넣으면 가장 가까운 색으로 잘리고, 그 사실을 결과에 적어 둡니다. 원래 값을 유지하려면 oklch() 표기 그대로 CSS 에 쓰세요 — 넓은 화면에서는 더 진하게 나옵니다.