Color Converter
Convert colors between HEX, RGB, and HSL formats instantly. Visual color preview, WCAG contrast checker, and generated palette. All processing runs locally in your browser.
🔒 All processing happens locally in your browser — nothing is stored or sent to any server.
All processing happens locally in your browser — nothing is stored or sent to any server.
How to Use This Color Converter
- Enter a color in any format — HEX, RGB, or HSL — and all other formats update instantly as you type.
- Use the color picker (the square swatch below the preview) to visually select any color.
- The contrast preview shows how your color looks on white and black backgrounds, with WCAG contrast ratios.
- Click any swatch in the generated palette to use that color as your base.
- Copy any format with one click.
About Color Formats
HEX, RGB, and HSL are three different ways to represent the same thing — a color. HEX codes like #3B82F6 are compact and widely used in CSS and HTML. RGB like rgb(59, 130, 246) explicitly names the red, green, and blue channels. HSL like hsl(217, 91%, 53%) is the most human-readable — you can intuitively guess that increasing the Lightness will make a color lighter, or rotating the Hue will cycle through the rainbow.
The WCAG (Web Content Accessibility Guidelines) contrast ratio is critical for web accessibility. Text must be readable against its background — low contrast is a common accessibility failure. This tool calculates the contrast ratio against both white and black backgrounds using the official WCAG formula, so you know immediately whether your color combination passes accessibility standards.
The palette generator is useful for building cohesive color schemes. It produces complementary colors (opposite on the color wheel), analogous colors (adjacent on the wheel), and lightness/saturation variations — giving you a full palette from a single base color. All processing is instant and local.
Frequently Asked Questions
What is a HEX color code? ▼
A HEX color code is a hexadecimal representation of RGB colors used in web design. It starts with <code>#</code> followed by 6 characters (or 3 for shorthand), like <code>#3B82F6</code>. Each pair of characters represents the Red (00-FF), Green (00-FF), and Blue (00-FF) intensity. HEX codes are the most common way to specify colors in CSS, HTML, and design tools.
What is RGB color? ▼
RGB (Red, Green, Blue) is an additive color model where each color is defined by the intensity of red, green, and blue light. Values range from 0 (none) to 255 (full intensity). <code>rgb(59, 130, 246)</code> represents the same blue as <code>#3B82F6</code>. RGB is commonly used in design software, CSS, and image formats.
What is HSL color? ▼
HSL (Hue, Saturation, Lightness) is a more intuitive color model. <strong>Hue</strong> is the color angle on the color wheel (0-360 degrees), <strong>Saturation</strong> is the color intensity (0-100%), and <strong>Lightness</strong> is the brightness (0-100%). HSL makes it easy to find tints, shades, and tones of a color by adjusting just one value.
What is the WCAG contrast ratio? ▼
The WCAG contrast ratio measures how distinguishable text is from its background. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast). WCAG 2.1 requires a minimum of 4.5:1 for normal text and 3:1 for large text to be accessible. This tool shows the contrast ratio against both white and black backgrounds so you can choose readable text colors.
How does the palette generator work? ▼
The palette generates color variations based on the selected color: lighter and darker variants (by adjusting lightness), more saturated and desaturated variants (by adjusting saturation), and complementary and analogous colors (by rotating the hue). Click any swatch in the palette to use that color, making it easy to build cohesive color schemes.
Is my color data sent to a server? ▼
No. All color conversion, contrast calculation, and palette generation happens instantly in your browser using JavaScript. No data is uploaded, stored, or transmitted anywhere. The color picker uses your browser is native HTML color input — no external services are involved.
What is the difference between HEX and RGB? ▼
Both represent the same color but in different formats. HEX uses base-16 notation (0-9 and A-F) to specify RGB values compactly. RGB uses decimal numbers (0-255) for each channel. <code>#FF5500</code> is the same as <code>rgb(255, 85, 0)</code>. HEX is more concise and common in CSS; RGB is more human-readable and used in design tools. Both are equally valid.