Skip to main content
Palette

HEX, RGB and HSL Color Converter

Convert opaque sRGB colors among 3/6-digit HEX, legacy comma-separated integer RGB, and percentage HSL, then build algorithmic classic, pastel, or vibrant shade ramps. Designed for designers, front-end developers, and accessibility testers who need precise color format conversion and palette generation in one place.

#6366f1
SELECT COLOR
Live Color Stage

CSS Outputs

HEX CODE
#6366f1
RGB VALUE
rgb(99, 102, 241)
HSL FORMAT
hsl(239, 84%, 67%)
TAILWIND UTILITY STYLE
bg-[#6366f1]

Computed Shades & Core Weights (Wind)

Click a swatch to apply as converter base color.

50
#eff0fe
100
#d8d9fc
200
#b1b3f8
300
#9294f5
400
#7a7df3
500
#6366f1
600
#595cd9
700
#4a4db5
800
#3b3d91
900
#282960
950
#191a3c

In brief

Translate the exact color syntaxes this workspace accepts, copy CSS values or a Tailwind arbitrary-value class, and treat generated 50–950 shades as custom—not official Tailwind palette tokens.

What this tool supports

  • Opaque #RGB and #RRGGBB hexadecimal input.
  • Legacy rgb(r, g, b) integers from 0 through 255.
  • Legacy hsl(h, s%, l%) with hue 0–360 and saturation/lightness 0–100.
  • Copyable HEX, RGB, HSL, and bg-[#rrggbb] Tailwind arbitrary-value output.
  • Eleven custom shade weights from 50 to 950 in classic, pastel, or vibrant generation modes.

How to use HEX, RGB and HSL Color Converter

Complete a verifiable HEX, RGB and HSL Color Converter workflow in this browser.

  1. 1

    Step 1

    Provide the exact input

    Enter a supported HEX, RGB, or HSL value, or use the native color picker.

  2. 2

    Step 2

    Set the available controls

    Choose the matching format tab; modern space syntax, alpha channels, named colors, HWB, Lab, and OKLCH are not parsed.

  3. 3

    Step 3

    Run the operation

    Press Convert or select a random color, then choose a shade-generation mode.

  4. 4

    Step 4

    Verify the result

    Compare the displayed HEX/RGB/HSL values and preview; check contrast separately because this tool does not calculate accessibility ratios.

  5. 5

    Step 5

    Continue or export

    Copy the exact value or custom shade required by CSS; document that shade numbers are generated, not Tailwind defaults.

Common mistakes

Entering rgb(255 128 0 / 50%)

Consequence: The UI marks modern CSS Color 4 syntax invalid because it accepts only the legacy comma form without alpha.

Fix: Use rgb(255, 128, 0) here or preserve modern syntax in a standards-aware CSS tool.

Calling the shade ramp “the Tailwind orange palette”

Consequence: Generated colors can differ from Tailwind’s curated named palette.

Fix: Call it a custom 50–950 ramp and copy the emitted arbitrary-value class.

Using visual similarity as an accessibility check

Consequence: Two colors that look distinct may still fail required contrast.

Fix: Measure contrast with a dedicated WCAG-aware checker before shipping UI colors.

Best practices

  • Keep the original notation when exact authoring precision matters.
  • Use #ff8000 → rgb(255, 128, 0) → hsl(30, 100%, 50%) as a known conversion vector.
  • Label generated shade ramps as custom and review every shade against its intended foreground.
  • Test final CSS in the target browsers and color profiles.

Connected workflows

Browser limitations

  • Alpha channels and modern CSS space-separated functions are unsupported.
  • All conversions are rounded to 8-bit sRGB integers and integer HSL percentages, so round trips can lose precision.
  • Native input[type=color] presentation and color-management rendering vary by browser and display.

Authoritative resources

CSS Color Module Level 4Publisher: W3C · Reviewed: 2026-07-26HTML Standard: Color statePublisher: WHATWG · Reviewed: 2026-07-26

Concrete examples

Input
#ff8000
Result
rgb(255, 128, 0); hsl(30, 100%, 50%); bg-[#ff8000]

The opaque sRGB channels are 255, 128, and 0; the implementation rounds their HSL representation to 30°, 100%, 50%.

Frequently asked questions

Why is an 8-digit HEX color rejected?

The parser accepts only #RGB and #RRGGBB, so #RRGGBBAA alpha notation is outside this workspace.

Does it accept rgb(255 128 0)?

No. Only legacy comma-separated rgb(255, 128, 0) is accepted.

Are the 50–950 shades official Tailwind colors?

No. They are locally generated variations around the selected base color.

Can it verify WCAG contrast?

No. It previews color but does not compute contrast ratios or pass/fail thresholds.

Why can HSL differ after a round trip?

The converter rounds sRGB and HSL components to integers.

Are colors or palette choices sent to a server?

No. The conversion and ramp generation are local browser calculations.

Privacy and offline behavior

Color parsing, numeric conversion, random selection, shade generation, previews, and copying occur in this browser. No color values are uploaded. After static assets are cached the converter works offline; clipboard remains an explicit action.