Color Converter
Convert between HEX, RGB, HSL and HSV instantly. Shade palette, related colours and WCAG contrast. 100% in the browser.
#A78BFA
rgb(167, 139, 250) · hsl(255°, 92%, 76%)
--color: #a78bfa;Text on white
2.72:1
Text on black
7.72:1
AA = 4.5:1 normal text · AAA = 7:1 normal text (WCAG 2.1)
How to use the colour converter?
- 1
Enter a colour
Type a HEX code directly in the text field (with or without #), move any RGB, HSL or HSV slider, click the palette icon to open the native browser colour picker, or press 🎲 to generate a random colour.
- 2
Explore all formats simultaneously
As soon as you enter or change a colour, all formats update instantly: HEX, RGB with its R/G/B components, HSL with hue/saturation/lightness, HSV with hue/saturation/value, and the CSS variable ready to copy.
- 3
Use the shade palette and related colours
The shade palette shows 9 variations of the current colour varying lightness from 10% to 90%. Click any shade to load it. Related colours show analogous (±30°), complementary (+180°) and triadic (+120°) — click any to select it.
- 4
Check WCAG contrast and copy the value
The WCAG 2.1 contrast panel shows the contrast ratio of the colour on white and black backgrounds, indicating whether it meets AA (4.5:1) and AAA (7:1) levels for normal text. Use the copy buttons (⎘ icon) in each section to copy the formatted value to the clipboard.
Frequently asked questions
What is the difference between HSL and HSV?
Both use the same Hue component (H, 0–360°) to represent the colour from the spectrum. The difference lies in the other two components: HSL uses Saturation (purity) and Lightness (where 50% is the pure colour, 0% black and 100% white), while HSV uses Saturation and Value (where 100% is the pure colour at maximum brightness, 0% black). HSL is more intuitive for CSS; HSV is more common in design software like Photoshop.
What does the WCAG contrast ratio mean?
The contrast ratio measures the difference in luminance between text and background, according to the WCAG (Web Content Accessibility Guidelines) formula. A ratio of 4.5:1 or above meets level AA (normal text), and 7:1 or above meets level AAA. These thresholds ensure that people with low vision or colour blindness can read the content correctly. White has a luminance of 1.0 and black 0.0.
How is relative luminance calculated?
Relative luminance is calculated from linearised RGB components: L = 0.2126·R + 0.7152·G + 0.0722·B, where each component is linearised with the gamma function: v ≤ 0.03928 → v/12.92, otherwise → ((v+0.055)/1.055)^2.4. The weights reflect the human eye's sensitivity to each colour: green contributes 71.5% of perceived luminance, red 21.3% and blue only 7.2%.
Why doesn't the Hue (H) change when Saturation is 0?
When Saturation is 0%, the colour is a neutral grey regardless of the hue. Mathematically, converting a grey to HSL gives H=0° arbitrarily. To prevent the hue from 'jumping' when moving saturation back up, the converter remembers the last meaningful hue and displays it when S=0. So if you had H=200° and lower S to 0%, going back up restores H=200°.
Do the analogous and complementary colours use the same brightness as the original?
Yes, related colours use exactly the same Saturation and Lightness as the current colour, varying only the Hue. The left analogous uses H−30°, the right analogous H+30°, the complementary H+180° and the triadic H+120°. This allows you to compare the true harmony between colours. If the original colour has low saturation, the related colours will also have low saturation, appearing as similar grey tones.
Embed the converter in your site
You can embed this colour converter in any website with an iframe. It is free, works offline and requires no additional JavaScript.
Iframe (direct integration):
<iframe src="https://miguelacm.es/embed/color-converter" width="100%" height="800" style="border:none;border-radius:12px;" title="Color Converter — miguelacm.es" loading="lazy"></iframe>Link with attribution:
<a href="https://miguelacm.es/es/tools/color-converter" target="_blank" rel="noopener">Free color converter by MACM</a>