FileFlipColor Picker

Color Picker

Pick and convert colors between HEX, RGB, HSL, CMYK. Generate harmonies, tints and shades. Check WCAG contrast.

Preview

on White 3.7:1AA Failon Black 5.7:1AA Pass

Contrast Ratio

#3b82f6
rgb(59, 130, 246)
rgba(59, 130, 246, 1)
hsl(217, 91%, 60%)
hsla(217, 91%, 60%, 1)
cmyk(76%, 47%, 0%, 4%)
--color-primary: #3b82f6

Color Harmonies

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

Tints & Shades

How to Use

  • Click the color picker or type a HEX/RGB/HSL value
  • All color formats update automatically
  • Click any value to copy it to clipboard

tools.colorPicker.editorialTitle

tools.colorPicker.editorialBody

Related tools

Favicon generator
Image to Text (OCR)
Word Counter

Frequently asked questions

What is a color picker and how does it work?
A color picker is a tool that lets you choose a color visually or by entering values, and see it in different formats (HEX, RGB, HSL, CMYK). This one syncs all inputs in real time: change the native picker or type a HEX code and every other field and preview updates. You can copy any format, generate harmonies, and check contrast for accessibility.
What is the difference between HEX, RGB and HSL?
HEX is a compact way to write RGB as a single string (e.g. #ff0000 for red). RGB uses three numbers from 0 to 255 for red, green and blue. HSL describes color by Hue (0–360), Saturation (0–100%) and Lightness (0–100%), which many find easier for tuning shades and creating palettes. All three represent the same color; this tool converts between them instantly.
What is CMYK and when do I use it?
CMYK stands for Cyan, Magenta, Yellow and Key (black). It is used mainly for print, where inks are mixed. Screens use RGB; printers often use CMYK. If you are designing for both web and print, you may need to convert: this tool shows the CMYK equivalent of any color so you can match branding across media.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background so text is readable. AA requires 4.5:1 for normal text (3:1 for large); AAA requires 7:1 (4.5:1 for large). This tool shows the ratio of your color on white and on black, and labels whether it passes AA or AAA for accessibility.
What are color harmonies and how do I use them?
Color harmonies are sets of colors that look good together: complementary (opposite on the wheel), analogous (neighbors), triadic (evenly spaced), split-complementary and tetradic. This tool generates these from your chosen color. Click any swatch to set it as the main color. Use them for palettes, UI, or brand colors.
What are tints and shades?
Tints are a color mixed with white (higher lightness); shades are mixed with black (lower lightness). This tool generates nine steps from 10% to 90% lightness, similar to Tailwind CSS scales. Use them for backgrounds, borders, or hover states while keeping the same hue and saturation.
Can I use this color picker for web design and CSS?
Yes. You get HEX, RGB, RGBA, HSL, HSLA and a CSS variable snippet (e.g. --color-primary: #1a2b3c). Copy any value into your stylesheet. The contrast check helps you pick accessible text colors. The harmonies and tints give you a full palette without leaving the tool.
What is a CSS custom property (variable) for colors?
CSS custom properties (variables) let you define a color once and reuse it: e.g. --color-primary: #1a2b3c; then use var(--color-primary) in your CSS. This tool shows the variable form so you can paste it into :root and keep your palette consistent and easy to change later.