ColorPairLabSupported Color Formats and Input Errors
Use HEX, comma-separated RGB or HSL, or a CSS named color. This guide shows the accepted forms and how to fix common input errors.
Color Converter: HEX, RGB & HSL →The converter, contrast checker and palette editor use the same input rules. They accept opaque sRGB colors in the formats below; some color syntax supported by your browser falls outside this tool’s scope.
Choose a supported format
| Input form | Accepted example | Normalized result |
|---|---|---|
| Three-digit HEX | #abc or abc | #AABBCC |
| Six-digit HEX | #000080 or 000080 | #000080 |
| Integer RGB | rgb(0, 0, 128) | #000080 |
| HSL with percentages | hsl(240, 100%, 50%) | #0000FF |
| Standard CSS name | navy | #000080 |
| CSS alias | aqua | #00FFFF |
HEX accepts either letter case and expands to six uppercase digits. RGB channels must be integers from 0 to 255. HSL saturation and lightness need percent signs and values from 0 to 100. A finite hue wraps around the color wheel. Use commas in both RGB and HSL input.
Read the normalized value
Every accepted input becomes one eight-bit sRGB value. The preview, contrast result and export all use it. HSL may produce fractional RGB channels, which are rounded once to give the final hex value. Copy that hex value when you need an exact match.
Enter #abc to get #AABBCC, or RGB 170, 187, 204. Enter navy to get #000080. A palette with navy in its title may use a different dark blue; the CSS keyword always keeps its defined value.
Fix an input error
| Rejected input | Reason | Useful next step |
|---|---|---|
| #1234 or #112233FF | Alpha-bearing HEX is outside the opaque-input contract. | Supply the intended six-digit opaque value. |
| rgba(0, 0, 0, 1) | Alpha syntax is rejected even when alpha equals one. | Use rgb(0, 0, 0) for the explicit opaque color. |
| rgb(256, 0, 0) | A channel is out of range. | Correct the source value; it is not silently clamped. |
| hsl(120, 101%, 50%) | Saturation is outside 0–100%. | Use a value within the supported range. |
| color(display-p3 1 0 0) | The input describes another color space. | Obtain an intentional sRGB value from the design source. |
| var(--brand) or currentColor | The value depends on a separate CSS context. | Resolve the actual color value first. |
| transparent or a gradient | There is no single opaque flat color to evaluate. | Use a supported flat-color task or evaluate that context separately. |
Your entered text stays available to correct. Read the error before relying on a previous preview, then enter the intended value in a supported format. The tool does not discard an alpha channel, clamp an out-of-range value or guess an informal color name.
Why transparent colors are rejected
A transparent layer depends on the colors behind it. A gradient or photograph can put several backgrounds beneath the same text. Those cases need more information than a single foreground and background value, so the tool rejects them rather than showing a misleading ratio.
For Display P3, Lab, OKLCH, CMYK or ICC-managed values, make a deliberate sRGB conversion in the source tool first. ColorPairLab does not perform those conversions or match print colors. The same hex value can also look different on different displays.
Check your input with a known sample
- Set the foreground to #000000 and the background to #FFFFFF.
- Confirm a 21.00:1 ratio in the contrast checker.
- Try #777777 on white: the result is 4.48:1, with AA normal marked Fail.
- Return to your design colors once the format error is fixed.
Black and white check the contrast endpoints; the gray example shows the difference between a displayed ratio and a threshold decision. See the color-name and rounding guides for those topics in more detail.
Sources and further reading
Content reviewed: October 22, 2026