Developer Tools
Choose a color visually or enter strict HEX, RGB or HSL notation. Copy normalized values, preview the rendered color, and compare its sRGB contrast against white and black without sending the value anywhere.
Color converted to #047857, rgb(4, 120, 87), and hsl(162.9deg, 93.5%, 24.3%).
Converted web color
- HEX
- #047857
- RGB
- rgb(4, 120, 87)
- HSL
- hsl(162.9deg, 93.5%, 24.3%)
These ratios compare one flat sRGB color pair. They do not by themselves establish an accessibility conformance result for a complete interface.
Simple workflow
How to use Color Picker & Converter
- 1Choose a color with the native picker or enter a HEX, rgb(...) or hsl(...) value.
- 2Select Convert color to validate and normalize the input.
- 3Review the swatch, copy any web format and use the black/white contrast ratios as a focused helper.
Good to know
Frequently asked questions
Does the converter accept three-digit HEX?
Yes. A value such as #fff is normalized to #FFFFFF before RGB and HSL are calculated.
How are HSL values rounded?
Hue, saturation and lightness are shown to at most one decimal place. RGB output uses whole 8-bit channels, so a rounded HSL round trip can differ slightly.
Does this version support alpha or CMYK?
No. Wave 3A supports opaque sRGB web colors in HEX, RGB and HSL. Alpha, CMYK and named colors are rejected rather than guessed.
Does the contrast helper prove accessibility?
No. It reports the WCAG sRGB contrast ratio against white and black only. Complete accessibility depends on text size, component state, context and more.
Practical guide
Pick one sRGB color and copy its HEX, RGB or HSL form
HEX and RGB both encode red, green and blue channels for web colors. HSL describes the same displayed color with hue, saturation and lightness controls. Conversion can round HSL values, so returning a rounded HSL value to RGB may differ by a channel value.
Three-digit HEX repeats each digit: #fff becomes #FFFFFF. The converter accepts strict HEX, rgb(...) and hsl(...) forms, rejects malformed or out-of-range channels, and normalizes copied output.
Worked example
Convert pure red
- Start with
- #FF0000.
- Choose
- Select Convert color.
- You get
- RGB is rgb(255, 0, 0) and HSL is hsl(0deg, 100%, 50%).
Tips for a useful result
- Use the native picker for a visual choice or type an exact supported value.
- Copy the format required by your stylesheet or design token.
- A contrast ratio checks one color pair; it does not audit an entire interface.
Rounding, contrast and privacy
RGB output uses whole 8-bit channels. HSL values are rounded predictably to one decimal place. The white and black contrast helpers use the WCAG relative-luminance formula for sRGB, without claiming broader accessibility conformance.
This version does not accept alpha, CMYK or named colors. Values stay in component state and are never placed in the URL, browser storage or analytics.
Authoritative external sources
- W3C: Understanding relative luminance (external)
Defines the relative-luminance and contrast-ratio concepts used by the optional helper.
Keep going