Tints, shades and tones
Three ramps from one colour: toward white, toward black, and toward grey. Every step stays on the same hue.
Base color
Tints
Toward white. Lightness rises, chroma tapers.
- #2F6DF6L 58% · C 0.215on white 4.53:1
- #4C86FFL 64% · C 0.191on white 3.42:1
- #6E9EFFL 71% · C 0.152on white 2.63:1
- #8FB5FFL 77% · C 0.115on white 2.06:1
- #AFCBFFL 84% · C 0.080on white 1.64:1
- #D0E0FFL 90% · C 0.046on white 1.33:1
- #F0F5FFL 97% · C 0.014on white 1.09:1
Shades
Toward black. Lightness falls, chroma tapers.
- #2F6DF6L 58% · C 0.215on white 4.53:1
- #1751D6L 49% · C 0.211on white 6.58:1
- #0337B1L 40% · C 0.199on white 9.56:1
- #002482L 32% · C 0.161on white 13.3:1
- #001453L 23% · C 0.118on white 17.15:1
- #000628L 15% · C 0.074on white 19.89:1
- #000005L 6% · C 0.031on white 20.92:1
Tones
Toward grey. Chroma falls, lightness held.
- #2F6DF6L 58% · C 0.215on white 4.53:1
- #3D72E3L 58% · C 0.181on white 4.47:1
- #4975D0L 58% · C 0.147on white 4.42:1
- #5578BDL 58% · C 0.114on white 4.38:1
- #6079A9L 58% · C 0.080on white 4.36:1
- #6B7A95L 58% · C 0.046on white 4.34:1
- #767A81L 58% · C 0.012on white 4.34:1
How this works
The three operations are distinct, and the distinction matters when you are building a scale:
- Tint — mixed toward white. Lightness rises.
- Shade — mixed toward black. Lightness falls.
- Tone — mixed toward grey. Chroma falls, lightness stays put.
Why chroma tapers
Naively holding chroma constant while raising lightness produces steps that leave the sRGB gamut and get clipped, which shifts the hue. Colorstruct tapers chroma with the square of the distance travelled, so light tints stay recognisably tinted instead of washing out abruptly, and every step remains displayable.
Each step lists its OKLCH lightness, chroma and contrast against white, which is usually what you need when deciding where a ramp can carry text.