Build a palette from one color
Colors on the web are often written as HEX, RGB, or HSL. These formats describe the same underlying color in different ways. HEX is a compact hexadecimal notation, RGB gives the red, green, and blue channels, and HSL describes hue, saturation, and lightness. This picker lets you enter any of those supported forms and immediately see the equivalent values. The visual picker is useful when you would rather choose a color by eye.
Start with a three- or six-digit HEX value such as #7357EB, a comma-separated RGB value such as rgb(115, 87, 235), or an HSL value such as hsl(251, 79%, 63%). RGB channels must be integers between 0 and 255. Saturation and lightness use percentages between 0 and 100. The tool converts HSL to an eight-bit RGB color, so converting back can produce small rounding differences. Alpha transparency and named CSS colors are not supported by this input.
Choose from 24 preset colors, then select a palette style and a size from two to eight colors. Analogous explores neighboring hues; Complementary uses opposite hues with lighter variants; Triadic uses three hue families; Monochromatic creates shades and tints; Spectrum travels around the color wheel. Open Customize palette to adjust the base hue, saturation, and lightness with sliders. You can also edit individual swatches. Changing the base or style resets individual edits so the new harmony starts consistently.
Each output format and palette swatch has a copy action. Export CSS variables to download a stylesheet containing your customized palette as custom properties, or export JSON containing HEX, RGB, and HSL values. You can reference them in your own CSS with var(--color-1) and the other numbered names. Test text against its actual background before using the palette in a product: matching HSL lightness does not mean matching perceived brightness. This tool does not certify accessibility contrast. View important colors on more than one screen because displays and viewing conditions can change their appearance.
Frequently asked questions
Are these print colors?
These are screen RGB colors. Print workflows may need a separate color-managed conversion.
Why do gray palettes look identical?
With zero saturation, changing hue has no visible effect. Increase saturation to explore colored harmonies.
Can I export the palette?
Yes. Export CSS variables downloads the customized colors in a ready-to-use :root rule. JSON export includes HEX, RGB, and HSL values.