Color Picker

Color formats explained

Every color on screen can be described in multiple formats — HEX, RGB, HSL, and more. Different tools and workflows prefer different formats. Figma uses HEX and RGB. CSS supports all three. Tailwind uses HEX in its config. This tool lets you pick any color and instantly copy it in whichever format you need.

HEX vs RGB vs HSL

HEX — compact, widely supported, hardest to read at a glance.
RGB — intuitive for programmers, great when you need alpha (rgba).
HSL — most human-readable, easy to create lighter/darker variants by changing L.

Tips for designers and developers

To create a hover state that's slightly darker, take your base HSL color and reduce the L value by 10. To create a semi-transparent overlay, use the RGB values in rgba(r, g, b, 0.15). To build a consistent palette, keep H fixed and vary S and L.

Common use cases for the color picker

Designers use it to match a brand colour from a style guide to a precise HEX code for CSS implementation. Frontend developers use it to quickly convert a Figma HEX value to HSL when writing CSS variables for theming. Content creators use it to pick a brand-consistent color for social media graphics in Canva. UI/UX teams use the HSL model to systematically build tints (higher L) and shades (lower L) from a single brand hue for a complete design system.

Color spaces beyond HEX, RGB, and HSL

While HEX, RGB, and HSL cover most web and design workflows, other color spaces exist for specific purposes. CMYK is used in print design — printers use cyan, magenta, yellow, and black inks rather than light. HSV (Hue, Saturation, Value) is similar to HSL but used in many image editing tools like Photoshop's color picker. OKLCH is an emerging CSS color space that offers more perceptually uniform color stepping, making it excellent for programmatically generated color scales. For most web work, HEX and HSL cover everything you need.

Accessibility and color contrast

Choosing a color is only half the job — checking it against WCAG contrast requirements is the other half. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text or UI components. After picking your color, test foreground/background combinations using a contrast checker. Dark text on light backgrounds and light text on dark backgrounds generally pass; mid-tone colors on white or grey frequently fail.

Frequently asked questions

What is a HEX color code?

A HEX color code is a 6-character string representing a color in RGB format using hexadecimal notation. The format is #RRGGBB where RR, GG, BB are two-hex-digit values from 00 to FF for red, green, and blue. For example, #ff0000 is pure red, #ffffff is white, #000000 is black.

What is RGB?

RGB (Red, Green, Blue) represents colors numbers from 0 to 255. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, rgb(0, 0, 255) is blue. It's the native color model for screens.

What is HSL?

HSL (Hue, Saturation, Lightness) is a more human-intuitive color model. Hue is the color angle (0–360°), Saturation is the intensity (0–100%), and Lightness controls how light or dark the color is (0% = black, 100% = white, 50% = full color). HSL is widely used in CSS.

Which format should I use in CSS?

All three work in CSS. HEX is the most common for static colors. HSL is best when you need to programmatically adjust lightness or saturation (e.g. hover states). RGB is useful when you need alpha transparency — use rgba(r, g, b, 0.5) for semi-transparent colors.