Contrast on every stop
The ratio, the pass/fail verdicts, and the text color that belongs on it. No separate checker, no copying hexes into another tab.
| 100 | 15.13:1 | AAA | |
|---|---|---|---|
| 500 | 4.63:1 | AA | |
| 900 | 16.03:1 | AAA |
Read a site's design. Forge your own.
Four tools that share one color engine: forge a contrast-checked ramp, pull a design system out of any URL as a Design.md, audit a page's images, and run PageSpeed Insights. Start with the ramp — it is right here.
Start from
Ramp
Click a stop to copy hex
Stops
11
#1F6FEBBase
AA pass
- Stops
- 11
- Meet AAA
- 8/11
- Base ratio
- 4.63:1
Whatever you set here is waiting for you in the forge. Click any stop to copy it.
Four tools, one color engine.
Every contrast figure in every tool comes from the same code, so a number means the same thing wherever you read it.
Color ramps with contrast
50–950 · 4 export formats
One hex in, an 11-stop 50–950 ramp out, with the WCAG ratio and the right text color on every stop. Exports to CSS variables, a Tailwind theme block, SCSS or JSON.
Runs entirely in your browser.
Any site's design, as a Design.md
Up to 8 stylesheets read
Fetches a URL and the stylesheets it links, then harvests the palette, type, spacing, radii, shadows, breakpoints and custom properties — and writes a detailed document you can download.
Sends the URL to the server. No JavaScript is executed.
Image audit
Up to 28 files, 6 at once
Every source a page references, from img and srcset through picture, posters, icons, social cards and url() — with real file sizes, formats and missing alt text. Exports as CSV.
Sends the URL to the server, then weighs up to 28 files.
PageSpeed Insights
4 category scores · mobile + desktop
A real Lighthouse run: the four category scores, Core Web Vitals, Chrome UX Report field data where Google has it, and the audits worth fixing first, biggest saving first.
Sends the URL to Google's API through our server.
The forge's math, not a marketing claim.
Three things most palette tools leave out — proven with the actual output, generated by the same code that runs the forge above.
OKLCH that round-trips
Computed through the real Oklab transform, not approximated from luminance. Convert out and back and you get the byte you started with.
In
#1F6FEB
Out
oklch(0.5686 0.2023 259.67)
Four ways out
CSS variables, a Tailwind v4 theme block, SCSS, or JSON. Each stop keeps its contrast figure beside it, so a reviewer never has to open this tool.
:root {
--brand-50: #f4f7fb; /* 19.54:1 on #000000 */
--brand-100: #cddcf3; /* 15.13:1 on #000000 */
--brand-200: #9cbff6; /* 11.20:1 on #000000 */
--brand-300: #71a4f2; /* 8.29:1 on #000000 */
--brand-400: #4788ef; /* 6.04:1 on #000000 */Four steps, in this order.
Step 1 of 4
Set a color
Drag the RGB faders or paste a hex. Each fader shows what that channel does to the color you already have, so you can see the consequence before you commit to it.
Step 2 of 4
Read the ramp
Stops are drawn as one continuous scale rather than separated cards, because a gap between swatches hides how close two neighbouring steps really are.
Step 3 of 4
Check the contrast
Every stop reports its WCAG ratio, its AA / AA-Large / AAA verdicts, and whether black or white text belongs on it. The row reads as an instruction.
Step 4 of 4
Take it to your code
Copy any single value, or export the whole ramp as CSS variables, a Tailwind v4 theme block, SCSS or JSON — each one carrying its contrast figures in a header comment.
For sites that style themselves in JavaScript.
Extract reads a page's CSS from the server, which cannot run script. The extension runs inside the page you are looking at and reads the styles the browser actually applied — so it sees what a static reader cannot.
Asks for almost nothing
Two permissions: activeTab and scripting. Access is granted to one tab, only when you click the toolbar icon, and only until you navigate away. No all-sites permission, no background worker, no network access, nothing transmitted.
Loads from disk
It is not on the Chrome Web Store. The extension/ folder in the repository loads unpacked in four steps, with nothing to build.
The things worth knowing before you start.
Data & scope
Where does my data go?
It depends on the tool, so here it is plainly. The forge is entirely local: the ramp is computed in the page and your working color is kept in your own browser storage. Extract, Images and Speed cannot be local — a browser is not allowed to fetch another site’s HTML — so the URL you enter is sent to this app’s server, which fetches the page on your behalf. Speed additionally passes the URL to Google’s PageSpeed Insights API. There is no account, no analytics, and nothing is stored server-side.
What does Extract miss, and why?
It reads the delivered HTML and the stylesheets it links, and it does not run JavaScript. A site that ships real CSS comes back rich; a site that styles itself at runtime comes back thin. That is a hard limit of reading a page without a browser, which is exactly why the browser extension exists — it reads computed styles on the rendered page instead.
What does it deliberately not do?
No color extraction from images, no complementary or triadic harmony generators, no saved projects. It does one job: turn a single color into a ramp you can ship and defend.
The color math
Is the OKLCH output trustworthy?
Yes. It is computed through the full transform — sRGB to linear sRGB to LMS, cube root, Oklab, then polar — not approximated from luminance. A color round-tripped through OKLCH and back returns the original 8-bit value exactly.
Why does every stop pass AA?
Because you are free to choose black or white text. The worst best-of-the-two ratio anywhere in sRGB is 4.583:1, which still clears the 4.5 threshold — so an AA count is always the whole ramp. That is why the summary readouts report AAA, which fails for roughly a third of all colors. The per-stop AA column stays, because a reviewer will ask for it.
Which contrast standard is used?
WCAG 2.1 relative luminance, which is what an accessibility audit will check. It is not APCA. Perceptual lightness and relative luminance disagree, sometimes sharply, and only the latter is normative for a conformance claim today.
Using the ramp
Why is my color on step 300 instead of 500?
Stops are seated by lightness. A pale color genuinely belongs near the light end of its own ramp, and forcing it to 500 would mean every stop below it had nowhere to go. The stop your color lands on is marked BASE.
Can I change how many stops I get?
Anywhere from 5 to 20. At eleven you get the canonical 50–950 ladder. At any other count the names are interpolated onto a 25-grid and forced strictly increasing, so two stops can never collide.
Bring a hex, or bring a URL.
No sign-up and no account. The forge needs nothing but your browser; the URL tools need one round trip through the server.