Color Code Translator & Contrast Matrix
Convert two hex colors to sRGB, CIE LCh, a WCAG contrast ratio, and a row of LCh mixes.
🔒 Processed entirely in your browser — nothing you enter here is ever uploaded.
The result appears on this page after you run the tool. Nothing you enter is uploaded.
Result
About this tool
Two color inputs start at #8B5CF6 and #1e1b4b. Changing either one, or the blend-step slider, reruns the conversion. The report's first block is color 1. HEX echoes the picker. RGB splits the hex into bytes. #8B5CF6 is 139, 92, 246. LCh is printed as lch(L% C H) with L and C to one decimal and H rounded to a degree. For that violet the page prints lch(51.6% 88.5 307). Color 2, #1e1b4b, is rgb(30, 27, 75) and lch(13.0% 34.2 300). The path is sRGB companding, then the matrix in the script with D65-style white points Xn 95.047, Yn 100, and Zn 108.883, then Lab, then chroma as the square root of a²+b² and hue from atan2. It is CIE LCh, not OKLCh. A three-digit hex is expanded by doubling each digit before the integer parse.
Contrast uses WCAG relative luminance. Each channel is divided by 255, then the sRGB companding threshold 0.03928 picks either a divide by 12.92 or the 2.4-power curve. Luminance is 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (lighter + 0.05) / (darker + 0.05), printed to two decimals. The default pair prints 3.78 : 1. White against black prints 21.00 : 1. The AA row passes when the ratio is at least 4.5, which is the WCAG AA threshold for normal text. The second row passes when the ratio is at least 7. That is the WCAG AAA threshold for normal text. The English label used to say large text. The comparison in the code is 7, so the label now says normal text. Large-text AA is 3:1 and large-text AAA is 4.5:1, and neither of those is a separate row.
The sample under the numbers paints the second color as the background and the first as the text, with a heading and a short sentence. It is a preview of those two CSS colors, not a screenshot of a standards test. The blend row converts both colors to LCh, then for each step from 0 to the step count it linearly mixes L, C, and hue. Hue is mixed in a way that follows the two stored angles. Each step is converted back through Lab and XYZ to a hex chip. The number of chips is the slider value plus the way the loop counts. The chips are not a perceptual-uniform OKLab ramp, because the space is the same CIE LCh as the readout. There is no CMYK, no named CSS color list, and no display-P3 input. The pickers supply sRGB hex. Out-of-gamut handling on the way back from LCh clamps through the RGB conversion in the script. The page does not claim a laboratory measurement of your monitor. The ratio is the standard sRGB math, which is what WCAG asks for, not a reading from a colorimeter. Copy takes the text report. The contrast badges and the chips sit beside it.
Example. #8B5CF6 is rgb(139, 92, 246) and lch(51.6% 88.5 307). #1e1b4b is rgb(30, 27, 75) and lch(13.0% 34.2 300). Their contrast prints as 3.78 : 1, which fails both the 4.5 AA row and the 7 AAA row.
Limit. LCh is CIE Lab LCh with the D65 white point in the script, not OKLCh. AA is a 4.5:1 test and AAA is a 7:1 test, both for normal text. Large-text thresholds are not separate rows.
What do the two default colors convert to?
#8B5CF6 is rgb(139, 92, 246) and lch(51.6% 88.5 307). #1e1b4b is rgb(30, 27, 75) and lch(13.0% 34.2 300). Contrast is 3.78 : 1. White on black is 21.00 : 1. The LCh numbers use the sRGB, XYZ, and Lab steps in the script, with white point 95.047, 100, 108.883.
Which WCAG tests are the pass and fail rows?
The first row passes at 4.5:1 or more. That is AA for normal text. The second row passes at 7:1 or more. That is AAA for normal text. The page does not also test the large-text bars of 3:1 and 4.5:1. A ratio of 3.78 fails both rows.
Is the LCh value OKLCh?
No. Chroma is the square root of Lab a² + b², and hue is atan2 of those Lab axes. The blends step through that LCh and convert back to hex. They are not OKLab mixes, and the page does not take a Display P3 color.
Does the contrast sample measure my screen?
No. The ratio is computed from the sRGB hex values with the WCAG luminance formula. The colored sample is just those two CSS colors. A colorimeter reading of a particular monitor is not part of the page.