Convert HEX/RGB/HSL/CMYK formats and check WCAG 2.1 accessibility color contrast ratio.
💡 Note: WCAG 2.1 recommends a ratio of at least 4.5:1 for normal text (AA) and 7:1 for AAA; large text requires 3:1 for AA and 4.5:1 for AAA.
Convert HEX/RGB/HSL/CMYK formats and check WCAG 2.1 accessibility color contrast ratio. Use it for everyday work, development, learning, or quick verification.
This tool runs in your browser. Before working with sensitive data, make sure you trust your browser and device environment.
This tool converts colors between HEX, RGB, HSL and CMYK in real time. Pick a color with the color picker or type into any field, and the other three update instantly, each with its own copy button. For example, the amber #F59E0B converts to rgb(245, 158, 11), hsl(38, 92%, 50%) and cmyk(0%, 36%, 96%, 4%). The HEX field also accepts three-digit shorthand such as #F90, which expands to #FF9900.
Each format has its job. HEX is the standard in web code and design apps; RGB maps to the red, green and blue light of a screen; HSL describes hue, saturation and lightness, so making a lighter or darker shade of the same color is just a change to L, which is why it is handy in CSS; CMYK describes the four process inks used in print. When typing RGB, HSL or CMYK, use comma-separated whole numbers like rgb(255, 153, 0), hsl(36, 100%, 50%) or cmyk(0%, 40%, 100%, 0%). Alpha transparency is not supported.
Note that CMYK here is calculated from RGB with a simple formula, without any ICC color profile. Real printed color depends on the paper, inks and press, so before sending a job to print, rely on your printer’s swatches or profile. HSL values are rounded to whole numbers, so converting HSL back to HEX can occasionally shift a channel by one step; that is normal rounding, not an error.
Switch to the Contrast Checker tab to choose a text color and a background color. The tool calculates the WCAG 2.1 contrast ratio and shows whether it passes for normal text (AA 4.5:1, AAA 7:1), large text (AA 3:1, AAA 4.5:1) and UI components (3:1), with a live preview below. For example, #767676 gray on white is 4.54:1 and just passes AA, while #777777 is only 4.47:1 and fails. For a deeper analysis with color suggestions, use the Color Contrast Analyzer on this site.
Each pair of the six hex digits is one channel in base 16. In #F59E0B, F5 = 245 (red), 9E = 158 (green) and 0B = 11 (blue), giving rgb(245, 158, 11). Paste the HEX code into the tool and RGB, HSL and CMYK are calculated for you.
Screens emit RGB light while printers use CMYK inks that absorb light, and the two cover different color ranges; vivid blues, greens and oranges often cannot be printed exactly. The CMYK values here are a mathematical conversion that ignores paper and ink, so ask for a proof using your printer’s color settings.
WCAG defines large text as at least 18pt (about 24px) at normal weight, or at least 14pt (about 18.66px) bold. Large text needs 3:1 for AA, while body text needs 4.5:1. UI components such as button borders, input outlines and icons need at least 3:1 against adjacent colors.
Not at the moment. The tool parses rgb(r, g, b), hsl(h, s%, l%) and cmyk(c%, m%, y%, k%) without alpha, and HEX in 3- or 6-digit form. To check a semi-transparent color, first work out the solid color it produces on its background, then test that.
Browse this category: Design & Color
Fine-tune CSS shadow and backdrop-filter glassmorphism effects, export CSS instantly.
Calculate text & background contrast ratio based on WCAG 2.1 standards, fix colors automatically, extract color palettes from drag-and-drop images, and simulate color blindness.
Simulate 2D physics particles with gravity, elasticity, friction, gyroscope gravity, and mouse attraction. Mascot Alpa turns into a physical particle bouncing around!
Click to place anchors, drag Bézier handles on a 500×500 canvas, and instantly get the SVG path d attribute and a CSS clip-path: path() rule. Includes heart and star presets.
