TToolza
Toolza guides / developer

Convert HEX, RGB and HSL Color Values

Convert an opaque screen colour between supported representations without assuming the utility validates every CSS colour syntax.

Prepared for ToolzaPublished · Updated
Use the interactive tool ↓

Start with a supported input form

The converter accepts three- or six-digit hexadecimal values and basic integer RGB-style input. It outputs HEX, RGB and HSL representations. It does not accept every CSS color function, colour name, wide-gamut space or HSL input form.

Try it here

Color Converter

Processed on your device. Your files never leave your browser.
HEX#2563eb
RGBrgb(37, 99, 235)
HSLhsl(221, 83%, 53%)
Open the standalone Color Converter tool →

Check a simple colour by hand

Enter #ff0000. The RGB output should be rgb(255, 0, 0) and the HSL output should be hsl(0, 100%, 50%). Short HEX #f00 expands to the same opaque red.

For Toolza’s familiar #2563eb, the input represents red 37, green 99 and blue 235 in the ordinary 8-bit RGB representation. Different notation does not create a different colour; it expresses the same channel values in another form.

  1. Paste a supported HEX or integer RGB value.
  2. Compare the preview swatch with the expected colour.
  3. Copy the required representation using its row’s copy control.
  4. Test the value in the actual browser or design destination.

Know where information is lost

The implementation rounds RGB channels and HSL percentages for display. A round trip through a rounded representation can therefore differ slightly from the original. The parser is permissive for some RGB-like strings; it is not a complete CSS grammar validator.

Alpha is not preserved. Even when an rgba(...)-style input is recognised, the tool uses the RGB channels and does not output the input transparency. Eight-digit HEX and modern colour-space conversions are outside this workflow. Composite transparent colours over their actual background in a suitable design tool when that is your real task.

Separate conversion from accessibility

A preview swatch does not show whether text will have sufficient contrast on a particular background. This utility does not compute a contrast ratio, evaluate font size or certify an accessible palette. Check foreground/background pairs in an appropriate contrast workflow.

Troubleshoot a rejected or surprising colour

Remove surrounding code or a CSS declaration and try the plain value first. If an HSL value is rejected, remember that HSL is an output format here, not a supported input mode. Check copied punctuation and channels rather than changing the entire design palette. Text Diff can help review a small before/after set of design tokens without confusing a conversion with a broader colour-system migration.