Jack Tools

Colour Picker & Palette Generator

Choose a base colour and generate matching palettes instantly for websites, branding, and creative work.

Pick your colour

55%

The intensity slider changes how subtle or bold the generated colour palette feels.

Base colour
#2563EB
Analogous palette with medium intensity.
HEX
#2563EB
RGB
37, 99, 235
HSL
221°, 83%, 53%
Palette type
Analogous

How This Colour Picker & Palette Generator Works

This colour picker and palette generator helps you choose a base colour, view its HEX, RGB, and HSL values, and build a matching set of colours that work together.

You can switch between common palette styles such as analogous, complementary, split complementary, triadic, and monochromatic. Each mode creates a different type of visual relationship, from softer colour groupings to stronger contrast.

The intensity slider adjusts how subtle or bold the generated palette feels. Lower settings keep the palette calmer and safer, while higher settings push the variations further for stronger accents and more vivid combinations.

This tool is useful for web design, landing pages, product mockups, brand work, UI kits, social graphics, and general creative projects where you want fast colour options without opening design software.

Base colour picker Choose a starting colour with the picker or type a HEX value directly.
Palette types Generate analogous, complementary, split complementary, triadic, or monochromatic colour sets.
Colour values View HEX, RGB, and HSL values for the selected base colour.
Copy-ready output Copy individual swatch colours or copy the full palette for CSS, design tools, or brand guidelines.
Back to calculator ↑

Example Colour Palette Ideas

Soft analogous palette
Base colour#2563EB
Palette typeAnalogous
Intensity30%
Useful for cleaner website UI colour systems
Bold complementary palette
Base colour#EF4444
Palette typeComplementary
Intensity80%
Useful for high-contrast campaigns and promo graphics
Monochromatic brand set
Base colour#10B981
Palette typeMonochromatic
Intensity55%
Useful for dashboards, apps, and tighter brand consistency
Triadic creative palette
Base colour#7C3AED
Palette typeTriadic
Intensity70%
Useful for posters, social graphics, and more playful layouts

Colour Picker FAQs

It lets you pick a base colour, view its HEX, RGB, and HSL values, and generate related colours that work together in a palette.
A colour palette is a group of colours chosen to work well together visually. Good palettes help create consistency, contrast, and balance across websites, branding, and design work.
The intensity slider changes how subtle or bold the palette feels. Lower settings are softer, while higher settings create stronger variation and more contrast.
Analogous colours sit close together and usually feel smoother and more harmonious. Complementary colours sit opposite each other and create stronger contrast.
Yes. You can copy single HEX values from swatches or copy the whole generated palette for use in CSS, design tools, or brand docs.
Different workflows use different formats. HEX is common in web design, RGB is useful for digital display values, and HSL makes hue, saturation, and lightness easier to understand.
Yes. It is useful for selecting primary brand colours, accents, button colours, backgrounds, and supporting shades for websites and interfaces.

Related tools

Contrast Checker Test colour combinations for readability. Gradient Generator Turn chosen colours into gradients. Box Shadow Generator Pair colours with UI shadow styling.