Prepare a color palette
Create shades from a HEX color and get their RGB and HSL values.
- Create the shadesHere
- Convert a color
Create lighter and darker shades from a HEX color and copy the palette.
#RGB / #RRGGBB
We do not send your file or text contents to a processing server. No account is needed and there is no daily operation quota. Individual tools have size limits to protect your device’s memory.
A connection is needed to load the site and its resources. Hosting may receive technical visit data. Favorites store only tool identifiers in this browser.
How we handle your data →Prepare a shade family for a visual composition.
#254F42
#C9D3D0 #779189 #254F42 #173129 #091411
The middle color matches the input. Endpoints mix 75% white or black; check contrast before pairing with text.
Creating a palette from a base colour supplies lighter and darker variants for exploring a composition. The tool generates a tonal scale, rather than automatically selecting complementary colours or producing a complete visual identity. The base remains the central reference while other samples move towards lighter or darker appearances. Choose a supported odd quantity so that reference stays in the middle of the collection and can be recognized alongside its variants.
Variants can help test surfaces, borders and accents, but assigning each a role requires inspecting the complete design. A sample suitable for a background may be unsuitable for small text. Perceived brightness also depends on neighbouring colours and the display. Do not choose a variant merely because it occupies a particular position in the scale. Review the actual combination where it will be shown, including the size and weight of accompanying lettering.
The palette does not automatically calculate contrast ratios or guarantee accessibility. Use understandable labels or shapes when states need distinction rather than relying only on colour. Review text and background pairs with an appropriate contrast tool. Tonal generation also does not establish equivalence with printing inks or professional profiles; these codes describe screen oriented colour representations. A satisfactory preview does not guarantee every physical reproduction will look the same.
Check the central colour and copy complete codes. Save the palette with each sample’s intended role so another editor does not confuse a border with a background. Color converter provides RGB or HSL notation for a particular value. Grayscale image explores tonal information in a picture but does not automatically apply this palette to its pixels. Test resources together before considering the visual choice complete.
A design trial can assign variants to background, border and accent, displaying them together. Inspect actual lettering against each background before selecting. Save codes with their roles to preserve the same combination across pages. Review the whole composition rather than treating palette position as a guarantee of adequate contrast.
Download the result or copy the text before opening another tool. Then load or paste it into the next step; content is not transferred automatically.
Create shades from a HEX color and get their RGB and HSL values.
Enter a 3- or 6-digit HEX color and choose 3, 5, 7 or 9 colors. The original stays in the middle. Lighter colors mix RGB channels with white and darker colors with black, up to 75%. Visual swatches and downloadable HEX codes are included.
No. This palette is a visual starting point. Check contrast for every text/background combination before using it in an interface.
No. Content and files are processed in your browser without an account. Closing the page loses unsaved results.