Palette generator
Preview a $colors entry before you commit it. Type a base colour below and this re-runs makeColorPalette()'s tint/shade maths and a WCAG text-colour pick in the browser, against the same five semantic role aliases a real family gets: the base colour itself (500) plus subtle (50), muted (300), emphasis (700) and strong (900).
Text colour follows resolve-contrast-color()'s real order of preference: your text colour below wins wherever it clears a 4.5:1 WCAG AA contrast ratio, white otherwise, black only as a last resort. It's prefilled with the framework's actual default ($colors.neutral's 1000 shade, seeded #64748b) and shown as its own swatch — edit it to preview a custom $color-text too. The maths here matches the build exactly; the one thing this can't preview is a per-shade override via map.merge() — see makeColorPalette().
Colours
Palette preview
Each family swatch's background is the generated shade; its text colour is the pick between white, your text colour and black, with the resulting WCAG contrast ratio. The last swatch is the text colour itself, with its ratio against the framework's default page background. The label in each swatch is rendered at real .h4 size — WCAG's "large text" exception (3:1 instead of 4.5:1) only applies at that scale and up, so the sample shows what a 3:1 pass actually looks like rather than leaving it to a number.
| Role | Shade | Hex | Text colour | Contrast ratio |
|---|
What each ratio actually clears, per WCAG 2.x's contrast-minimum criterion:
| Ratio | Suitable for |
|---|---|
| 7:1+ | AAA — any text size. |
| 4.5:1+ | AA — normal text (under 18px, or under ~19px/14pt bold). The default bar this tool checks. |
| 3:1+ | AA — large text only (18px normal weight and up, or ~19px/14pt bold and up), and for UI component / graphical-object boundaries. |
| under 3:1 | Fails WCAG AA outright. |
Use it
Happy with it? Add it as a new family in your settings, before Jellyfish's own @import:
$colors: (
"custom": #eb567d,
);