Color Converter & Picker
Convert colors between HEX, RGB, HSL, HSV, and CMYK online instantly. Visual color picker with sliders, WCAG contrast ratio checker, and one-click copy for each format.
2.28:1
Fail
9.22:1
AAA
About the Color Converter & Picker
The DevToolHeaven Color Converter instantly converts colors between HEX, RGB, HSL, HSV/HSB, and CMYK formats. Enter any color value in any supported format — the tool auto-detects the format and updates all other representations simultaneously.
Use the native color picker for visual selection, or drag the RGB and HSL sliders for precise control over individual channels. Each format panel has its own copy button for pasting directly into CSS stylesheets, Figma, design tokens, or code.
Understanding which color model to use for each context prevents conversion errors. HEX (#RRGGBB) is the native format for CSS and HTML. RGB defines colors by their red, green, and blue light intensities (0–255 each). HSL (Hue, Saturation, Lightness) is the most intuitive for design — adjust lightness without changing the hue to create shades and tints. CMYK is the subtractive model used for print production.
Color conversion is essential when working across different tools and mediums. A brand color defined in Figma as HSL needs to be expressed as HEX in CSS, as RGB in a canvas element, and as CMYK for print. This tool eliminates manual calculation and the rounding errors that accumulate through intermediate steps.
The WCAG contrast checker computes the contrast ratio between your color and both white and black backgrounds. A ratio of 4.5:1 meets WCAG AA for normal-sized text, and 7:1 meets WCAG AAA. Use these scores to choose accessible text and UI color combinations that remain readable for users with visual impairments.
CSS named colors are detected automatically — when your color matches one of the 140+ CSS named colors exactly, the name is displayed below the swatch. All conversion is done 100% client-side with no data sent to any server.
Frequently Asked Questions
The converter supports HEX (#RRGGBB), RGB (red, green, blue values 0-255), HSL (hue, saturation, lightness), HSV/HSB (hue, saturation, value/brightness), and CMYK (cyan, magenta, yellow, key/black). Enter any format in the input field and all others update instantly.
Both use hue (0-360 degrees) and saturation. HSL uses lightness where 0% is black, 100% is white, and 50% is the pure color. HSV uses value/brightness where 0% is black and 100% is the brightest version of the color. HSL is more common in CSS while HSV is more common in design tools.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text legibility. WCAG AA requires a ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text. The contrast checker shows ratios against both white and black backgrounds.
CSS has 140+ predefined color names like "red", "coral", "dodgerblue", and "mediumseagreen". When your HEX value matches one of these named colors exactly, the name is shown below the color swatch. Named colors are convenient shortcuts in CSS but not all colors have names.
The RGB sliders let you adjust individual red, green, and blue channels from 0 to 255. The HSL sliders adjust hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). All other formats update automatically as you drag any slider.
Yes. The input field accepts HEX (#FF5733 or FF5733), RGB (rgb(255,87,51)), and HSL (hsl(11,100%,60%)) formats. The tool auto-detects the format and converts to all others. The native color picker provides a visual way to select any color.
HSL is the most intuitive color model for designers because you can adjust lightness and saturation independently without changing the hue. Creating a lighter or darker shade of a color is as simple as changing the L value. In CSS, HSL works natively — hsl(220, 90%, 56%) is valid in any stylesheet. HEX and RGB are better for copy-pasting exact values from design tools.
WCAG contrast ratio measures the difference in perceived brightness between a foreground and background color. A ratio of 4.5:1 or higher (AA standard) ensures normal text is readable by users with moderate visual impairment. A ratio of 7:1 or higher (AAA standard) ensures readability for users with severe visual impairment. The checker shows ratios against both white and black backgrounds to help you pick accessible text and background color combinations.
In Figma, click on any element and look at the Fill section in the right panel — colors are shown as HEX values. Copy the HEX code, paste it here, and instantly get the RGB, HSL, and CMYK equivalents for use in CSS. HSL is often the most useful for CSS since it is easy to adjust lightness and saturation programmatically.
Tailwind uses a fixed color palette. Paste your HEX value here to get its RGB and HSL equivalents, then cross-reference with the Tailwind CSS color documentation (tailwindcss.com/docs/customizing-colors). If the color does not match exactly, you can add it as a custom color in your tailwind.config.js under theme.extend.colors.
RGB (Red, Green, Blue) is an additive color model used for screens — colors are created by combining light. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used in print — colors are created by absorbing light with ink. Digital design uses RGB; print design uses CMYK. When converting between them, colors may look different because the two models have different color gamuts.
Use the WCAG contrast checker built into this tool. Enter your background color and check the contrast ratio against both white and black text. A ratio of 4.5:1 or higher meets WCAG AA for normal text. If neither white nor black achieves sufficient contrast, try a lighter or darker shade of your desired text color until the ratio passes.