Shades, tints, and tones
A shade mixes a color with black, a tint mixes it with white, and a tone moves it toward gray. Together they create a flexible range around the original color.
Building UI color scales
A useful color scale usually includes light values for backgrounds, middle values for accents, and darker values for text, borders, or active states.
Check contrast
Not every shade works for text. Use contrast checks to decide which values are safe for foreground and background combinations.
Related color tools
Use these tools to pick, convert, test, and export the color values described in this guide.
More color guides
Color GuidesPractical guides for HTML color codes, Hex values, RGB, HSL, CSS colors, palettes, web safe colors, and shades.HTML Color CodesLearn how HTML color codes work and copy Hex, RGB, HSL, OKLCH, named colors, and CSS-ready color values.Hex Color CodesA guide to Hex color codes, six-digit #RRGGBB values, shorthand Hex colors, and Hex to RGB conversion.RGB Color CodesUnderstand RGB color codes, convert RGB to Hex, and use rgb() values in CSS.HSL Color CodesLearn HSL color codes, hue angles, saturation, lightness, and how to use hsl() in CSS.CSS Color CodesUse CSS color codes in stylesheets, gradients, borders, shadows, SVG, and interface design.Color Palette GeneratorGenerate color palettes from a base color, image, color wheel, harmony, shades, tints, and tones.Web Safe ColorsExplore web safe colors, classic browser-safe palettes, Hex values, and modern alternatives.