Color Converter - HEX, RGB, HSL

Convert between HEX, RGB, HSL, and CMYK with live preview

๐Ÿ”’ 100% ๋ธŒ๋ผ์šฐ์ € ๋‚ด๐Ÿ†“ ํ‰์ƒ ๋ฌด๋ฃŒโšก ๊ฐ€์ž… ์—†์Œ
์ฐธ๊ณ : ์•„๋ž˜ ํˆด ์ธํ„ฐํŽ˜์ด์Šค๋Š” ํ˜„์žฌ ์˜์–ด๋กœ๋งŒ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. UI๋Š” ํ•˜๋‚˜์”ฉ ๋ฒˆ์—ญ ์ค‘์ž…๋‹ˆ๋‹ค. ์ด ํˆด์„ ์˜์–ด๋กœ ๋ณด๊ธฐ โ†’
HEX
RGB
HSL
hsl(221, 83%, 53%)
CMYK
cmyk(84%, 58%, 0%, 8%)

์‚ฌ์šฉ๋ฒ•

  1. 1
    Enter a color

    Type a HEX code, RGB values, HSL values, or use the color picker.

  2. 2
    See all formats

    The other three formats update live alongside a color preview.

  3. 3
    Copy any format

    One-click copy for HEX, RGB, HSL, or CMYK.

Color Converter - HEX, RGB, HSL ์†Œ๊ฐœ

Free online color converter. Convert any color between HEX, RGB, HSL, and CMYK formats with a live preview swatch. Copy any format with one click. Perfect for designers moving between Figma, CSS, and print workflows. 712 Tools์˜ Color Converter - HEX, RGB, HSL์€ ์ตœ์‹  JavaScript API๋ฅผ ์‚ฌ์šฉํ•ด ์—ฌ๋Ÿฌ๋ถ„์˜ browser์—์„œ ์™„์ „ํžˆ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค - server๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณผ ์ผ์ด ์ ˆ๋Œ€ ์—†์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์ฆ‰๊ฐ์ ์ธ ๊ฒฐ๊ณผ, ์™„์ „ํ•œ ํ”„๋ผ์ด๋ฒ„์‹œ, ๊ทธ๋ฆฌ๊ณ  ์—…๋กœ๋“œ ์ œํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค.

debugging ์„ธ์…˜, ๋น ๋ฅธ sanity check, ๋˜๋Š” ํ”„๋กœ๋•์…˜ ์ธ์‹œ๋˜ํŠธ - ์–ด๋–ค ์ƒํ™ฉ์ด๋“  ์ด ํˆด์€ ์›ํ•˜๋Š” ๋งŒํผ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›Œํ„ฐ๋งˆํฌ ์—†์Œ, ๊ฐ€์ž… ์—†์Œ, ํˆด ๋‚ด ๊ด‘๊ณ  ์—†์Œ.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

Does it support alpha (RGBA / HSLA)?

Yes. If you enter #RRGGBBAA or an rgba() value, alpha is preserved across all formats that support it.

How accurate is the CMYK conversion?

It uses the standard math-based sRGB โ†’ CMYK formula. For print-accurate CMYK (with an ICC profile) use a design tool - screen CMYK is always an approximation.

Which HEX formats are accepted?

3-digit (#f0a), 4-digit with alpha (#f0a8), 6-digit (#ff00aa), and 8-digit (#ff00aa88).

Is my color data sent anywhere?

No. Conversion runs entirely in your browser.

๋” ์ฝ๊ธฐ

5 ๋ถ„ ์†Œ์š”

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

5 ๋ถ„ ์†Œ์š”

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

4 ๋ถ„ ์†Œ์š”

CSS gradient patterns that actually look good (and the two that don't)

Two colors and a 45ยฐ angle is not a gradient - it's a shortcut to a design that looks like every SaaS site from 2018. Here's how to build ones that don't.

๊ด€๋ จ ํˆด

Palette Generator

Generate harmonious color palettes from a base color

CSS Gradient

Design linear, radial, and conic CSS gradients with live preview

Box Shadow

Design multi-layer CSS box-shadows with live preview

Contrast Checker

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

Glassmorphism

Design frosted-glass CSS cards with live preview and copy-ready code

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine