Generate Brand Color Scale — 50–950 Palette & CSS Tokens
Build a brand color token pack from one base in your browser. Steps: pick a base (HEX or color picker), read HEX/RGB/HSL/OKLCH, generate a 50–950 scale with black/white text pairs on each step, then copy CSS variables or JSON. Sample blue #2563eb loads on open — nothing uploads.
How it works
Enter or pick one brand base color. The page shows that color in HEX, RGB, HSL, and OKLCH, then builds an 11-step scale (50–950) with a live UI preview. Each swatch lists a recommended black or white text color and contrast ratio. Copy CSS variables or JSON when the ramp looks right — all processing stays local.
Rules you should expect
What to expect from the scale, color spaces, contrast hints, and privacy.
- Scale step 500 matches your base. Steps below 500 lighten by mixing toward white; steps above 500 darken by mixing toward black (linear sRGB blend).
- The base block lists HEX, RGB, HSL, and OKLCH for the same color. OKLCH uses sRGB → linear → OKLab conversion so you can compare with modern CSS color syntax.
- Each scale swatch recommends black or white text — whichever yields the higher contrast ratio on that background. Ratios follow WCAG relative luminance; AA labels are hints, not a full audit.
- Privacy: generation, preview, and clipboard copy all run locally in this tab. No upload of your brand colors.
Example
Load the sample (#2563EB). The spaces block shows HEX, RGB, HSL, and OKLCH for the base; the scale grid lists 50–950 swatches with recommended black or white text and a contrast ratio. Copy CSS gives :root { --color-50: …; … --color-950: …; } ready for your stylesheet.
Good fits
- Design systems: start from one brand HEX and ship a consistent 50–950 ramp plus CSS variables for components.
- Dark mode planning: scan lighter tints (50–300) for surfaces and deeper shades (700–950) for text-on-brand decisions.
- Handoff to dev: copy JSON tokens or CSS custom properties instead of retyping HEX values from a screenshot.
Frequently asked questions
Does my color leave the browser?
No. Color math and exports run entirely in this tab — your picks are not sent to a server.
How is the 50–950 scale built?
Step 500 is your base color. Lighter steps (50–400) mix toward white; darker steps (600–950) mix toward black. The mix is linear in sRGB, which keeps hue stable for quick design-system ramps.
What do the contrast columns mean?
Each swatch compares black and white text on that background and picks whichever gives the higher WCAG contrast ratio. Labels show the ratio and whether normal text likely meets AA (4.5:1) or large text AA (3:1).
What do Copy CSS and Copy JSON include?
Copy CSS outputs :root custom properties (--color-50 through --color-950). Copy JSON gives the same scale plus base spaces as structured data for design tokens or build scripts.
When should I use the contrast checker instead?
These are quick black/white suggestions per step. For custom foreground/background pairs or exact WCAG levels, open the WCAG contrast checker and paste any swatch HEX.
Related tools
Questions or feedback
Something unclear, broken, or missing? Draft a message below — we read every note about these tools.