Color Converter

Convert between HEX, RGB, HSL, and HSB color formats with a live preview.

#3B82F6
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSB
hsb(217, 76%, 96%)
CSS
#3b82f6
Contrast vs White
Aa
3.68:1
AA Large
Contrast vs Black
Aa
5.71:1
AA
Shades (darker)
Tints (lighter)
AccessiDrop Ship accessible sites. Automated WCAG monitoring catches issues before your users do.
Free scanner →

Related Tools

TW Tailwind v3 → v4

Convert tailwind.config.js to Tailwind 4 @theme CSS syntax.

⇄ JSON ↔ YAML

Convert between JSON and YAML instantly.

⇄ JSON ↔ CSV

Convert flat JSON arrays to CSV and back.

From the makers of JSON Knife

SvelteUI Pro
45+ Svelte 5 components. Copy-paste into your project. From $49.
SvelteShip
Launch your SaaS faster. Auth, Stripe, dashboards — pre-built in SvelteKit. From $49.
MetaScrape API
Extract OG tags, metadata, and JSON-LD from any URL. Free tier included.
AccessiDrop
Accessibility monitoring for agencies. Free scanner. From $15/mo.
QuoteSnap
Professional quotes for tradespeople. Create, send, track. Free to start.

New tools every week

Get notified. No spam.

How to Convert Colors Between HEX, RGB, and HSL

CSS supports multiple color formats — HEX (#3b82f6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)). This color converter translates between all formats instantly and shows you contrast ratios for accessibility compliance.

Designers often provide colors in HEX, but HSL is more intuitive for programmatic color manipulation — adjusting lightness for hover states, generating shade scales, or creating consistent color palettes. This tool converts between all three formats and also shows HSB (used in design tools like Figma and Photoshop).

The built-in WCAG contrast checker shows whether your color meets accessibility standards against white and black backgrounds. A contrast ratio of 4.5:1 (AA) is the minimum for normal text, and 7:1 (AAA) is recommended. Shade and tint generators help you find accessible alternatives without leaving the tool.

Tips

  • HSL is the most intuitive format for creating color variations: keep hue constant, adjust saturation and lightness.
  • WCAG 2.0 requires 4.5:1 contrast ratio for normal text (AA) and 3:1 for large text. Test your colors before shipping.
  • CSS custom properties work great with HSL: --brand: 217 91% 60% lets you use hsl(var(--brand)) and adjust opacity.
  • Tailwind CSS color classes map to specific HEX values — use this tool to find the exact match for your design system.