CSS 단위 및 색상 변환기

CSS 색상과 단위 이해하기

HEX, RGB, HSL 색상 형식

CSS는 여러 색상 형식을 지원합니다.

<strong>RGB</strong>는 각 채널에 0~255 값을 사용합니다.

<strong>HSL</strong>은 디자이너에게 가장 직관적입니다.

CSS Named Colors

CSS provides 147 named colors like coral, steelblue, and rebeccapurple. While convenient for prototyping, named colors offer limited precision. Converting a CSS color name to HEX or RGB gives you exact values you can fine-tune for production use.

인쇄 디자인용 CMYK

<strong>CMYK</strong>는 인쇄의 표준 색상 모델입니다.

디자인 도구의 HSV

<strong>HSV</strong>는 Photoshop, Figma, Sketch의 기본 색상 모델입니다.

PX vs REM: CSS 단위 설명

<strong>픽셀(PX)</strong>은 절대 단위입니다.

픽셀을 16으로 나누어 REM 값을 구합니다.

<strong>EM 단위</strong>는 루트가 아닌 부모 요소의 글꼴 크기에 상대적입니다.

• 1rem = 16px (default browser setting)
• 1em = parent font-size (context-dependent)
• 0.75rem = 12px — common for small/caption text
• 1.25rem = 20px — common for subheadings
• 2rem = 32px — common for section headings

왜 CSS 변환기를 사용하나요?

수동 변환은 지루하고 오류가 발생하기 쉽습니다.

• Instant results — paste a value and get the converted output immediately, no formulas needed.
• Copy-ready output — every result includes a one-click copy button with properly formatted CSS syntax.
• Color preview — see a live swatch of the converted color to visually confirm accuracy.
• No installation — works in any browser, on any device. No extensions, downloads, or signups.
• Developer-friendly — shareable URLs with pre-filled values for easy team collaboration.

Common CSS Conversion Workflows

• Design handoff: Figma and Sketch export colors as HEX. Convert to RGB or HSL if your codebase uses those formats.
• Dark mode generation: Take your light-mode HSL palette, adjust lightness values, and convert back to HEX.
• Accessibility checks: Convert colors to RGB to calculate contrast ratios using the WCAG luminance formula.
• Legacy migration: Convert pixel-based layouts to rem-based responsive systems during refactors.
• Cross-browser debugging: Quickly convert colors to match your source code format.

Supported Conversions