Color Converter
HEX, RGB, HSL & LAB conversion + WCAG contrast checker + smart palettes
Color Picker
Manual entry (RGB / HSL / LAB)
HSL Sliders
Format Conversion
Color Palette Generator
Auto-generate harmonious combinations based on color theory — each has a suggested real-world use.
WCAG 2.1 Contrast Checker
Check whether text on this background meets accessibility standards.
Recently Used Colors
Color Breakdown Chart
About This Color Converter
A professional color format converter supporting HEX, RGB, HSL and LAB (CIELAB) conversions. All formulas are verified against the W3C CSS Color Module Level 3/4 and CIE L*a*b* standards. Built-in WCAG 2.1 contrast checking helps designers and developers ship accessible interfaces, and the color-theory palette generator produces harmonious combinations in seconds.
How to Use
- Click the preview swatch to pick a color, or type a HEX/RGB/HSL/LAB value directly.
- Fine-tune with the HSL sliders for hue, saturation and lightness.
- Read the converted HEX/RGB/HSL/LAB values and copy any one — or copy all formats at once.
- Pick a palette type (complementary, analogous, etc.) and copy the whole set as CSS variables.
- Use the contrast checker to confirm text/background pairs meet WCAG 2.1 AA/AAA.
- Click any history swatch to instantly recall a recent color.
Core Features
- HEX ↔ RGB ↔ HSL ↔ LAB conversion, verified against W3C/CIE references (error < 1%)
- WCAG 2.1 contrast ratio with AA / AAA pass-fail badges and a plain-language verdict
- 5 color-theory palette types, each with a real-world usage hint
- One-click "copy all formats" and "copy palette as CSS variables"
- Per-swatch dual actions: copy HEX or set as current color, without accidental overwrite
- Color history (last 10) and shareable URL round-trip
Applications
• Web design: quickly convert CSS color formats for visual consistency
• UI/UX design: check interface contrast against accessibility guidelines
• Brand design: generate harmonious brand color palettes
• Front-end development: get precise RGB/HSL/LAB values for code
• Print/graphic design: build coordinated color combinations
• Accessibility testing: verify text contrast meets WCAG 2.1
Pro Tips
- Hue: determines the color family. 0°=red, 120°=green, 240°=blue.
- Saturation: controls vividness. 0% = grayscale, 100% = pure color.
- Lightness: 50% is standard, 0% is black, 100% is white.
- WCAG AA: normal text needs ≥4.5:1, large text needs ≥3:1.
- Complementary palettes suit high-contrast designs like CTA buttons.
- Analogous palettes suit soft, harmonious styles like background gradients.
