Colour Picker Tool
Find the perfect colours for your web design projects. Click on any colour to get its HEX, RGB, and HSL values.
This colour picker (also known as a color picker in American English) shows a variety of colour palettes including Material Design colours, basic web colours, and modern flat UI colours. Click on any colour to see its code values in different formats (HEX, RGB, HSL).
You can copy the colour codes to your clipboard and use them in your CSS, HTML, or design projects.
HEX
RGB
HSL
Red
Red 50
Red 100
Red 200
Red 300
Red 400
Red 500
Red 600
Red 700
Red 800
Red 900
Pink
Pink 50
Pink 100
Pink 200
Pink 300
Pink 400
Pink 500
Pink 600
Pink 700
Pink 800
Pink 900
Purple
Purple 50
Purple 100
Purple 200
Purple 300
Purple 400
Purple 500
Purple 600
Purple 700
Purple 800
Purple 900
Deep Purple
Deep Purple 50
Deep Purple 100
Deep Purple 200
Deep Purple 300
Deep Purple 400
Deep Purple 500
Deep Purple 600
Deep Purple 700
Deep Purple 800
Deep Purple 900
Indigo
Indigo 50
Indigo 100
Indigo 200
Indigo 300
Indigo 400
Indigo 500
Indigo 600
Indigo 700
Indigo 800
Indigo 900
Blue
Blue 50
Blue 100
Blue 200
Blue 300
Blue 400
Blue 500
Blue 600
Blue 700
Blue 800
Blue 900
Light Blue
Light Blue 50
Light Blue 100
Light Blue 200
Light Blue 300
Light Blue 400
Light Blue 500
Light Blue 600
Light Blue 700
Light Blue 800
Light Blue 900
Standard Colours
Black
White
Red
Lime
Blue
Yellow
Cyan
Magenta
Silver
Gray
Maroon
Olive
Green
Purple
Teal
Navy
Named Colours
AliceBlue
AntiqueWhite
Aquamarine
Azure
Beige
Bisque
BlanchedAlmond
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Flat UI Colours
Turquoise
Emerald
Peter River
Amethyst
Wet Asphalt
Green Sea
Nephritis
Belize Hole
Wisteria
Midnight Blue
Sunflower
Carrot
Alizarin
Clouds
Concrete
Orange
Pumpkin
Pomegranate
Silver
Asbestos
Custom Colour Picker
How to Use CSS Colours
You can use colour codes in your CSS in several ways:
HEX Format
.element {
color: #3498db;
background-color: #ecf0f1;
}RGB Format
.element {
color: rgb(52, 152, 219);
background-color: rgba(52, 152, 219, 0.5); /* With alpha */
}HSL Format
.element {
color: hsl(204, 70%, 53%);
background-color: hsla(204, 70%, 53%, 0.5); /* With alpha */
}Colour Tips
- Use colours with good contrast for accessibility.
- Limit your palette to 3-5 colours for a cohesive design.
- HSL makes it easy to create colour variations by adjusting lightness.
- Test your colour combinations for WCAG compliance.
- Some colours may display differently across devices and browsers.