Colour to colour · generated
Olive Green to Navy Blue gradient
Olive Green (#808000) into Navy Blue (#000080) — 154° apart on the OKLCH hue wheel. Below: the same two stops interpolated in OKLab and in OKLCH, side by side, because the difference is real and most generators never let you see it; then an eased version and a mesh, each with the worst-case contrast for white and black text. The engine's own pick for this pair is oklch: ΔH 154° > 140° — interpolating in oklch (shorter hue) keeps the midpoint saturated.
OKLab and OKLCH, side by side
OKLab
Open in maker →A straight line through the a/b plane: the two hues meet halfway and desaturate a little at the midpoint. The safe default — it is what CSS and Tailwind default to.
linear-gradient(135deg in oklab, #808000 0%, #000080 100%)
OKLCH (shorter hue)
Open in maker →Chroma and hue interpolate separately, so the midpoint keeps its saturation and the hue travels the short way round the wheel — richer, and it can pass through hues neither colour has.
linear-gradient(135deg in oklch shorter hue, #808000 0%, #000080 100%)
And the sRGB line most tools draw, for comparison — the number is the chroma that survives at the dullest point.
Eased and mesh
Eased (soft)
Open in maker →A cubic-bezier(.4, 0, .6, 1) mix ratio baked into 15 stops: the transition lingers on each colour and moves faster through the middle, which is what makes a gradient read as designed rather than default.
linear-gradient(135deg in oklch shorter hue, #808000 0%, #7c8000 8.28%, #6f7f05 16.03%, #597e14 23.35%, #357b26 30.32%, #007739 37.03%, #006b4f 43.56%, #005e57 50%, #00525a 56.44%, #00475c 62.97%, #003c5e 69.68%, #003163 76.65%, #002371 83.97%, #000781 91.72%, #000080 100%)
Mesh
Open in maker →Both colours as stacked radials over a base, laid out by a seeded Poisson-disc sampler — the same seed gives the same mesh forever. Exports as CSS, SVG and PNG.
background-color: #325462; background-image: radial-gradient(circle farthest-corner at 83.99% 91.13%, rgba(0, 0, 128, 0.785) 0%, rgba(0, 0, 128, 0) 57.38%), radial-gradient(circle farthest-corner at 48.42% 30.52%, rgba(128, 128, 0, 0.784) 0%, rgba(128, 128, 0, 0) 59.58%); background-image: radial-gradient(circle farthest-corner at 83.99% 91.13%, oklch(from #000080 l c h / 0.7852) 0%, rgb(from #000080 r g b / 0) 57.38%), radial-gradient(circle farthest-corner at 48.42% 30.52%, oklch(from #808000 l c h / 0.7842) 0%, rgb(from #808000 r g b / 0) 59.58%);
Report
- white ink: worst 4.20:1 at 0% (AA-large only); black ink: worst 1.31:1 at 100% (fails AA) → use white text.
- Body text fails AA everywhere on this gradient; large text (≥24px / 19px bold) is fine. Add a scrim or lower the chroma for body copy.
- Banding medium: ~11px bands at 1440px — add grain 24 (≈2% soft-light noise) or shorten the ramp.
- 25/64 samples left sRGB by more than 5% and were gamut-mapped (oklch shorter); expect slight hue drift there.
Export
.gradient {
background-image: linear-gradient(135deg, #808000 0%, #697f09 7.14%, #4f7d1a 14.29%, #2b7a29 21.43%, #007738 28.57%, #006f49 35.71%, #006752 42.86%, #005e57 50%, #00565a 57.14%, #004e5b 64.29%, #00465c 71.43%, #003e5d 78.57%, #003561 85.71%, #00286b 92.86%, #000080 100%);
background-image: linear-gradient(135deg in oklch shorter hue, #808000 0%, #000080 100%);
}bg-linear-to-br/oklch from-[#808000] to-[#000080]
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="600" viewBox="0 0 1440 600"><defs><linearGradient id="bs-gradient" gradientUnits="userSpaceOnUse" x1="210" y1="-210" x2="1230" y2="810"><stop offset="0%" stop-color="#808000"/><stop offset="7.14%" stop-color="#697f09"/><stop offset="14.29%" stop-color="#4f7d1a"/><stop offset="21.43%" stop-color="#2b7a29"/><stop offset="28.57%" stop-color="#007738"/><stop offset="35.71%" stop-color="#006f49"/><stop offset="42.86%" stop-color="#006752"/><stop offset="50%" stop-color="#005e57"/><stop offset="57.14%" stop-color="#00565a"/><stop offset="64.29%" stop-color="#004e5b"/><stop offset="71.43%" stop-color="#00465c"/><stop offset="78.57%" stop-color="#003e5d"/><stop offset="85.71%" stop-color="#003561"/><stop offset="92.86%" stop-color="#00286b"/><stop offset="100%" stop-color="#000080"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
{
"olive-to-navy": {
"$type": "gradient",
"$value": [
{
"color": {
"colorSpace": "srgb",
"components": [
0.502,
0.502,
0
],
"hex": "#808000"
},
"position": 0
},
{
"color": {
"colorSpace": "srgb",
"components": [
0,
0,
0.502
],
"hex": "#000080"
},
"position": 1
}
],
"$extensions": {
"com.brandsweets": {
"kind": "linear",
"css": "linear-gradient(135deg in oklch shorter hue, #808000 0%, #000080 100%)",
"interpolation": "oklch",
"hue": "shorter",
"angle": 135,
"name": "olive-to-navy",
"contrast": {
"white": {
"ratio": 4.195,
"at": 0,
"passesAA": false,
"passesAALarge": true
},
"black": {
"ratio": 1.312,
"at": 1,
"passesAA": false,
"passesAALarge": false
},
"suggestedInk": "#ffffff"
}
}
},
"$description": "Olive Green to Navy Blue, interpolated in oklch."
}
}More from Olive Green
Point any MCP client at the shared gradients endpoint and your agent gets the same engine as this page — make_gradient returns CSS with the interpolation space, Tailwind v4, SVG, a PNG URL, a DTCG token and the contrast report in one call; brand_gradients derives the whole contact sheet from a brand or a palette. Read-only, no key. Every gradient is a /gradients/new/… link: open it, refine, paste it back.
https://mcp.brandsweets.com/gradients/mcpclaude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp
›make a olive green to navy blue hero gradient in oklch that passes AA for white text, with grain if it bands
Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.
Machine-readable: gradients.md