Color Converter (HEX, RGB, HSL)
Instantly convert HEX, RGB, and HSL color codes, generate palettes, and check WCAG contrast.
Luminance Palette (50 → 900)
This scale adjusts only the brightness in steps, keeping the hue and saturation. It can be used directly as a color chart for design systems.
Color Scheme Suggestions
WCAG Contrast Ratio Check
| Combination | Contrast Ratio | Normal Text AA (4.5:1) | Normal Text AAA (7:1) | Large Text AA (3:1) |
|---|
Calculated using the WCAG 2.x relative luminance formula. Large text means 18pt (24px) or larger, or bold 14pt (18.66px) or larger. UI components and graphics like button borders need a ratio of 3:1 or higher.
What is the Color Converter (HEX, RGB, HSL)?
Handling HEX, RGB, and HSL color codes is a daily task in web design and development. This color converter streamlines the entire process. Paste a color code in any format—like `#FF5733`, `rgb(255, 87, 51)`, or a CSS name—and see it instantly converted to all other formats, including HSV and CMYK. It also generates a 10-step luminance palette for your design system, suggests color schemes, and checks WCAG contrast ratios in real time. All calculations happen entirely in your browser; your color data is never sent to a server.
How to use
- Enter a color code in any format (e.g., HEX, RGB, HSL), or pick a color using the color picker on the left. You can also use CSS color names like `royalblue`.
- All formats are updated as you type, including HEX, RGB, HSL, HSV / HSB, and CMYK (Print). Use the 'Copy' button next to each field to get the value you need.
- Scroll to the 'Luminance Palette (50 → 900)' section. A 10-step scale is generated for use in design systems. Click any swatch to copy its HEX code.
- In 'Color Scheme Suggestions', find complementary, analogous, triadic, and other color combinations to inspire your design.
- Use the 'WCAG Contrast Ratio Check' table to see if your color meets accessibility guidelines for text on white and black backgrounds.
Color Converter (HEX, RGB, HSL) guide
How this tool is used in real work, and what to watch out for.
HEX, RGB, HSL: When to Use Which
These three formats are just different ways to write the same color, so conversion between them is lossless. However, each is more convenient than the others in certain situations.
| Format | When to Use | Why |
|---|---|---|
| HEX | Copying values from a design mockup into code | It's the most compact format, and what design tools usually provide. |
| RGB / RGBA | When you need transparency, or for canvas/image processing | Easy to perform calculations on the individual channels. |
| HSL | Adjusting colors by hand or creating palettes | You can change lightness and saturation with a single number. |
| HSV / HSB | Matching values with color pickers in Photoshop or Figma | This is the model used by many design tools. |
| CMYK | For assets that will be printed | It's based on ink, not light. Colors look different than on a screen. |
Why HSL Is So Practical
How would you make `#4f46e5` 'a little darker' using HEX? It's not obvious how much to reduce each of the three channels. With HSL, it's simple: just lower the last number in `hsl(243, 75%, 59%)` to, say, 45%. Because the hue (H) and saturation (S) are unchanged, the color stays in the same family.
The 'Luminance Palette (50 → 900)' uses this exact property. It keeps the hue and saturation fixed while dividing the lightness into ten steps from 96% down to 16%. This is the same method used for color scales in modern design systems. Pick a single brand color, and you can instantly generate a full set of colors for backgrounds (50-100), borders (200-300), and body text (700-900).
- Hover states: Lowering the lightness of the base color by about 10% creates a natural hover effect.
- Disabled states: Drastically reducing saturation (like the 'Desaturated' swatch in the Monochromatic scheme) makes the color closer to gray while retaining a hint of the original hue.
- The complementary and analogous colors in the 'Color Scheme Suggestions' are made simply by rotating the HSL hue (H). If you need an accent color, pick the complementary color (180°). For a more stable combination, choose from the analogous colors (±30°).
What Does the WCAG 4.5:1 Contrast Ratio Mean?
Contrast ratio is a number from 1:1 (identical colors) to 21:1 (black and white) that represents the difference in brightness between two colors. The Web Content Accessibility Guidelines (WCAG) require a ratio of at least 4.5:1 for normal-sized text (Level AA). This number was chosen to be readable for someone with 20/40 vision—roughly the visual acuity of many middle-aged adults.
In other words, 4.5:1 isn't a standard just for users with disabilities. It benefits everyone, including people viewing screens in bright sunlight, using older monitors, or anyone over 40. This is why many government and public-sector websites are required to meet this standard.
- Light gray text (#999) on a white background has a ratio of about 2.85:1, which fails. This is one of the most common accessibility mistakes, often made in the name of 'looking sophisticated'.
- For a brand-colored button with white text, check the 'White text on this color background' row in the table. If your brand color is a pastel tone, it will likely fail. In that case, switch to black text or darken the background color (to a 600 or 700 value from the luminance palette).
- The 'Recommended Text Color' statistic helps you make this decision instantly. It tells you whether white or black provides better contrast.
| Guideline | Ratio | Applies To |
|---|---|---|
| AA (Normal Text) | 4.5:1 | Body text. The de facto minimum standard. |
| AA (Large Text) | 3:1 | Text that is 24px or larger, or bold and 18.66px or larger. |
| AAA (Normal Text) | 7:1 | A stricter level. Not always required. |
| UI Components & Graphics | 3:1 | Button borders, icons, input field boundaries. |
CMYK: Why Screen Colors Don't Print the Same
RGB creates color by adding light (additive; more light makes it brighter), while CMYK creates color by layering ink (subtractive; more ink makes it darker). The principles are opposite, and their expressible color ranges (gamuts) are different. Fluorescent-like colors on screen—vibrant blues, neon greens, bright oranges—cannot be reproduced with CMYK inks and will look noticeably duller in print.
The CMYK values in this tool are approximations calculated from a formula. Actual print results will vary depending on the paper, ink, and color profile used. You should not send these values directly to a printer as final artwork.
CSS Color Names and Workflow Tips
You can enter a name like `royalblue` into the 'CSS Color Name' field to convert it. Conversely, when you pick a color, this field will only be filled if there's an exact name match. If there isn't an exact match, the placeholder will show the closest name, prefixed with '≈'. This means it's an approximation; using that name in your code will result in a different color.
Many CSS color names are not intuitive, and some are downright misleading (`darkgray` is actually lighter than `gray`). While convenient for prototyping or debugging, it's better to use HEX values in production code.
- The input fields are format-agnostic. You can paste `rgb(79,70,229)` into the HEX field and it will work. You can also enter just the numbers, like `79, 70, 229`, and the tool will interpret them based on the context of that field.
- This tool does not include an eyedropper for picking colors from your screen. The intended workflow is to use your browser's developer tools, your OS's built-in color picker, or another utility to get a color's HEX code, then paste it here to analyze it, generate palettes, and check contrast.
Frequently asked questions
Does this tool support transparency (alpha channel)?
Yes. You can use transparent colors like `rgba(0,0,0,0.5)` or 8-digit HEX codes. While conversions reflect the alpha channel, the palette and scheme suggestions are based on the opaque version of the color.
Can I use the CMYK values for professional printing?
The CMYK values are mathematical approximations from RGB, useful for on-screen reference. For professional print jobs, use software with dedicated color profiles for accurate results.
How is the 'Luminance Palette' generated?
It's created by keeping your color's hue and saturation constant while adjusting the HSL lightness (L) value across 10 steps. This provides a tonally consistent scale, ideal for design systems.
What does the '≈' symbol in the 'CSS Color Name' field mean?
If your color doesn't exactly match a standard CSS color name, the tool finds the closest visual match and displays its name with the '≈' symbol to help you identify it.