색상 형식 변환기는 HEX, RGB, HSL, HSV, OKLCH 간의 상호 변환을 지원합니다. 내장 선택기로 색상을 고르거나, HEX 값을 입력하거나, CSS 색상 문자열을 붙여넣거나, RGB 슬라이더를 조정해 보세요. 모든 형식이 실시간으로 업데이트되며 각각 개별 복사 버튼이 제공됩니다.
최신 CSS에서는 동일한 색상을 표현하는 방식이 매우 다양합니다: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293) 등과 각각의 알파(Alpha) 변형이 존재합니다. 상황에 따라 변환이 필요한 경우가 많습니다. Figma 디자인은 OKLCH를 제공하는데 코드베이스는 HEX를 사용하고, 테마 변수에서는 호버 효과를 위해 HSL을 선호할 수 있습니다. 색상 형식 변환기는 이 모든 변환을 한 화면에서 처리합니다. 색상 선택기로 고르거나, 어떤 형식이든 기존 색상을 붙여넣거나, RGB 슬라이더를 드래그하여 원하는 색상을 맞추세요. HEX(알파 포함), rgb()/rgba(), hsl()/hsla(), hsv(), oklch() 등 모든 공통 형식이 동시에 표시됩니다. 또한 CSS 변수 스니펫과 대비 계산을 위한 휘도값도 확인할 수 있습니다. 모든 형식에서 알파 채널이 지원되며, 개별 복사 버튼을 통해 한 번의 클릭으로 바로 사용할 수 있습니다. 파서는 표준 색상 이름부터 CSS가 지원하는 모든 구문을 인식합니다.
HEX, RGB/RGBA, HSL/HSLA, HSV, OKLCH를 한눈에 보여줍니다. 매번 다시 변환할 필요 없이 코드에 필요한 형식을 바로 선택하세요.
HEX(#abc, #aabbcc, #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch(), 표준 색상 이름을 모두 지원합니다. CSS가 지원하는 모든 구문을 붙여넣으세요.
최신 CSS에서 사용되는 OKLCH 형식을 완벽하게 처리합니다. 인지적으로 균일한 색상 공간을 제공하여 새로운 디자인 시스템의 표준이 되고 있는 형식입니다.
각 결과물마다 전용 복사 버튼이 있습니다. 수동으로 드래그할 필요 없이 클릭 한 번으로 코드에 필요한 정확한 형식을 가져가세요.
Red/Green/Blue/Alpha 슬라이더를 통해 색상을 미세 조정하세요. 슬라이더를 움직이는 동안 모든 형식이 실시간으로 업데이트됩니다.
#RRGGBBAA, rgba(...), hsla(...) 등 모든 형식에서 투명도가 유지됩니다. 한 번 설정하면 모든 형식으로 변환됩니다.
Figma에서 OKLCH나 HSL 값을 받았을 때, 브라우저를 벗어나지 않고 이를 Tailwind 설정이나 CSS 변수에 넣을 HEX 값으로 바로 변환하세요.
슬라이더를 움직이며 다양한 톤을 탐색하고, 체계적인 디자인 시스템 팔레트를 위해 OKLCH 값을 기록해 보세요.
브랜드 컬러를 HSL 형식으로 변환하여 호버 상태에 hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%))와 같이 활용하세요.
휘도(Luminance) 필드는 WCAG 대비 계산에 사용되는 원시 값을 제공하여 접근성 계산에 도움을 줍니다.
읽고 있는 CSS 파일의 oklch(...) 값을 붙여넣어 실제 어떤 색상인지 즉시 확인하세요.
DevSuite Pro 독에서 색상 형식 아이콘을 클릭합니다. 색상 선택기, HEX 입력란, RGB 슬라이더가 있는 패널이 열립니다.
내장 선택기를 사용하거나, HEX를 입력하거나, CSS 색상 문자열(rgb(...), oklch(...) 등)을 붙여넣으세요. 색상이 즉시 미리 보여집니다.
HEX, RGB, HSL, HSV, OKLCH, CSS 변수, 휘도값이 한꺼번에 표시됩니다. 조정하는 동안 모든 값이 동기화되어 유지됩니다.
R/G/B/A 슬라이더를 드래그하여 정확한 색상을 맞추세요. 디자인 가이드에 정의된 특정 톤을 구현할 때 매우 유용합니다.
원하는 형식의 행에서 복사 버튼을 클릭하세요. 올바른 구문으로 클립보드에 저장됩니다.
