CSS Color Picker - CodingDevhub

Color Preview & Controls

Hue 0°

Saturation 100%

Lightness 50%

Alpha 100%

⚠️ EyeDropper API is not supported in your browser. Try Chrome 95+ or Edge 95+.

Color Formats

HEX #667EEA

HEX8 #667EEAFF

RGB rgb(102, 126, 234)

RGBA rgba(102, 126, 234, 1)

HSL hsl(229, 79%, 66%)

HSLA hsla(229, 79%, 66%, 1)

HSV hsv(229, 56%, 92%)

HSB hsb(229, 56%, 92%)

HWB hwb(229 40% 8%)

CMYK cmyk(56%, 46%, 0%, 8%)

How to Use This Tool

🎚️

Adjust Color Sliders

Use the Hue, Saturation, Lightness, and Alpha sliders to create your perfect color. The preview updates instantly as you adjust.

✏️

Enter HEX Code

Already have a color code? Type it in the HEX input field and click Apply to instantly load that color into the picker.

🔍

Pick from Screen

Click "Pick from Screen" to activate the eyedropper tool. Select any color visible on your screen (works in Chrome/Edge 95+).

🖼️

Pick from Image

Upload any image using "Pick from Image", then tap or click anywhere on it to extract that exact color.

📋

Copy Any Format

Click the Copy button next to any color format to instantly copy it to your clipboard. 10 formats available!

🔄

Convert Colors

All color formats update in real-time. Enter a color in any way and see it converted to HEX, RGB, HSL, CMYK and more!

💡

Pro Tip

Use HEX8 format when you need transparency support in your CSS. The last 2 characters represent alpha.

🚀

Quick Access

Press Enter after typing a HEX code to apply it instantly without clicking the Apply button.

🎨

Supported Color Formats

Copy in any format you need

#HEX #HEX8 ◐RGB ◐RGBA ◑HSL ◑HSLA ◒HSV ◒HSB ◓HWB ◔CMYK

Keyboard Shortcuts

Enter Apply HEX color

Esc Close image picker

🎨 CSS Color Picker

Adjust Color Sliders

Enter HEX Code

Pick from Screen

Pick from Image

Copy Any Format

Convert Colors

Pro Tip

Quick Access

Supported Color Formats

ABOUT US

FOLLOW US

🎨 CSS Color Picker

Adjust Color Sliders

Enter HEX Code

Pick from Screen

Pick from Image

Copy Any Format

Convert Colors

Pro Tip

Quick Access

Supported Color Formats

Pick Color from Image

ABOUT US

FOLLOW US