Color Picker
Pick any color — get HEX, RGB, HSL, CSS, SCSS & Tailwind code instantly
Edit formats manually
/* ─── Color Variables ─────────────────── */:root { --color: #6c63ff; --color-rgb: 108, 99, 255; --color-hsl: hsl(243, 100%, 69%); --color-alpha: rgba(108, 99, 255, 0.1);}/* ─── Component Styles ─────────────────── */.element { background-color: #6c63ff; color: #ffffff; border-color: hsl(243, 100%, 69%); box-shadow: 0 4px 24px rgba(108, 99, 255, 0.3);}/* ─── Gradient ─────────────────────────── */.gradient-bg { background: linear-gradient( 135deg, #6c63ff, #d8a8ff);}What is Color Picker?
A color picker is a tool that lets you select and convert colours between different colour models used in design and development. Different tools and workflows require colours in different formats: web developers use HEX and RGB; CSS animations and design tools prefer HSL; print designers work with CMYK; video editors use HSV. Having to manually convert between these formats is error-prone and time-consuming.
HEX (e.g., #6c63ff) is the most common web colour format — a compact hexadecimal representation of red, green, and blue values. RGB (e.g., rgb(108, 99, 255)) specifies red, green, and blue intensities on a 0–255 scale. HSL (hue, saturation, lightness) is more intuitive for designers — adjusting saturation and lightness independently is more predictable than manipulating RGB channels. CMYK (cyan, magenta, yellow, key/black) is used in print design and corresponds to ink percentages.
Altairys's Color Picker provides a visual colour wheel and gradient picker alongside live conversion between all major colour models. Enter any value in any format and get all other representations instantly. The tool also shows complementary, analogous, triadic, and tetradic colour harmonies based on colour theory — helping designers build cohesive palettes. A history panel remembers recently picked colours for easy reference.
How to Use Color Picker
- Pick from the colour wheel
Click on the colour picker or gradient to visually select any colour.
- Enter a known value
Type a HEX, RGB, HSL, or CMYK value to start from a specific colour.
- View all colour formats
All equivalent values — HEX, RGB, HSL, HSV, CMYK — are shown simultaneously.
- Copy your format
Click any value to copy it to clipboard in the format your tool needs.
Key Benefits
HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK — all shown and editable simultaneously.
Complementary, analogous, triadic, and split-complementary palette suggestions.
Recently picked colours are saved for easy reference and re-use.
Any change to any format instantly updates all other format values.
Frequently Asked Questions
Both represent the same colour — HEX is simply a hexadecimal shorthand for RGB. #6c63ff = rgb(108, 99, 255). HEX is commonly used in CSS, RGB in JavaScript and CSS functions.
HSL is more intuitive for design work — you can easily adjust brightness (lightness) and vividness (saturation) independently without understanding how RGB channels interact.
CMYK is the colour model used in printing. If you're designing for print, your designer or print shop will need colours in CMYK values. Screen designs use RGB/HEX; print designs use CMYK.
The tool accepts HEX, RGB, HSL, and CMYK values. For CSS named colours, refer to the CSS named colours list and enter the equivalent HEX code.
Colour harmonies are combinations of colours that look visually pleasing based on their positions on the colour wheel. Complementary colours are opposite each other; analogous are adjacent; triadic are evenly spaced at 120°.