COLOR UTILITY
Inspect any color
The Color Utility is the center of the HexCheck workflow. It gives one color a permanent URL, makes it the active header color, and shows the most important information before you move it into a larger tool.
Load a color
You can type six hexadecimal digits into the large field, choose a color with the native picker, load a random color, click a related swatch, or open a permanent color URL.
Enter a value such as 8493AA. HexCheck updates the page background, results, URL, and active header color.
Every opaque six-digit color has a route such as https://hexcheck.app/8493aa. Letter case does not change the color.
Use the Pick control for a browser-native color chooser. For a photo or camera source, use the dedicated Picker instead.
Read the basic results
| Result | What it tells you | Availability |
|---|---|---|
| Best text | Whether pure black or pure white produces the stronger contrast against the active color. | Free |
| RGB | The red, green, and blue channel values for the same sRGB color. | Pro value and copy |
| HSL | A hue, saturation, and lightness representation of the same sRGB color. | Pro value and copy |
| Luminance | The relative luminance used by WCAG contrast calculations. | Pro value and copy |
| Advanced formats | CMYK, HSV, OKLCH, and generated CSS values in the More Color Tools dialog. | Pro |
Different notations can describe the same displayed color. A conversion is useful for implementation or communication, but it does not create a new color by itself.
Use the contrast section as a quick check
The black and white chips show the ratio between the active color and pure white or pure black. Use this to choose a likely text direction quickly.
- A ratio of
4.5:1is the WCAG 2.2 Level AA minimum for most text. - A ratio of
3:1applies to large text and many required non-text interface cues. - A ratio of
7:1is the enhanced Level AAA threshold for most text.
Select Compare or AA / AAA to open the full Contrast Lab when you need a real foreground/background pair, target-specific corrections, or complete results.
Carry the active color through the site
The header color button always follows the color loaded in the Color Utility. Open it to use the current color elsewhere:
- Open Color returns to its permanent Color Utility page.
- Add to Contrast adds it to the existing comparison instead of resetting the pair.
- Add to Palette places it first and shifts the existing swatches to the right.
- Add to Gradient creates another stop while preserving the existing gradient.
Developer values and CSS export
Open the three-dot menu to access advanced color representations, the full accessibility table, saved colors, recent colors, and developer export.
:root {
--color: #8493AA;
--color-rgb: 132 147 170;
}The exact generated output depends on the active color and selected feature. Production-ready values and copying are protected Pro outputs; the basic hex value remains free.
Practical tips
- Use the permanent URL when asking someone to review one exact color.
- Check both black and white, then test the actual text color you plan to use.
- Use Related Colors to explore, not to skip hierarchy and accessibility decisions.
- Open a sampled Picker color before adding it to other tools.
- Use the header menu when you want to preserve an existing Palette, Gradient, or Contrast workspace.