Color Picker

Pick colors and get codes in HEX, RGB, HSL, and CMYK formats. Choose colors visually or enter precise values.

100% client-side No signup Free forever

Recent Colors

Preset Colors

// how to use

How to Use Color Picker

How to Use the Color Picker

  1. Pick a color: Click on the color gradient area or use the hue slider.
  2. Fine-tune: Adjust saturation (horizontal) and brightness (vertical).
  3. Set opacity: Use the alpha slider for transparent colors.
  4. Or enter values: Type exact color codes in HEX, RGB, or HSL fields.
  5. View all formats: See the color converted to all supported formats.
  6. Copy any format: Click to copy the format you need for your project.

Color Conversion Examples

Enter #3B82F6 and instantly see:

  • RGB: rgb(59, 130, 246)
  • HSL: hsl(217, 91%, 60%)
  • RGBA: rgba(59, 130, 246, 1)
// features

Features

  • Visual color picker with gradient
  • Hue and saturation sliders
  • Alpha/opacity control
  • HEX, RGB, HSL, HSLA, CMYK conversion
  • Color input in any format
  • Color harmony generator
  • Complementary color display
  • Color history tracking
  • Copy any format with one click
  • Contrast ratio checker
  • Mobile-friendly interface
  • No registration required
// about

About Color Picker

Colors are specified differently across design tools, web development, and print production. Our color picker provides instant conversion between all common formats, letting you work seamlessly across different platforms and requirements.

Supported Color Formats

Convert between all major formats:

  • HEX: Web standard (#FF5733)
  • RGB: Screen colors (255, 87, 51)
  • HSL: Hue, saturation, lightness (11°, 100%, 60%)
  • CMYK: Print colors (0%, 66%, 80%, 0%)

Visual Color Selection

Click anywhere on the color gradient to select colors visually. Adjust hue on the spectrum bar, then fine-tune saturation and brightness in the main area. The interface updates all format values in real-time.

Precise Value Entry

When you have exact color values, enter them directly in any format. The picker converts to all other formats automatically. Useful when matching brand colors or extracting values from existing designs.

Screen vs Print

RGB/HEX colors are for screens (additive color). CMYK is for print (subtractive color). Colors may look different when printed—CMYK gamut is smaller than RGB. For print work, always verify CMYK values and test print when accuracy matters.

// faq

Frequently Asked Questions

What color formats does the picker support?
We support all major formats: HEX (#FF5733), RGB (255, 87, 51), RGBA with alpha, HSL (14°, 100%, 60%), HSLA, HSV/HSB, and CMYK. Pick a color visually and get it in any format instantly. Click any format to copy.
How do I pick a color from an image or my screen?
Use the eyedropper tool to sample colors from any image you upload or from your screen (if browser supports it). Click anywhere on the image to grab that exact color. Perfect for matching brand colors or extracting colors from inspiration images.
What is the difference between HSL and HSV/HSB?
Both use hue and saturation, but differ in the third value. HSL (Lightness): 50% L is the "pure" color, 0% is black, 100% is white. HSV (Value/Brightness): 100% V is the "pure" color, 0% is black. HSL is often more intuitive for web work.
How do I create accessible color combinations?
Our contrast checker evaluates text/background combinations against WCAG guidelines. A ratio of 4.5:1 is required for normal text (AA), 7:1 for enhanced (AAA). Large text needs 3:1 minimum. We show if combinations pass accessibility standards.
Can I save and organize my colors?
Yes! Add colors to your palette with one click. Create multiple palettes for different projects. Export as CSS variables, Sass/SCSS, JSON, or image. Palettes save in your browser and can be exported/imported for sharing.
What is a color harmonies and how do I generate them?
Color harmonies are mathematically related colors that look good together: complementary (opposite on wheel), analogous (adjacent), triadic (three equally spaced). Select a base color and we generate harmonious palettes automatically.