Is my exact color one of the ten?

Not usually. The stops sit at fixed lightness values so that two ramps built from different colors line up with each other, which is the point of a scale. Your color sets the hue and how saturated the ramp gets.

Why are the light steps less saturated?

Because there is very little room for chroma near white, and holding it flat gives neon pastels. The chroma tapers towards both ends and peaks around 500 and 600, which is where every published scale puts its strongest step.

Why do 50 and 100 look closer together than the rest?

That is deliberate and it matches how design system scales are built. Near white, a full lightness step stops reading as a different color at all, so the top of the ramp is compressed.

Color Shades and Tints

One color into a ten step ramp.

Base color

One color into a ten step ramp.

How to use it

Enter your color. Hex, rgb(), hsl(), oklch() or a CSS name. This is the hue the whole ramp follows.
Read the stops. Ten steps from 50, the lightest tint, to 900, the darkest shade.
Take the values. Copy the hex codes, or download the ramp as an SVG to drop into a design file.

When you would use this

A ten step ramp is the unit a design system is built from, and generating one is mostly a matter of not making two mistakes. The first is stepping lightness in HSL. An even step there does not look even, so the ramp bunches up in the middle and spreads at the ends. Stepping in OKLCH fixes it, because a step in perceptual lightness looks like a step. The second is holding saturation flat across the whole ramp. Near white there is almost no room for chroma, and near black what is left goes muddy, so a flat ramp gives washed out neons at the top and sludge at the bottom. The chroma here follows a curve that peaks at 500 and 600 and tapers to both ends. What comes out is ten stops that line up with any other ramp built the same way, which is what lets a set of them work together as a palette.

Questions

Is my exact color one of the ten?: Not usually. The stops sit at fixed lightness values so that two ramps built from different colors line up with each other, which is the point of a scale. Your color sets the hue and how saturated the ramp gets.
Why are the light steps less saturated?: Because there is very little room for chroma near white, and holding it flat gives neon pastels. The chroma tapers towards both ends and peaks around 500 and 600, which is where every published scale puts its strongest step.
Why do 50 and 100 look closer together than the rest?: That is deliberate and it matches how design system scales are built. Near white, a full lightness step stops reading as a different color at all, so the top of the ramp is compressed.