Shade and Tint Generator
Build a ten step lightness ramp from one colour, ready to paste as CSS.
Good to know
Which colour formats can I enter?
Use a HEX value such as #336699, RGB such as rgb(51, 102, 153), or HSL such as hsl(210, 50%, 40%). Follow the example shown by the tool.
How do I check text contrast?
Choose a foreground and a background colour in Contrast Checker. The result separates normal text, large text and interface graphics.
Will the colour look identical everywhere?
The result describes colour values. Screens, printing and surrounding colours can change how they appear. Use opaque colours for these conversions; transparency is not included in the calculation.