Color Converter

Convert colors between RGB, HEX, HSL, HSV, and CMYK formats

Color Converter
H: 0°
S: 100%
L: 50%
H: 0°
S: 100%
V: 100%
C: 0%
M: 100%
Y: 100%
K: 0%

Complete Color Conversion Guide

Comprehensive guide to color models, formats, conversions, and professional design applications

Understanding Color Models

Digital Color Models

  • •HEX: 6-digit hexadecimal (#RRGGBB), 16.7 million colors
  • •RGB: Red/Green/Blue (0–255 each), additive model for screens
  • •RGBA: RGB + Alpha transparency (0–1)
  • •HSL: Hue (0–360°)/Saturation/Lightness (0–100%)
  • •HSV/HSB: Hue/Saturation/Value (alternative to HSL)

Print & Industry Color Models

  • •CMYK: Cyan/Magenta/Yellow/Black (0–100%), subtractive for print
  • •Pantone (PMS): standardized spot colors for brand consistency
  • •LAB (CIELAB): device-independent, perceptually uniform
  • •LCH: Lightness/Chroma/Hue (perceptual)
  • •XYZ: CIE 1931 tristimulus, scientific standard

Color Format Reference

HEX & RGB Conversion

  • •HEX to RGB: parse pairs (#FF6B35 → R=255, G=107, B=53)
  • •RGB to HEX: convert each channel to 2-digit hex
  • •CSS shorthand: #RGB (3-digit) = #RRGGBB
  • •Alpha in HEX: 8-digit #RRGGBBAA
  • •Example: White = #FFFFFF = rgb(255,255,255)

HSL & RGB Relationship

  • •Hue: 0°=red, 60°=yellow, 120°=green, 180°=cyan, 240°=blue, 300°=magenta
  • •Saturation 0% = gray, 100% = full color
  • •Lightness 0% = black, 50% = normal, 100% = white
  • •Red: HSL(0°,100%,50%) = RGB(255,0,0)
  • •Blue: HSL(240°,100%,50%) = RGB(0,0,255)

CMYK & RGB Relationship

  • •RGB→CMYK: K=1−max(R,G,B); C=(1−R−K)/(1−K); M=(1−G−K)/(1−K); Y=(1−B−K)/(1−K)
  • •Pure red RGB(255,0,0) = CMYK(0%,100%,100%,0%)
  • •Pure black RGB(0,0,0) = CMYK(0%,0%,0%,100%)
  • •White RGB(255,255,255) = CMYK(0%,0%,0%,0%)

Professional Applications

Web & UI Design

  • •CSS color syntax (hex, rgb(), hsl(), oklch())
  • •Dark mode color tokens
  • •WCAG contrast ratios (4.5:1 for normal text)
  • •Brand color variables in design systems
  • •Tailwind/CSS-in-JS hex values
  • •Gradient creation with HSL hue rotation

Print & Brand Design

  • •Pantone color matching for brand identity
  • •CMYK conversion for offset printing
  • •Rich black vs. standard black for large areas
  • •Color profiles (sRGB vs CMYK) for file handoff
  • •Overprint settings
  • •Spot color separations

Photography & Video

  • •Color grading in Rec.709 / Rec.2020 color spaces
  • •LAB color for perceptual editing
  • •LUT (Look-Up Table) creation
  • •Skin tone reference (approximately 180–220 hue in HSL)
  • •Color calibration with X-Rite ColorChecker
  • •HDR content (wider gamut)

Data Visualization

  • •Sequential palettes (light to dark) for ordered data
  • •Diverging palettes for two extremes
  • •Qualitative palettes for categories
  • •Colorblind-safe palettes (avoid red-green alone)
  • •Perceptual uniformity in LAB space
  • •Accessibility in charts (WCAG 1.4.1)

Color Conversion Best Practices

Accuracy & Color Spaces

  • •HEX/RGB are sRGB by default — specify color space for wide gamut
  • •LAB conversion requires white point (D65 standard)
  • •CMYK values depend on the ICC color profile
  • •Color matching between screens varies by display calibration
  • •Always proof print colors before final production

Accessibility Considerations

  • •Minimum contrast ratio WCAG AA: 4.5:1 (normal text), 3:1 (large text)
  • •WCAG AAA: 7:1 (normal), 4.5:1 (large)
  • •About 8% of men have red-green color blindness — test with Coblis or similar
  • •Don't rely on color alone to convey information
  • •Test with grayscale conversion

Color Examples by Category

Web-Safe & Common Colors

  • •White: #FFFFFF = rgb(255,255,255) = hsl(0°,0%,100%)
  • •Black: #000000 = rgb(0,0,0)
  • •Red: #FF0000 = rgb(255,0,0) = hsl(0°,100%,50%)
  • •Navy: #000080 = rgb(0,0,128) = hsl(240°,100%,25%)
  • •Orange: #FFA500 = rgb(255,165,0)
  • •Gray: #808080 = rgb(128,128,128)
  • •Green: #008000 = rgb(0,128,0)

Brand Colors

  • •Coca-Cola red: #F40009 (CMYK 0/100/100/4)
  • •Facebook blue: #1877F2
  • •Google blue: #4285F4
  • •Instagram gradient start: #F58529
  • •Amazon orange: #FF9900
  • •Spotify green: #1DB954
  • •Apple black: #1D1D1F

Design System Examples

  • •Tailwind blue-500: #3B82F6 = hsl(217°,91%,60%)
  • •Tailwind red-500: #EF4444
  • •Material primary blue: #1976D2
  • •Bootstrap primary: #0D6EFD
  • •shadcn/ui foreground: #09090B
  • •Muted text: #71717A
  • •Destructive: #DC2626

Frequently Asked Questions

What is the difference between RGB and CMYK?▾
RGB (Red, Green, Blue) is an additive color model used for screens — mixing light. Full RGB (255,255,255) = white. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model for printing — mixing inks. Full CMYK (100,100,100,100) = near-black. Colors that look vivid on screen may be dull when printed because ink can't reproduce the full RGB gamut.
Why does my screen color look different when printed?▾
Screens emit light using the RGB model, which has a wider gamut (range of possible colors) than the CMYK model used by printers. Bright, saturated colors — especially electric blues, neon greens, and vivid oranges — often can't be reproduced with ink on paper. Always convert to CMYK and do a print proof before finalizing brand or packaging artwork.
What is HEX color notation?▾
A HEX color code is a 6-digit hexadecimal number preceded by #, like #FF5733. The first two digits are the red channel (00–FF), the middle two are green, and the last two are blue. Each pair represents 0–255 in base-16. Short codes like #F00 are shorthand for #FF0000. An 8-digit HEX (#RRGGBBAA) includes the alpha (opacity) channel.
How do I check color contrast for accessibility?▾
Use the WCAG contrast ratio formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the two colors. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). WCAG AAA requires 7:1 for normal text. Tools like WebAIM Contrast Checker or browser DevTools accessibility panels can calculate this instantly.
What is the difference between HSL and HSV?▾
Both HSL and HSV use Hue and Saturation, but differ in the third component. HSL (Lightness) defines 50% as the 'pure' color — 0% is black, 100% is white, 50% is fully saturated. HSV (Value/Brightness) defines 100% as the pure color — 0% is always black regardless of hue. HSL is more common in CSS and web design; HSV is more common in image editing software like Photoshop.
What color format should I use for web design?▾
For web design, HEX is the most widely used and readable format for static colors. Use hsl() in CSS when you need to programmatically adjust lightness or hue (great for design tokens and themes). Use rgba() when you need transparency. For modern browsers, oklch() offers perceptually uniform color manipulation and is increasingly recommended for design systems.