Color Converter

When this tool helps

Translate a design token from hexadecimal into RGB or HSL while building an app theme. Use the result as a color value, then evaluate contrast separately in the actual UI.

How to use this tool

Accepts three- or six-digit hexadecimal colors. HSL expresses hue, saturation, and lightness; RGB expresses red, green, and blue channel values. Alpha channels are not included.

A worked example

Input

#087f5b

Expected result

HEX: #087F5B
RGB: rgb(8, 127, 91)
HSL: hsl(162, 88%, 26%)

Enter three or six hexadecimal digits, with or without #. A short value such as #0f8 expands to #00ff88. HSL values are rounded for display, so converting them back can introduce small differences.

Edge cases and limitations

• Eight-digit alpha colors are not accepted. This tool only converts opaque RGB colors.
• Flutter Color(0xFF087F5B) uses an explicit opaque alpha byte before the RGB bytes; do not confuse it with CSS alpha ordering.
• HSL lightness is not a contrast score. Similar lightness percentages do not guarantee readable text.

Use the result in your app

Apply the token in both light and dark themes and check text contrast, disabled states, and selected controls. Keep the original hex value when exact round-trip fidelity matters.

Keep your workflow private

This utility processes input only in this tab. It does not upload or persist pasted content. Review generated output before using it in a production application.