English
EnglishEspañolFrançaisDeutschPortuguês简体中文日本語한국어ItalianoРусскийTürkçeBahasa IndonesiaУкраїнськаالعربيةTiếng ViệtไทยNederlandsPolski
Skip to content
WebToolsHUB
Back to tools
Format Conversion Gradient Generator Contrast Check

Color Converter & Palette

Bidirectional HEX / RGB / HSL conversion, gradient generator, and accessible contrast check, all processed locally.

Share:
Privacy protection: All processing happens locally in your browser. No data is uploaded to any server, ensuring your privacy and data security.
🎨 Color Converter
🌈 Gradient Generator
♿ Contrast Check
Aa

How to convert and check colors

  1. Enter a color in any format — HEX, RGB or HSL — and the others update instantly.
  2. Copy the format your design tool or stylesheet needs.
  3. Generate a gradient from your color to explore tints and shades.
  4. Check the contrast ratio against white or black text to verify accessibility.

Frequently Asked Questions

Which color formats are supported?

HEX, RGB, and HSL convert bidirectionally in real time — entering any format syncs the others automatically.

Can gradients be exported?

Yes, copy the CSS linear-gradient code in one click.

How is contrast assessed?

Calculated with the WCAG relative-luminance formula, marking whether AA/AAA pass for body and large text.

Is data sent to a server?

No. All calculations happen in your browser.

What contrast ratio should I aim for?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA raises these to 7:1 and 4.5:1. The checker shows the ratio as you adjust the color.

What is the difference between HEX, RGB and HSL?

They describe the same color in different coordinate systems: HEX and RGB mix red, green and blue amounts, while HSL uses hue, saturation and lightness — which is far easier for building color variations.

Can I generate shades of one color?

Yes. The gradient generator steps the color toward white or black, giving you a ready-made palette for hover states and backgrounds.

Technical References

  1. WCAG Contrast — W3C: https://www.w3.org/TR/WCAG21/#contrast-minimum
  2. WCAG 2.1 — Understanding Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html