颜色色阶生成器
按参数生成颜色色阶结果。
Try #60784b or rgb(96, 120, 75).
Changing the picker updates the text value.
SOURCE COLOR
#60784B
rgb(96, 120, 75)
使用步骤
如何使用
- Enter a HEX or RGB color, or choose a color with the picker.
- Review the generated lighter and darker shades and their contrast guidance.
- Copy individual HEX or RGB values, the CSS variables, or download the scale as a CSS file.
How the shades are made
The generator blends the source color toward white for lighter steps and toward black for darker steps. It preserves the hue direction without pretending that every shade has the same perceived brightness, so always check the result in the context where you will use it.
Contrast is a guide
Each swatch reports its contrast against white and black using the WCAG relative-luminance formula. A ratio of 4.5:1 is a common minimum for normal text and 3:1 for large text; verify the actual font size, weight, background, and adjacent colors in your interface.
Local and exportable
Parsing, shade generation, copying, and CSS download happen locally in the browser. The downloaded file contains custom properties under :root and does not include your input anywhere else.
常见问题
你可能还想知道
Which color formats are accepted?
Use six-digit or three-digit HEX, or RGB values such as rgb(96, 120, 75) and rgb(96 120 75). The parser also accepts percentages in RGB components.
Are the shades guaranteed to be accessible?
No. Contrast depends on the text, size, weight, and surrounding background. The ratios are a useful starting point, not an accessibility approval.
Does this upload my color?
No. The calculation and exports run entirely in your browser.