Color Converter
Convert color values between HEX, RGB, RGBA, HSL, HSV, and CMYK with visual preview and contrast ratio checker.
Color Converter
Convert color values between HEX, RGB, HSL, and CMYK with contrast metrics.
âŋ WCAG Accessibility Contrast Checker
What is the Color Converter?
The Color Converter is an essential design & frontend tool for converting color formats between HEX, RGB, RGBA, HSL, HSV, and CMYK.
Whether you are matching brand identity guidelines (CMYK for print), writing CSS styling rules (HEX, RGB, HSL), or calculating WCAG accessibility contrast ratios for UI design, this tool provides real-time conversions, visual previews, and CSS snippet copying.
Key Features
- Multi-Format Conversion: Seamlessly converts HEX (`#3b82f6`), RGB (`rgb(59, 130, 246)`), HSL (`hsl(217, 91%, 60%)`), HSV (`hsv(217, 76%, 96%)`), and CMYK (`cmyk(76%, 47%, 0%, 4%)`).
- Visual Color Picker: Native HTML5 color picker for intuitive visual selection.
- WCAG Contrast Checker: Calculates accessibility contrast ratio against white (`#ffffff`) and dark (`#000000`) backgrounds with AA / AAA compliance badges.
- CSS Copy Snippets: Copy ready-to-use CSS declarations with a single click.
How Does the Color Converter Work?
1. Select or Paste Color: Type a HEX, RGB, HSL, or CMYK value, or use the color picker.
2. View Real-Time Conversions: See synchronized values across all 5 major color spaces.
3. Inspect Contrast Ratios: Check WCAG AA and AAA compliance for text readability.
4. Copy Snippets: Copy CSS declarations for Tailwind, vanilla CSS, or Figma.
Formula & Calculation Method
RGB to HSL Conversion:
1. Normalize RGB to $0..1$: $r = R/255, g = G/255, b = B/255$.
2. Find $max = \max(r,g,b)$, $min = \min(r,g,b)$, $\Delta = max - min$.
3. Lightness: $L = (max + min) / 2$.
4. Saturation: $S = \Delta / (1 - |2L - 1|)$ if $\Delta \neq 0$.
5. Hue: Depends on which color component equals $max$.
Example Calculation
Color: Royal Blue (`#3B82F6`)
- RGB: `rgb(59, 130, 246)`
- HSL: `hsl(217°, 91%, 60%)`
- CMYK: `cmyk(76%, 47%, 0%, 4%)`
- Contrast vs White: 4.54:1 (Passes WCAG AA for normal text)
Frequently Asked Questions
**RGB to HSL Conversion:** 1. Normalize RGB to $0..1$: $r = R/255, g = G/255, b = B/255$. 2. Find $max = \max(r,g,b)$, $min = \min(r,g,b)$, $\Delta = max - min$. 3. Lightness: $L = (max + min) / 2$. 4. Saturation: $S = \Delta / (1 - |2L - 1|)$ if $\Delta \neq 0$. 5. Hue: Depends on which color component equals $max$.
Disclaimer: All developer utilities run 100% locally in your browser. None of your code, tokens, passwords, or input data are sent to or stored on remote servers.