Developer Tools

Free Color Code Converter — HEX, RGB, HSL, CMYK & Color Schemes

Convert colors between all formats instantly. Generate tints, shades, complementary/analogous/triadic color schemes, and check WCAG accessibility contrast ratios.

#6C3AFF
H255°
S100%
L61%
Alpha100%
Nearest CSS color: blueviolet

All Color Formats

HEX#6C3AFF
RGBrgb(108, 58, 255)
RGBArgba(108, 58, 255, 1)
HSLhsl(255, 100%, 61%)
HSLAhsla(255, 100%, 61%, 1)
HSVhsv(255, 77%, 100%)
CMYKcmyk(58%, 77%, 0%, 0%)
CSS Var--color-primary: #6C3AFF;

WCAG Contrast Checker

White text5.70:1
Black text3.69:1
✓ WCAG AA✗ WCAG AAABest on white background

Tints & Shades

Tints (mixed with white)
Shades (mixed with black)

Color Schemes

#386aff
225°
#6a38ff
255°
#cd38ff
285°

How to Use the Color Code Converter

1
Pick or enter a color
Click the color picker or type any HEX code. All format conversions (RGB, HSL, CMYK etc.) update instantly.
2
Copy in any format
Hover over any format row and click Copy to grab the value. Use the CSS variable format for design system tokens.
3
Generate tints & shades
Click any swatch in the tints or shades row to update the main color. Build a complete scale for your design system.
4
Check accessibility
The WCAG contrast checker shows whether your color meets AA or AAA standards for text on white or black backgrounds.

❓ Frequently Asked Questions

What is the difference between HEX, RGB and HSL color formats?+
HEX (#RRGGBB) represents colors as hexadecimal values for red, green and blue channels. It's the most common format in web development. RGB (Red, Green, Blue) uses decimal values from 0–255 for each channel and is more readable. HSL (Hue, Saturation, Lightness) represents color as its hue angle (0–360°), how saturated it is (0–100%) and how light it is (0–100%). HSL is the most intuitive for humans because adjusting saturation or lightness doesn't require understanding RGB arithmetic.
What is the difference between HSL and HSV?+
Both HSL and HSV use Hue and Saturation, but differ in the third component. HSL uses Lightness, where 50% is a pure color, 0% is black, and 100% is white. HSV uses Value (also called Brightness), where 100% is a pure color and 0% is black — HSV cannot produce white without also setting saturation to 0. HSL is preferred for CSS. HSV is more common in image editing tools like Photoshop because it better matches how artists intuitively think about color.
What is CMYK and when should I use it?+
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in color printing. Unlike RGB which adds light, CMYK subtracts light using ink on paper. CMYK is used by professional print designers and print shops. When designing anything that will be physically printed — business cards, brochures, packaging — you should use CMYK values. Web and screen designs use RGB. Note that CMYK has a smaller gamut than RGB, so some bright screen colors cannot be perfectly reproduced in print.
What is WCAG contrast ratio and why does it matter for accessibility?+
WCAG (Web Content Accessibility Guidelines) contrast ratio measures how distinct a text color is from its background, on a scale of 1:1 (identical) to 21:1 (black on white). WCAG 2.1 requires: Level AA — at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). Level AAA — at least 7:1 for normal text. Poor contrast makes text illegible for people with low vision or color blindness — roughly 8% of men have some form of color blindness. Always check contrast before publishing.
What are tints and shades, and how are they generated?+
A tint is a color mixed with white — increasing lightness while keeping hue constant. A shade is a color mixed with black — decreasing lightness. In HSL color space, tints are generated by increasing the L value toward 100% and shades by decreasing it toward 0%. A tone is a color mixed with grey (adjusting saturation as well). Our tool generates 10 tints and 10 shades for any color by incrementally adjusting HSL lightness, giving you a complete palette suitable for design systems and CSS variable sets.