START HERE
Getting started with HexCheck
HexCheck is designed as a connected color workspace. Find or capture a color, carry it in the header, add it to the tools you are already using, then save or export the result when you are ready.
The basic model
Think of HexCheck as several focused tools sharing one current color. The Color Utility inspects one color. Contrast Lab works with a pair. Palette Studio works with five swatches. Gradient Studio works with an ordered set of stops. The header connects those tools.
The active color in the header
The color button at the right side of the global header shows the active color. It is the color currently loaded in the Color Utility, not merely the most recently clicked swatch anywhere on the site.
Open that button to:
- Open Color in the Color Utility.
- Add to Contrast without discarding the existing comparison.
- Add to Palette while shifting older palette colors to the right.
- Add to Gradient as a new stop without rebuilding the gradient.
“Add” means preserve the existing workspace
| Action | What happens | What stays intact |
|---|---|---|
| Add to Contrast | The new color becomes the current background side. The prior background shifts to foreground. | Your selected AA or AAA correction target. |
| Add to Palette | The new color enters slot one. Existing colors shift right and the oldest overflow color drops off. | Locks travel with their colors; duplicates move to the front. |
| Add to Gradient | The new color becomes an additional stop. | Gradient type, angle, interpolation space, existing stops, and their order. |
Explicit shared URLs are different. Opening a shared palette, gradient, or contrast URL intentionally loads the state encoded in that URL for that visit.
Choose the best starting point
Enter it in the Color Utility or visit a permanent URL such as /8493aa.
Use Color Search for names, families, moods, styles, or an exact hex lookup.
Use the Camera and Image Picker, then open the selected color when you want to carry it across the site.
Browse Collections for brand, framework, interface, seasonal, cultural, and accessibility-oriented sets.
Use Website Scanner with a Pro account to inspect static HTML and linked stylesheets from a public URL.
What is free and what is Pro
The core checking and creation experience stays available without a subscription. Pro is primarily the persistent workspace and production layer.
| Free | Pro |
|---|---|
| Color lookup and permanent color URLs | Cloud-saved colors and synced workspace libraries |
| Contrast checking and accessible corrections | Saved comparisons, history, sharing, and CSS exports |
| Camera and image sampling | Image palette extraction, history, and developer formats |
| Gradient creation and previews | Saved gradients, sharing, CSS copy, and SVG download |
| 48 essential search colors and exact hex lookup | 240 additional names, aliases, moods, styles, CSS colors, sorting, and bulk actions |
| Browse public collections | Favorites, cloud saving, batch actions, and exports |
| Basic tool state in the current browser | Cross-device sync, saved libraries, Website Scanner, Brand Kits, and production exports |
Move around quickly
- Use the global search field to find colors and tools.
- Press
Ctrl Kor⌘ Kwhen the command search shortcut is shown in the header. - Use the More menu for Scanner, Brand Kits, Collections, and Guides.
- Use the account menu for Dashboard, settings, referrals, plan management, and sign out.
A useful first workflow
Open #8493AA in the Color Utility.
Review black and white contrast, then open Contrast Lab for a complete pair.
Open the header color menu and add the color to Contrast, Palette, or Gradient.
Change the tool state, leave the page, and return. HexCheck restores that tool independently.
Use Pro when the work needs cloud sync, a permanent library, or production output.