Pick colors and generate complementary, analogous, triadic, and monochromatic palettes with HEX, RGB, HSL.
Color Picker / Palette GeneratorGratisPopulairCSS & DevRuns in your browser
#3B82F6
#F6AF3C
#3CE0F6
#3B82F6
#523CF6
#3B82F6
#F63C83
#83F63C
#CEE0FD
#3B82F6
#073C92
Works in your browser. What you paste or upload is processed on your device.
Key features of the color picker and palette generator
Visual colour spectrum and hue slider picker
Real-time HEX, RGB, and HSL value display
Complementary, analogous, and triadic colour suggestions
Recently used colour history
Copy any colour format to clipboard
How to use the color picker and palette generator
01
Open the colour picker
Click in the colour area to begin selecting a colour.
02
Choose hue
Use the hue slider to select the base colour category.
03
Adjust saturation and lightness
Click in the gradient square to select the exact shade and lightness.
04
Get colour codes
See the HEX, RGB, and HSL values update in real time.
05
Copy and use
Click 'Copy' next to the format you need (HEX for CSS, RGB for design tools).
What is a color picker and palette generator?
The Colour Picker provides a visual colour selection interface where you can choose any colour from the colour spectrum and instantly get its HEX, RGB, and HSL values. It also suggests complementary, analogous, and triadic colours based on your selection.
Choosing precise colours for web design requires knowing the exact colour codes needed for CSS. This picker bridges the gap between visual colour selection and the technical values needed in your code — no more guessing hex codes or converting between formats manually.
Why use a color picker and palette generator?
Designers work visually; code requires exact colour values. This tool connects the two — pick the exact colour you're envisioning and immediately get the HEX, RGB, and HSL codes needed to implement it in CSS or any design system, without manual format conversions.
Color picker and palette generator: frequently asked questions
All three work in CSS. HEX is most common for solid colours. RGB/RGBA is preferred when you need transparency (rgba(255,0,0,0.5)). HSL is useful when you want to programmatically adjust lightness or saturation.
What are complementary colours?
Complementary colours are opposite each other on the colour wheel. They create high contrast and visual interest when used together. For example, blue (#0000FF) has orange (#FF8000) as its complementary colour.
What are analogous colours?
Analogous colours are adjacent on the colour wheel. They create harmonious, cohesive colour schemes. For example, blue, blue-purple, and purple are analogous colours.
How do I pick accessible colour combinations?
Ensure sufficient contrast between text and background colours — a minimum 4.5:1 ratio for normal text (WCAG AA standard). Use the colour contrast ratio checker to verify accessibility.
Can I input a hex code to start from a specific colour?
Yes. Type any HEX code in the hex input field and the picker will jump to that colour, letting you use it as a starting point for adjustments.
More free CSS and developer tools
Each one opens on its own page and works straight away, with no sign-up.
Color Picker / Palette Generator is one piece of the puzzle. See how ChatGPT, Gemini, Perplexity, and Google AI Overviews actually view your brand, and get a prioritised list of fixes, with a free AEO & GEO audit from AI Rank Lab.
One check is a start. The audit checks the whole site.
