>

🎨 Color Format Converter

HEX / RGB / HSL / CMYK Conversion with WCAG Contrast Check

Color Format

Contrast (White Text)
-
-
Contrast (Black Text)
-
-

History

How to Use This Color Converter

  1. Pick or enter a color — Start by clicking the color picker swatch at the top of the tool, or simply type a HEX value (like #ff5500) directly into the HEX input field. The converter instantly processes the color and displays all equivalent format values side by side, including RGB, HSL, HSV, and CMYK representations. You can also use the three RGB sliders to visually adjust the red, green, and blue channels and watch all other formats update in real time as you drag.
  2. Copy any format with one click — Each color format row includes a "Copy" button on the right side. When you find the format you need for your project — whether it's an RGB value for CSS, a HEX code for a design tool, or an HSL value for JavaScript canvas work — just click the Copy button and the value is instantly placed on your clipboard. A brief "Copied" confirmation appears so you know the action succeeded without any guesswork.
  3. Check accessibility contrast ratios — Below the format conversions, the tool automatically calculates the WCAG contrast ratio for your selected color against both white text and black text backgrounds. This helps you determine whether your color choice meets accessibility standards (AA or AAA level) for readable text. The contrast score and a pass/fail badge are displayed, making it easy to ensure your designs are usable for people with visual impairments.
  4. Save colors to your history palette — Every color you convert is automatically saved to your recent color history at the bottom of the page. Up to 20 recent colors are stored in your browser's local storage, so they persist between sessions. Click any swatch in the history palette to instantly reload that color and see all its format conversions again. This is especially useful when you are working on a project and need to quickly switch between several colors.
  5. Use the conversion for your project — Whether you are a web developer writing CSS, a graphic designer working in Figma or Photoshop, or a frontend engineer configuring chart colors in a JavaScript library, this tool gives you the exact format you need. No more manual conversion calculations or switching between multiple tools — everything is right here in one clean, fast interface.

Frequently Asked Questions

Q: What is the difference between RGB and HSL color formats?

RGB (Red, Green, Blue) represents a color as three numeric values ranging from 0 to 255, where each value controls the intensity of its respective color channel. When all three values are 0, the result is black; when all are 255, the result is white. HSL (Hue, Saturation, Lightness) represents the same color differently — the hue is a degree on the color wheel (0 to 360), saturation is a percentage of color intensity (0% is gray, 100% is fully saturated), and lightness is a percentage of brightness (0% is black, 50% is the pure color, 100% is white). HSL is often more intuitive for humans because you can think in terms of "a bright red" or "a pale blue" rather than trying to guess RGB numbers. Both formats are widely supported in CSS and design tools, and this converter lets you switch between them instantly.

Q: What does the CMYK format mean and when should I use it?

CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used primarily in print design, as opposed to the additive RGB model used for digital screens. In printing, ink absorbs light, so combining all four colors at full intensity produces a very dark color (ideally black, which is why a separate black ink — the "Key" — is added for efficiency). If you are designing something that will be physically printed — business cards, brochures, packaging, posters — you should use CMYK values to ensure the printed colors match your on-screen design as closely as possible. This converter calculates CMYK values from your RGB input so you can take screen designs straight to print production without needing separate software.

Q: Why do the contrast ratios matter for my website?

Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for users with varying levels of visual ability, including color blindness and low vision. For normal-sized text, WCAG AA requires a contrast ratio of at least 4.5:1 against its background. For large text (18px or 14px bold and above), the minimum drops to 3:1. The AAA level is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Our tool calculates these ratios automatically so you can verify your color combinations during the design phase rather than discovering accessibility issues after your site is already built. Meeting these standards is not only a best practice — in many jurisdictions, it is a legal requirement under disability discrimination laws.