New: 🎨 Pixart POD Bundle — 155 AI designs + 7 digital products·More free tools by Noah AI Labs →
🎨
DevToolBox

Color Converter & Picker

Convert colors between HEX, RGB, HSL, CMYK, and HSV formats. Check contrast ratios, generate palettes, and copy CSS values instantly.

Color Picker

Format Converter

hex

#7C3AED

rgb

rgb(124, 58, 237)

hsl

hsl(262, 83%, 58%)

cmyk

cmyk(48%, 76%, 0%, 7%)

hsv

hsv(262, 76%, 93%)

WCAG Contrast Checker

Sample Text

The quick brown fox jumps over the lazy dog

5.70:1

Contrast Ratio

✓Normal AA
✗Normal AAA
✓Large AA
✓Large AAA

Palette Generator

Complementary

#7C3AED
#ACED3B

Analogous

#3B53ED
#7C3BED
#D53BED

Triadic

#7C3BED
#ED7C3B
#3BED7C

Split Complementary

#7C3BED
#EDD53B
#53ED3B

Tetradic (Square)

#7C3BED
#ED3B53
#ACED3B
#3BEDD5

Color Preview

#7C3AED

Nearest CSS color: blueviolet

CSS Output

/* CSS Variables */

--color-primary: #7C3AED;

--color-rgb: 124, 58, 237;

/* Tailwind Config */

'primary': '#7C3AED',

/* SCSS Variable */

$primary-color: #7C3AED;

All Values

HEX
#7C3AED
RGB
124, 58, 237
HSL
262, 83%, 58%
HSV
262, 76%, 93%
CMYK
48, 76, 0, 7

Frequently Asked Questions

How do I convert HEX to RGB?

Enter your HEX color code (e.g., #7C3AED) in the input field, and the tool will automatically convert it to RGB format (e.g., rgb(124, 58, 237)) along with HSL, CMYK, and HSV formats.

What is WCAG contrast ratio?

WCAG contrast ratio measures the difference in brightness between two colors. For accessibility, normal text needs a minimum ratio of 4.5:1 (AA) or 7:1 (AAA), while large text needs 3:1 (AA) or 4.5:1 (AAA).

What are complementary colors?

Complementary colors are opposite each other on the color wheel (180 degrees apart). They create high contrast and visual interest when used together, making them popular in design.

How do I generate a color palette?

Select a base color using the color picker, then use the Palette Generator section to create complementary, analogous, triadic, or split-complementary color schemes automatically.

What is the difference between RGB and CMYK?

RGB (Red, Green, Blue) is an additive color model used for screens and digital displays. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used for print. Colors may appear differently between the two systems.

How do I copy color values?

Click the Copy button next to any color format to copy it to your clipboard. You can copy HEX, RGB, HSL, HSV, or CMYK values with a single click and paste them directly into your code.