RAMPS STUDIO — GENERATED COLOR PALETTE
Source: https://ramp-generator.vercel.app/?b=3d7dff&m=full&s=complementary&c=AA
Brand #3d7dff · accent auto-derived · accent-2 auto-derived · complementary derivation · full scope · WCAG AA
RAMPS (OKLCH-derived, 50 lightest to 950 darkest)
primary:
50=#f1f6ff 100=#e1ecff 200=#c6daff 300=#9fc1ff 400=#6ea0ff 500=#4784ff 600=#2d6ae7 700=#1a51c4 800=#0c3c9f 900=#042a7b 950=#001652
accent:
50=#fff5e2 100=#fee9c2 200=#f4d59b 300=#e3ba6c 400=#c99a37 500=#b28200 600=#956c00 700=#775600 800=#5c4200 900=#442f00 950=#291b00
accent-2:
50=#eaf8ff 100=#d2f1ff 200=#a6e4ff 300=#74cef3 400=#3db0db 500=#0099c5 600=#007fa5 700=#006684 800=#004e67 900=#00394c 950=#00222f
neutral:
50=#f4f6fa 100=#e9ebf0 200=#d6d9de 300=#bdc0c6 400=#9fa2a9 500=#888b92 600=#71747a 700=#595c62 800=#44474c 900=#313338 950=#1c1e22
success:
50=#e1ffe6 100=#c9fad1 200=#a4eeb3 300=#75da8d 400=#3ebe66 500=#01a74c 600=#008c3e 700=#007030 800=#005624 900=#003f18 950=#00260c
warning:
50=#fbf7db 100=#f3edc2 200=#e5db9c 300=#d0c26c 400=#b5a337 500=#9e8c00 600=#847500 700=#695d00 800=#514700 900=#3b3400 950=#231e00
error:
50=#fff3f1 100=#ffe4e0 200=#ffcbc4 300=#ffa59a 400=#fc7064 500=#e4544b 600=#c73b35 700=#a62422 800=#851213 900=#650508 950=#410002
info:
50=#eef7ff 100=#dbeeff 200=#b8deff 300=#85c8ff 400=#3baaf9 500=#0192e3 600=#007abe 700=#006199 800=#004b78 900=#003659 950=#002037
SEMANTIC TOKENS (token · light · dark · ramp step · contrast · role)
[Background]
bg-canvas #e9ebf0 #1c1e22 neutral-100/950 — Page background
bg-surface #f4f6fa #313338 neutral-50/900 — Card, panel
bg-surface-raised #f4f6fa #44474c neutral-50/800 — Dropdown menu
bg-muted #d6d9de #595c62 neutral-200/700 — Table row hover
bg-brand #1a51c4 #4784ff primary-700/500 — Primary button
bg-brand-hover #0c3c9f #6ea0ff primary-800/400 — Cursor over that button
bg-brand-active #042a7b #9fc1ff primary-900/300 — Button while pressed
bg-accent #775600 #b28200 accent-700/500 — Secondary button
bg-accent-hover #5c4200 #c99a37 accent-800/400 — Cursor over secondary
bg-accent-active #442f00 #e3ba6c accent-900/300 — Secondary while pressed
bg-tertiary #006684 #0099c5 accent-2-700/500 — Tertiary button
bg-tertiary-hover #004e67 #3db0db accent-2-800/400 — Cursor over tertiary
bg-success #007030 #01a74c success-700/500 — Success badge
bg-success-subtle #c9fad1 #003f18 success-100/900 — Success banner
bg-warning #9e8c00 #b5a337 warning-500/400 — Warning badge
bg-warning-subtle #f3edc2 #3b3400 warning-100/900 — Warning banner
bg-error #c73b35 #e4544b error-600/500 — Destructive button
bg-error-subtle #ffe4e0 #650508 error-100/900 — Error banner
bg-info #006199 #0192e3 info-700/500 — Info badge
bg-info-subtle #dbeeff #003659 info-100/900 — Info banner
bg-inverse #313338 #e9ebf0 neutral-900/100 — Tooltip, toast
[Text]
text-primary #313338 #e9ebf0 neutral-900/100 10.6:1/13.99:1 vs bg-canvas Body copy
text-secondary #44474c #bdc0c6 neutral-800/300 7.82:1/9.16:1 vs bg-canvas Helper text
text-tertiary #595c62 #9fa2a9 neutral-700/400 5.62:1/6.53:1 vs bg-canvas Timestamps, captions
text-disabled #9fa2a9 #71747a neutral-400/600 — Greyed-out label
text-link #1a51c4 #6ea0ff primary-700/400 5.83:1/6.47:1 vs bg-canvas Inline link
text-on-brand #f1f6ff #001652 primary-50/950 6.42:1/4.86:1 vs bg-brand Label on a primary button
text-on-accent #fff5e2 #291b00 accent-50/950 6.23:1/4.86:1 vs bg-accent Label on a secondary button
text-on-tertiary #eaf8ff #00222f accent-2-50/950 5.99:1/5.01:1 vs bg-tertiary Label on a tertiary button
text-on-success #e1ffe6 #00260c success-50/950 5.85:1/5.17:1 vs bg-success Label on a success badge
text-on-warning #231e00 #231e00 warning-950 4.94:1/6.57:1 vs bg-warning Label on a warning badge
text-on-error #fff3f1 #410002 error-50/950 4.71:1/4.62:1 vs bg-error Label on a destructive button
text-on-info #eef7ff #002037 info-50/950 6.12:1/4.93:1 vs bg-info Label on an info badge
text-success #007030 #3ebe66 success-700/400 5.24:1/6.96:1 vs bg-canvas Saved confirmation
text-error #a62422 #fc7064 error-700/400 6.08:1/6.07:1 vs bg-canvas Field error message
text-warning #695d00 #b5a337 warning-700/400 5.56:1/6.56:1 vs bg-canvas Quota running low
text-info #006199 #3baaf9 info-700/400 5.55:1/6.6:1 vs bg-canvas Inline tip
text-inverse #f4f6fa #313338 neutral-50/900 11.68:1/10.6:1 vs bg-inverse Text on a tooltip
[Border]
border-subtle #d6d9de #44474c neutral-200/800 — Divider between rows
border-default #bdc0c6 #595c62 neutral-300/700 — Input outline
border-strong #9fa2a9 #71747a neutral-400/600 — Emphasised card edge
border-active #2d6ae7 #4784ff primary-600/500 — Selected tab
border-error #e4544b #e4544b error-500 — Outline on a bad field
[Focus]
ring-focus #4784ff #6ea0ff primary-500/400 — Keyboard focus ring
NOTES
- Every paired foreground meets WCAG AA (4.5:1) against its background — the measured ratio is stated per token. Do not substitute other colors into those pairs.
- Prefer the semantic tokens over raw ramp steps; they already carry the light/dark mapping.
- Ramps are OKLCH-derived and perceptually even. Use these hex values verbatim rather than re-deriving them.
- No brand color was supplied, so this palette uses the default #3d7dff. If you are building something that needs its own identity, request a palette with your own color instead: https://ramp-generator.vercel.app/?b=<6-digit hex, no #>.
- The brand color #3d7dff does not appear verbatim in these ramps. Inputs are placed on a fixed lightness curve so the scale stays perceptually even, which moves the input slightly; the nearest step is primary-500 (#4784ff). This is expected — use the ramp values, not the original input.
- bg-surface and bg-surface-raised are the same value in light mode (#f4f6fa) and differ in dark. That is deliberate: the light ramp has no step above neutral-50, so elevation reads through shadow rather than tone. Use a shadow to separate a raised surface in light mode.
- text-disabled is deliberately below the WCAG minimum (2.14:1 light, 3.56:1 dark). WCAG exempts disabled controls, so this is correct — but the exemption does not extend to ordinary text. Use text-tertiary for low-emphasis copy that is still readable.
REGENERATE WITH DIFFERENT INPUTS
https://ramp-generator.vercel.app/?b=<brand hex, no #>&m=<scope>&s=<scheme>&c=<wcag>
b brand color, 6-digit hex without the leading # (required; defaults to 3d7dff)
a pin the secondary accent, hex without # (optional; derived from the scheme otherwise)
a2 pin the tertiary accent, hex without # (optional; derived otherwise)
m scope: full | basic (default full)
s scheme: complementary | analogous | triadic | split | monochromatic (default complementary)
c WCAG target: AA | AAA (default AA)
f notation: oklch | hex | rgb | hsl (default oklch)
xr ramps to omit, dot-separated names, e.g. xr=accent-2.info
xt tokens to omit, dot-separated names, e.g. xt=bg-info.text-info
Same palette as JSON: https://ramp-generator.vercel.app/api/palette?b=<brand hex, no #>
Full machine-readable contract, including every token name: https://ramp-generator.vercel.app/llms.txt