ColourPickr

Free colour picker and colour design resource

Pick colours, copy codes and design with confidence.

Use ColourPickr to choose HEX, RGB and web colours quickly, then learn how those colours work in branding, accessibility, contrast and digital design.

Use the colour picker Read contrast guide

Quick colour workflow

1. Pick or paste a colour.

2. Copy the HEX/RGB value.

3. Check contrast and use related guides to make better palette decisions.

RGB vs HEXUnderstand when to use HEX and RGB colour values in websites, CSS and design systems.RGB vs CMYKLearn why screens use RGB, printers use CMYK, and how to avoid colour shifts.Colour TheoryUse colour relationships, contrast and palette structure to make better design decisions.WCAG ContrastImprove readability and accessibility with stronger colour contrast choices.Colour PsychologyUnderstand how colour associations influence branding, marketing and trust.
ColourPickr

ColourPickr

Colour Picker

Pick any colour, get HEX, RGB & HSL codes instantly. Free online colour picker tool.

HEX
#6366f1
Copied!
RGB
rgb(99,102,241)
Copied!
HSL
hsl(250,80%,60%)
Copied!
CSS Name
Medium Slate Blue
Copied!

Contrast Checker

White text on this colour AA
Black text on this colour AA

Colour Palette (click a palette to use it)

What is a Colour Picker?

A colour picker (also called a colour chooser or colour tool) lets you select colours and get their corresponding colour codes. Designers, developers, and artists use colour pickers to find the perfect HEX, RGB, or HSL values for their projects.

Colour Formats Explained

HEX: Six-digit hexadecimal code (e.g. #6366f1) — the most common format for web design and CSS.

RGB: Red, Green, Blue values from 0-255 (e.g. rgb(99, 102, 241)) — used in CSS, graphic design, and digital displays.

HSL: Hue, Saturation, Lightness (e.g. hsl(250, 80%, 60%)) — more intuitive for colour adjustments.

How to Use This Colour Picker

Use the colour input to pick any colour visually, or adjust the Hue, Saturation, and Lightness sliders for precise control. Click any colour code to copy it to your clipboard. Generate palettes with the buttons below.