No data is ever sent to a server
Use instantly without creating an account
All formats update in real-time
Color Code Converter is a free online tool that instantly converts between HEX, RGB, HSL, HSV, and CMYK color formats in real-time. Pick colors visually, generate harmonious palettes, and check WCAG contrast ratios — all in one place.
Features include complementary, analogous, triadic, and more palette types, plus built-in accessibility checking. Perfect for web designers, CSS developers, and anyone who works with color.
All processing happens in your browser — no data is ever sent to a server. No sign-up required.
Choose a Color
Click on the color picker panel, adjust the hue bar, or type a color code directly into any input field.
View Conversions
All five formats (HEX, RGB, HSL, HSV, CMYK) update instantly. Color palettes and contrast ratios are also calculated automatically.
Copy the Code
Click the 📋 button next to any format to copy it. You can also copy the CSS variables block.
- HEX (Hexadecimal Color Code)
- The most common color format for the web. Written as #RRGGBB (6 digits) or #RGB (3-digit shorthand). Each pair represents red, green, and blue intensity from 00 to FF.
- RGB (Red / Green / Blue)
- Additive color model using light's three primaries. Each channel ranges from 0 to 255. In CSS: rgb(R,G,B) or rgba(R,G,B,A).
- HSL (Hue / Saturation / Lightness)
- Represents color as hue (0-360°), saturation (0-100%), and lightness (0-100%). More intuitive for humans and directly supported in CSS.
- HSV / HSB (Hue / Saturation / Value)
- Similar to HSL but uses "value" (brightness) instead of lightness. Widely used in design tools like Photoshop and Figma.
- CMYK (Cyan / Magenta / Yellow / Key)
- Subtractive color model used in printing. Browser-based conversion is approximate — for precise print colors, use color management software.
- Contrast Ratio
- A measure of luminance difference between two colors per WCAG guidelines. AA compliance requires ≥ 4.5:1, AAA requires ≥ 7:1.
All color conversions are performed in pure JavaScript with no external dependencies.
RGB ↔ HEX
Each RGB channel (0-255) is converted to a two-digit hexadecimal value. Reverse conversion uses parseInt(hex, 16).
RGB → HSL
RGB values are normalized to 0-1, then lightness L = (max+min)/2. Saturation depends on whether L ≤ 0.5. Hue is calculated in 60° increments based on which channel is dominant.
RGB → CMYK
Key (K) = 1 - max(R/255, G/255, B/255), then C, M, Y are derived. Note: browser conversions are theoretical and may differ from actual print output.
Contrast Ratio
Per WCAG 2.1: relative luminance L = 0.2126×R' + 0.7152×G' + 0.0722×B' (gamma-corrected), then ratio = (L1+0.05)/(L2+0.05).
- Q. Are CMYK conversions accurate for printing?
- A. Browser conversions are theoretical calculations. Actual print output depends on ICC profiles and ink characteristics. For precise print-ready CMYK, use software like Adobe Photoshop.
- Q. Does it support transparency (alpha)?
- A. Yes. Use the alpha bar to set 0-100% transparency. Output includes HEX (#RRGGBBAA), rgba(), and hsla() formats.
- Q. Can I use this on mobile?
- A. Yes. The color picker, sliders, and all features are fully touch-compatible with a responsive design.
- Q. Is my data sent to a server?
- A. No. Everything runs in your browser. Saved favorites use localStorage only.
Web Design
Convert design colors to CSS-ready codes. Generate harmonious palettes for consistent branding.
CSS Development
Copy CSS variables, Tailwind config values, and rgba/hsla formats with one click.
Presentations
Get brand colors in any format for PowerPoint, Google Slides, or Keynote.
Accessibility
Instantly check WCAG contrast ratios to ensure AA/AAA compliance.
- CSS Box-Shadow Generator｜Multi-Layer & Presets
- CSS Clip-Path Generator｜Drag & Drop Editor with Presets
- CSS Animation Generator｜@keyframes Code Output
- CSS Gradient Generator｜Linear, Radial & Conic with CSS Patterns
- CSS Sprite Animation Generator｜Auto-Generate steps() Code
- HTTP Header Checker & Security Audit｜A+ to F Scoring
- Font Subsetting Tool｜Reduce Web Font Size for Faster Sites
- Responsive Image Generator｜Auto-Generate srcset & picture Element HTML
- Network
- Image Processing & Text Analysis
- SNS & Entertainment
- Free Online Bingo Caller | Voice, Cards & Custom Items | No App
- OG Image Generator｜Create Social Share Images Free【1200×630】
- No App Needed! Roulette Maker | Custom Weighted Roulette with Effects
- No App Needed! BPM Tap Tempo Counter | Delay Calculator & Metronome
- Random Team Generator | Balanced Groups with Skill Levels & Constraints
- Tournament Bracket Generator | Create Brackets & Round-Robin Tables