CodeMon Tools

Color Converter — HEX, RGB, HSL, CMYK

Convert colors between formats instantly. Pick colors visually, match Tailwind classes, and check WCAG accessibility contrast.

Visual Color Picker
Color Values

Code Snippets

CSS HEX#FF5733
CSS RGBrgb(255, 87, 51)
CSS HSLhsl(11, 100%, 60%)
Tailwindbg-[#FF5733]
Swift UIColorUIColor(red: 1.000, green: 0.341, blue: 0.200, alpha: 1.00)
AndroidColor.rgb(255, 87, 51)
Javanew Color(255, 87, 51)
Tailwind CSS Match

No exact match — create custom palette

WCAG Accessibility
vs White: 3.15:1AA AAA
vs Black: 6.66:1AA AAA
vs Custom: 3.15:1AA AAA
Sample Text — White BG
Sample Text — Black BG
Sample Text — Custom BG
Color Harmony
Current

Frequently Asked Questions

How do I convert HEX to RGB?

Enter a HEX color code (e.g., #FF5733 or FF5733) in the HEX field above. The RGB, HSL, and CMYK values will update instantly. Each pair of hex digits represents red, green, and blue channels (0-255).

What is the difference between RGB and HSL?

RGB defines colors by Red, Green, and Blue channel intensities (0-255). HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%), which is often more intuitive for designers adjusting color properties.

How does WCAG contrast checking work?

WCAG contrast ratio measures readability between foreground and background colors. A ratio of 4.5:1 (AA) is required for normal text, and 7:1 (AAA) for enhanced accessibility. This tool calculates ratios against white, black, and any custom background.

What is CMYK used for?

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print. Converting from RGB to CMYK helps when preparing designs for physical printing, though exact results depend on the printer profile.

How do I find the closest Tailwind CSS color?

This tool automatically finds the nearest Tailwind default palette color using CIE LAB color distance. The top 3 matches with their distance scores are shown. If no close match exists, you can create a custom palette.

What are color harmonies?

Color harmonies are combinations that look pleasing together. Complementary colors sit opposite on the color wheel (180°), analogous are neighbors (±30°), triadic are equally spaced (120°), and split-complementary uses colors adjacent to the complement.

Related Tools

JSON Formatter

Format, validate, and beautify JSON with tree view and TypeScript type generation.

Regex Tester

Test regular expressions with real-time matching, capture groups, and code snippets.

UUID Generator

Generate UUID v4, v7, ULID, and Nano ID with bulk generation and format options.

Base64 Encoder/Decoder

Encode and decode text, images, and files to Base64 with real-time conversion.